@wizestudio/renderer-react

Renders a WizeStudio layout document as React components — plus defineWidget for authoring them, and the edit-mode canvas the editor drives.

Where this sits

WizeStudio is a visual page builder for headless CMS platforms. It never stores HTML: a page is a normalized JSON document from @wizestudio/schema, and this package is what turns one into React elements by calling your components.

It is where widgets are authored (defineWidget) and where they are rendered — both in production (WizeRenderer) and inside the editor's canvas (WizeCanvas). Both entry points call the same components, which is the property that keeps the editor honest. On Next.js, use @wizestudio/renderer-next on top of this.

Install

npm install @wizestudio/renderer-react

React 18 or later is a peer dependency.

Authoring a widget

import { defineWidget } from '@wizestudio/renderer-react';

export const Hero = defineWidget<{ heading: string }>({
  type: 'acme/hero',
  title: 'Hero',
  category: 'content',
  props: {
    type: 'object',
    properties: { heading: { type: 'string', default: 'Welcome' } },
    required: ['heading'],
  },
  ui: { fields: { heading: { control: 'text' } } },
  styles: ['spacing', 'background'],
  component: ({ heading, wize }) => (
    <section {...wize.attrs}>
      <h1>{heading}</h1>
    </section>
  ),
});

wize.attrs must be spread onto the root element: it carries the generated style class and, in edit mode, the identifier the canvas hit-tests against. A widget that drops it renders unstyled and cannot be selected.

createPack then splits a set of definitions into the two halves that live on opposite sides of the bridge — manifests for the editor, components for the renderer:

export const { manifests, components } = createPack([Hero, Pricing, Faq]);

The component never crosses that boundary. That is what makes "developers own the components" structurally true rather than a slogan.

Rendering

import { WizeRenderer } from '@wizestudio/renderer-react';

<WizeRenderer document={layout} components={components} context={{ data: { page } }} />

WizeRenderer is usable in a React Server Component: no hooks, no effects, no class components, no runtime style injection. It emits no markup of its own beyond a <style> element and a wrapper. Supplying context.onError opts into the client-side error boundary, and therefore into a client component.

The canvas

// app/wizestudio/canvas/page.tsx
'use client';
import { WizeCanvas } from '@wizestudio/renderer-react';
import { components } from './widgets';

export default function Canvas() {
  return <WizeCanvas components={components} allowedOrigins={['https://cms.example.com']} />;
}

The editor frames this route and drives it over @wizestudio/canvas-bridge, so the canvas is a preview of the real site rendered with the real components rather than an approximation of them. All hit-testing and measurement happen here and travel back as geometry; the editor never reaches into this document, because in production the two are different origins.

allowedOrigins is a security boundary, not a formality. Anything you allow can read and rewrite the page being edited. Never use *.

Key exports

| Export | Purpose | |---|---| | defineWidget | Pairs a React component with a manifest; validates the widget type at definition time | | createPack | Splits definitions into { manifests, components } | | WizeRenderer | The recursive renderer. RSC-safe | | renderNode | Renders one node, for callers driving the recursion themselves | | WizeCanvas | The edit-mode canvas client | | WidgetBoundary | The client-side error boundary a failing widget is isolated by | | buildStylesheet | Deterministic CSS generation — returns { css, classes } | | WidgetProps, WidgetRuntime, ComponentMap, RenderContext | The authoring and rendering types |

Licence

MIT.

WizeStudio is open core, and this package is on the production render path. It is MIT deliberately and contains no licensing code of any kind, which is what makes "a lapsed subscription cannot break your live site" a property of the build rather than a promise. schema, core, canvas-bridge, renderer-next and cli are MIT for the same reason; the authoring side — editor, plugin-strapi, components, cms-strapi — is commercial.

wizestudio.wizeb.com