Editor canvas

Headless editor primitive: live surface, overlay and interaction layer. Unstyled; styling happens in the consumer's wrapper components (registry). Use inside Editor.Root.

import { Canvas } from '@createcms/react/editor/canvas';

Usage

Canvas.Root renders the store tree through a components map. Pass a plain { heading: Heading } record or a { _components } object (the shape createBlocksMap returns). components is required. Consumer children are the overlay slot, rendered after the tree inside the host.

import { Editor } from '@createcms/react/editor';
import { Canvas } from '@createcms/react/editor/canvas';

function PageCanvas({ schema, tree, pageBlocks }) {
  return (
    <Editor.Root schema={schema} defaultValue={tree}>
      <Canvas.Root components={pageBlocks} style={{ position: 'relative' }}>
        <Canvas.Overlay>
          <Canvas.SelectionRing />
          <Canvas.HoverRing />
          <Canvas.FieldRing />
          <Canvas.BlockToolbar side="top" align="start">
            {/* consumer buttons via useBlockActions(selectedId) */}
          </Canvas.BlockToolbar>
          <Canvas.InsertButton placement="between" type="paragraph" />
          <Canvas.DragHandle blockId="selectedBlockId" />
          <Canvas.PaletteItem type="paragraph" />
          <Canvas.DropIndicator />
          <Canvas.DragPreview />
          <Canvas.InlineText />
        </Canvas.Overlay>
      </Canvas.Root>
    </Editor.Root>
  );
}

Spread edit.block on each block's root element and edit.field.<key> on the element that shows that property (BlockComponentProps.edit from @createcms/core/react). Leftover missing anchors are a dev warning because measurement cannot see a block without data-editor-block.

resolve and components must be referentially stable: an inline object literal re-runs every resolver. surface defaults to 'inline'. surface="frame" throws (Canvas.Root: surface "frame" is not implemented).

interactive is 'edit' | 'select' | 'none' (default 'edit'). Optional resolve handles reference / link / string; never image. Unresolved values omit or mark data-unresolved.

The canvas host needs a positioning context (position: relative or similar) so Canvas.Overlay's absolute; inset: 0 covers the surface. Overlay portals into the host. Overlay is pointer-events: none and is not aria-hidden. Rings set aria-hidden. A child that must receive pointer input sets pointer-events: auto on itself.

DnD is pointer-based (not HTML5 drag). Canvas.InlineText is the GLASS overlay for string / richText in edit.

Parts

Hooks

Types

Helpers

Data attributes