Skip to content
KajayDocs
Browse documentation
CreatorTypeScript SDKReactextension

Default Creator or composed pieces

Choose the maintained assembly or arrange the same public panels inside your product layout.

Start with SurveyCreator

SurveyCreator is the maintained default assembly. It owns one workspace and displays one view at a time: design, preview, logic, JSON, translations, or theme. Start here unless your product already has a layout the Creator must inhabit.

The default assembly
import { SurveyCreator } from '@kajay/creator-react';

<SurveyCreator
  value={definition}
  onChange={setDefinition}
  save={saveDefinition}
  tabs={['design', 'preview', 'logic', 'json']}
/>

Compose the pieces

The same panels used by the default assembly are public. A composed Creator can put the toolbox in an application sidebar, the canvas in the main route, and the property grid in an inspector your product already owns.

A custom Creator layout
import {
  CreatorNotices,
  DesignSurfacePanel,
  HistoryPanel,
  PageNavigatorPanel,
  PreviewPanel,
  PropertyGridPanel,
  ToolboxPanel,
  useCreatorDocument,
  useCreatorWorkspace,
  useDesignerPlacement,
} from '@kajay/creator-react';

function ComposedCreator({ value, onChange }) {
  const workspace = useCreatorWorkspace({ definition: value });
  useCreatorDocument({ surface: workspace.surface, value, onChange });
  const placement = useDesignerPlacement(workspace.surface);

  return (
    <div className="creator-layout">
      <CreatorNotices surface={workspace.surface} />
      <aside>
        <ToolboxPanel
          toolbox={workspace.toolbox}
          getItemProps={placement.getItemProps}
        />
      </aside>
      <main>
        <HistoryPanel surface={workspace.surface} />
        <PageNavigatorPanel
          surface={workspace.surface}
          placement={placement}
        />
        <DesignSurfacePanel
          surface={workspace.surface}
          placement={placement}
        />
      </main>
      <PropertyGridPanel surface={workspace.surface} />
      <PreviewPanel session={workspace.preview} />
    </div>
  );
}

Share one workspace

Create one workspace and pass each panel only the model it draws. In particular, the toolbox and canvas must share one placement object: a drag is one gesture that begins in the toolbox and ends on the design surface.

  • workspace.surface owns the document, selection, and history.
  • workspace.toolbox owns categories, search, and allowed items.
  • Preview, JSON, logic, translations, and theme each have a narrow session.
  • useCreatorWorkspace disposes follower sessions on unmount.

Composition responsibilities

Mounting preview beside design creates a complete second survey in the same document. That is supported, but labels and test queries must be scoped to the appropriate region. The default assembly avoids this ambiguity by showing one view at a time.