@wizestudio/editor

The WizeStudio editor UI. CMS-unaware by construction: it receives a CmsAdapter by injection and mounts anywhere.

Where this sits

WizeStudio is a visual page builder for headless CMS platforms. @wizestudio/core holds the editing model; this package is the React shell over it — toolbar, canvas frame, navigator, widget panel, manifest-driven property panel, theme and data panels, context menu, drag-and-drop, keyboard shortcuts, autosave.

It imports no CMS package, and CI enforces that. A host — @wizestudio/plugin-strapi today — supplies an adapter and mounts this. Supporting a new CMS therefore costs a host package plus an adapter, with nothing in here to change.

It also owns no editing state of its own beyond view preferences. All state lives in the engine and React subscribes to it through useSyncExternalStore, which is why the whole editing model can be tested in Node, and why a future non-React shell would need no engine changes at all.

Install

npm install @wizestudio/editor

React 18 or later is a peer dependency.

Usage

import { createEngine } from '@wizestudio/core';
import {
  Editor, EditorProvider, createControlRegistry, registerBuiltinControls, useAutosave,
} from '@wizestudio/editor';
import '@wizestudio/editor/styles.css';

function Host({ adapter, documentRef, document, manifests }) {
  const controls = createControlRegistry();
  registerBuiltinControls(controls);

  const engine = createEngine(document, { widgets: manifests });
  const persistence = useAutosave({ engine, adapter, documentRef });

  return (
    <EditorProvider
      engine={engine}
      controls={controls}
      adapter={adapter}
      documentRef={documentRef}
      canvasUrl="https://app.example.com/wizestudio/canvas"
      canvasOrigins={['https://app.example.com']}
      persistence={persistence}
    >
      <Editor />
    </EditorProvider>
  );
}

Load manifests before the document. Loading in the other order runs migrations against an empty registry and marks every node unknown.

Do not forget styles.css. Omitting it produces an editor that works perfectly and looks like an unstyled HTML document.

The canvas is not rendered here

The editor does not import your components — it cannot, since they live in a different bundle and, in production, a different origin. It frames your application's own edit-mode route and drives it over @wizestudio/canvas-bridge. canvasOrigins is a security boundary: anything you allow can read and rewrite the page being edited.

The trade is that editing requires your frontend to be running and reachable. When it is not, the canvas degrades to an honest notice while the navigator and property panels keep working. It never fakes a render.

Key exports

| Area | Exports | |---|---| | Shell | Editor, EditorProvider, EditorServices | | Hooks | useEditor, useDocument, useNode, useSelection, useHistoryState, useWidgets, useCommand | | Panels | Navigator, WidgetPanel, PropertyPanel, DataPanel, ThemePanel, BlocksPanel, Canvas, ContextMenu | | Controls | createControlRegistry, registerBuiltinControls, BUILTIN_CONTROLS, UnknownControl, ControlDefinition | | Styling | STYLE_GROUPS, TokenPicker | | Data | BindingAffordance, RepeatSection, useSampleData | | Persistence | useAutosave, Autosave, AutosaveOptions | | Collaboration | useDocumentLock, LeaseBanner, formatCountdown | | Blocks | useBlocks, BlockLibrary | | Shortcuts | useKeyboardShortcuts |

The property panel is entirely manifest-driven: which control renders a prop, how fields group, and when a field is visible all come from the widget's ui schema. Registering a custom control through createControlRegistry is how a project extends that without forking the panel.

useDocumentLock implements the one-editor-at-a-time lease. Read-only is enforced at the document store rather than in the UI, so commands, drag-and-drop, the property panel, inline canvas editing and undo are all covered by one check.

Licence

Commercial. See LICENSE-COMMERCIAL.md and wizestudio.wizeb.com/pricing.

Development hosts are free and unlimited — localhost, *.local, *.test, private IP ranges and single-label hosts. No account, no network, no key.

Only authoring is licensed. The packages that serve your published pages — schema, core, canvas-bridge, renderer-react, renderer-next and cli — are MIT and contain no licensing code, so a lapsed subscription cannot affect a live site.

wizestudio.wizeb.com