Editor API Reference

`ElucimEditor`

The main all-in-one editor component.

interface ElucimEditorProps {
  initialDocument?: ElucimDocument;
  initialFrame?: number | 'last';
  theme?: ElucimTheme;
  editorTheme?: Record<string, string>;
  onDocumentChange?: (document: ElucimDocument) => void;
  onBrowseImage?: BrowseImageFn;
  imageResolver?: ImageResolverFn;
  className?: string;
  style?: React.CSSProperties;
}

Prop	Description
`initialDocument`	Starting canonical `ElucimDocument`.
`initialFrame`	Starting frame, or `'last'` to open at the final linear frame.
`theme`	Shared content `ElucimTheme`; editor chrome is derived from it.
`editorTheme`	Editor chrome token overrides. Accepts bare names or full CSS variable names.
`onDocumentChange`	Called after edits with canonical Elucim Document output. Skips initial mount.
`onBrowseImage`	Opens a host-provided image picker from image fields.
`imageResolver`	Resolves opaque image refs in editor preview.
`className` / `style`	Root editor container styling.

<ElucimEditor
  initialDocument={doc}
  initialFrame="last"
  theme={contentTheme}
  editorTheme={{ 'color-scheme': 'light', accent: '#2563eb' }}
  onDocumentChange={save}
/>

Exported components

Export	Description
`ElucimEditor`	Main editor component.
`ElucimCanvas`	Canvas with zoom/pan, selection, preview frames, minimap hooks, and overlays.
`Toolbar`	Create palette and file/history/theme controls.
`Inspector`	Contextual property panel.
`Timeline`	Timeline and state-machine motion panel.
`FloatingPanel`	Generic draggable/resizable panel primitive used by overlays.
`SelectionOverlay`	Selection boxes, resize handles, and rotation handles.
`DotGrid`	Zoom-adaptive canvas grid.
`Minimap`	Canvas overview.
`ZoomControls`	Zoom buttons and fit controls.
`EditorMenuBar`	Optional menu bar for host integrations.

Hooks

Hook	Description
`useViewport()`	Zoom/pan state and helpers.
`useDrag()`	Move, resize, and rotate interactions.
`useMarquee()`	Marquee selection.
`useMeasuredBounds()`	DOM-based element bounds measurement.

Keyboard and mouse shortcuts

Interaction	Behavior
`Delete` / `Backspace`	Delete selected elements
`Ctrl+Z`	Undo
`Ctrl+Y` / `Ctrl+Shift+Z`	Redo
`Ctrl+A`	Select all
`Ctrl+D`	Duplicate
`Ctrl+C` / `Ctrl+V`	Copy / paste
`Ctrl+G` / `Ctrl+Shift+G`	Group / ungroup
`Ctrl+]` / `Ctrl+[`	Bring forward / send backward
`Ctrl+Shift+]` / `Ctrl+Shift+[`	Bring to front / send to back
Arrow keys	Nudge by 1px
Shift+Arrow keys	Nudge by 10px
`Ctrl+=` / `Ctrl+-`	Zoom in / out
`Ctrl+0` / `Ctrl+1`	Fit / 100% zoom
Space + drag	Pan
Middle-click drag	Pan
Right-click	Context menu
Alt+drag element	Duplicate, then drag copy
Shift+drag resize handle	Constrained resize

Image APIs

interface BrowseImageResult {
  src?: string;
  ref?: string;
  displayName?: string;
  width?: number;
  height?: number;
  alt?: string;
}

type BrowseImageFn = () => Promise<BrowseImageResult | null>;
type ImageResolverFn = (ref: string) => string | Promise<string>;

Exports:

ImagePickerProvider
useImagePicker
ImageResolverProvider
useImageResolver

See Image Assets.

Theme APIs

function v(token: string, scheme?: 'light' | 'dark'): string;
function buildThemeVars(overrides?: Record<string, string>): React.CSSProperties;
function deriveEditorTheme(contentTheme: ElucimTheme, colorScheme: 'light' | 'dark'): Record<string, string>;
function makeRotateCursor(color?: string): string;

const EDITOR_TOKENS: Record<string, string>;
const EDITOR_TOKENS_LIGHT: Record<string, string>;
const ROTATE_CURSOR: string;

See Editor Theming.

Utilities

Import/export

function exportToJson(document: ElucimDocument, options?: { pretty?: boolean }): string;
function importFromJson(json: string): { document: ElucimDocument | null; errors: string[] };
function downloadAsJson(document: ElucimDocument, filename?: string): void;

importFromJson() accepts and validates canonical Elucim Document JSON. Host apps should persist onDocumentChange output.

Bounds and snapping

function getElementBounds(element: object):
  { x: number; y: number; width: number; height: number } | null;

function mergeBounds(boxes: Array<{ x: number; y: number; width: number; height: number }>):
  { x: number; y: number; width: number; height: number };

function isPointInBounds(
  point: { x: number; y: number },
  bounds: { x: number; y: number; width: number; height: number }
): boolean;

function computeSnap(value: number, gridSize: number): number;

Templates

const ELEMENT_TEMPLATES: ElementTemplate[];
function getTemplatesByCategory(): Record<string, ElementTemplate[]>;
const CATEGORY_LABELS: Record<string, string>;

Template categories are presentation, shape, line, text, math, and data.