Quick Start (React)

1. Install

npm install @inlinecms/react
npm install -D @inlinecms/vite-plugin

2. Configure Vite

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { inlineCMS } from '@inlinecms/vite-plugin'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      inlineCMS({
        apiKey: env.VITE_INLINECMS_API_KEY,
        apiUrl: env.VITE_INLINECMS_API_URL, // optional, for self-hosted
      }),
      react(),
    ],
  }
})

Create a .env file:

VITE_INLINECMS_API_KEY=your-api-key
VITE_INLINECMS_API_URL=http://localhost:3001  # for self-hosted

3. Wrap your app

main.tsx

import { InlineCMSProvider } from '@inlinecms/react'

createRoot(document.getElementById('root')!).render(
  <InlineCMSProvider config={{
    apiKey: import.meta.env.VITE_INLINECMS_API_KEY,
    apiUrl: import.meta.env.VITE_INLINECMS_API_URL,
  }}>
    <App />
  </InlineCMSProvider>
)

The floating toolbar is injected automatically.

4. Annotate elements

function HeroSection() {
  return (
    <section>
      <h1 inline-cms>Welcome to our site</h1>
      <p inline-cms>We build great things.</p>
      <img inline-cms src="/hero.jpg" alt="Hero" />
    </section>
  )
}

That’s it. Visit the page, click Editor login, and start editing.

What happens at build time

The Vite plugin transforms your annotated elements:

// Your code
<h1 inline-cms>Welcome</h1>

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

• The inline-cms prop is stripped (it’s a signal, not a runtime value)
• A stable SHA1 fingerprint is injected from file:line:col
• The tag is replaced with an InlineCMS wrapper component
• The import is auto-injected