Embed the Creator

Create a controlled Creator

Keep the survey definition in your application state. value is the definition the Creator opens, and onChange receives a complete updated definition after an edit.

import type { SurveyDefinition } from '@kajay/core';
import { SurveyCreator } from '@kajay/creator-react';
import '@kajay/themes/styles.css';
import { useState } from 'react';

const initialDefinition: SurveyDefinition = {
  title: 'Customer feedback',
  pages: [
    {
      name: 'feedback',
      elements: [
        { type: 'text', name: 'name', title: 'Your name' },
        {
          type: 'rating',
          name: 'rating',
          title: 'How was your experience?',
        },
      ],
    },
  ],
};

export function SurveyBuilder() {
  const [definition, setDefinition] =
    useState<SurveyDefinition>(initialDefinition);

  return (
    <SurveyCreator
      value={definition}
      onChange={setDefinition}
    />
  );
}

Feeding the updated value back into the Creator does not reopen the document or reset selection. A genuinely different value from your application is opened as a new edit and can be undone.

What the Creator owns

• The design surface, selection, history, and drag placement session.
• Toolbox, property-grid, logic, JSON, translation, theme, and preview models.
• The default tabbed layout when you render SurveyCreator.

Your application owns loading, persistence, authentication, backend requests, and the surrounding layout. The authored JSON definition remains the handoff between the Creator and the survey runtime.

Next steps

Add a save function when you are ready to persist definitions. Configure a deployment to restrict tabs, question types, or property rows. Use the composed pieces only when the default assembly does not fit your application layout.