Editor UI

The createCMS docs site hosts a shadcn registry of copy-paste editor chrome. Items wrap Editor.Field, Canvas overlay parts, a three-column shell, and an email split layout. None of them wrap Editor.Root or Canvas.Root. Compose them inside Editor.Root in your app code. For form-only, live canvas, and form-plus-preview layouts, see the Visual editor guide.

Prerequisites

Your app should already be initialized with shadcn (npx shadcn@latest init) and have @createcms/react installed:

npm install @createcms/react

Wire cms-backed field controls with CmsSourcesProvider and pass fields={cmsFields} on Editor.Root (the consumer passes the result of useCmsFieldSources(client) into the provider).

Install registry items

Field wrappers and cms controls

npx shadcn@latest add https://createcms.dev/r/editor-form.json

Canvas overlay chrome

npx shadcn@latest add https://createcms.dev/r/editor-canvas.json

Three-column shell

npx shadcn@latest add https://createcms.dev/r/editor-shell.json

Email split layout

npx shadcn@latest add https://createcms.dev/r/editor-email.json

While developing the docs site locally, swap https://createcms.dev for http://localhost:4000.

Usage

Compose <Editor.Root schema={…}> in your app code, then install and use the copied parts.

Cms field controls

import { Editor } from '@createcms/react/editor';
import { useCmsFieldSources } from '@createcms/react/editor/cms';
import {
  CmsSourcesProvider,
  cmsFields,
  Form,
} from '@/components/editor-form';

const sources = useCmsFieldSources(cmsClient);

<Editor.Root schema={schema} fields={cmsFields}>
  <CmsSourcesProvider sources={sources}>
    <Form blockId={blockId} />
  </CmsSourcesProvider>
</Editor.Root>

Styled container. Wrap the block's fields with the styled Form shell. Inner fields remain the headless primitives from @createcms/react unless you pass fields={cmsFields}.

import { Editor } from '@createcms/react/editor';
import { Form } from '@/components/editor-form';

<Editor.Root schema={schema}>
  <Form blockId={blockId} />
</Editor.Root>

Styled parts mapped by the consumer. Render each field with the styled Field, FieldLabel, and FieldControl parts. Do not nest these inside Form.

import { Editor } from '@createcms/react/editor';
import { Field, FieldLabel, FieldControl } from '@/components/editor-form';

<Editor.Root schema={schema}>
  <Field blockId={blockId} name="title">
    <FieldLabel />
    <FieldControl />
  </Field>
</Editor.Root>

Shell and canvas. Place EditorShell and styled canvas parts inside Editor.Root. Pass Canvas.Root and overlay parts as children of the shell's canvas column.

The items copy into your shadcn components directory. Adjust import paths to match your aliases.