Vite Plugin

The Vite plugin transforms JSX at build time — replacing inline-cms annotated elements with InlineCMS wrapper components and injecting stable fingerprint keys.

Setup

vite.config.ts

import { inlineCMS } from '@inlinecms/vite-plugin'

export default defineConfig({
  plugins: [
    inlineCMS({
      apiKey: 'your-key',
      apiUrl: 'https://cms.yourdomain.com',
      cdnUrl: 'https://cdn.yourdomain.com',
    }),
    react(), // or vue()
  ],
})

Options

Option	Type	Required	Description
apiKey	string	Yes	Project API key, injected as VITE_INLINECMS_API_KEY
apiUrl	string	No	API URL, injected as VITE_INLINECMS_API_URL
cdnUrl	string	No	CDN URL, injected as VITE_INLINECMS_CDN_URL
include	RegExp	No	File patterns to transform (default: /\.(tsx|jsx)$/)
exclude	RegExp	No	File patterns to skip (default: /node_modules/)
bake	boolean | object	No	Build-time hydration. Embed the published snapshot in the output (default: false)

bake

When true (or an options object), a production vite build pulls the project’s published snapshot and folds it into the emitted HTML so a visitor’s first paint is published content with no API round-trip. The dev server never bakes. See the Build-Time Hydration guide for the full picture.

inlineCMS({
  apiKey: 'your-key',
  bake: true,
  // or, with options:
  // bake: { metadataFile: 'inlinecms-build.json', timeout: 10000 },
})

Sub-option	Type	Default	Description
enabled	boolean	true	Master switch (passing true is shorthand for {})
metadataFile	string	inlinecms-build.json	Build-report filename, relative to the output root
timeout	number	10000	Snapshot-fetch timeout in milliseconds

Baking is fail-safe: a fetch error, a local INLINECMS_BAKE=off, or the server kill-switch all ship a working no-bake build (it can never fail your build). A <script id="inlinecms-snapshot"> is injected before your app bundle and an inlinecms-build.json report is emitted alongside the output.

What it does

1. Tag replacement

// Before
<h1 inline-cms>Welcome</h1>

// After
<InlineH1 inline-cms-fingerprint="a1b2c3d4e5f6">Welcome</InlineH1>

2. Fingerprint injection

Each element gets a stable SHA1 fingerprint derived from file:line:col. This key survives text changes — only moving the element to a different file/line changes it.

3. Auto-import

The plugin automatically adds the import for any InlineCMS component used:

import { InlineH1, InlineP } from '@inlinecms/react'

If an import from @inlinecms/react already exists, missing components are added to it.

4. Prop stripping

The inline-cms boolean prop is removed after processing. It’s a build-time signal, not a runtime value.

Supported tags

HTML tag	InlineCMS component
h1-h6	InlineH1-InlineH6
p	InlineP
span	InlineSpan
div	InlineDiv
section	InlineSection
article	InlineArticle
aside	InlineAside
main	InlineMain
img	InlineImg
video	InlineVideo
a	InlineA
blockquote	InlineBlockquote
figcaption	InlineFigcaption
figure	InlineFigure
li	InlineLi
label	InlineLabel

Fast path

Files that don’t contain the string inline-cms are skipped entirely — zero overhead for unannotated files.