Schema Editor

Deprecated: The standalone @squaredr/fieldcraft-pro-schema-editor package has been discontinued. Schema editing functionality is now built into the Form Builder as part of the unified @squaredr/fieldcraft-pro package.

A Monaco-powered JSON editor with a side-by-side live preview. Edit schemas as code and see the rendered form update in real time.

Migration

If you were using @squaredr/fieldcraft-pro-schema-editor, switch to the Form Builder in @squaredr/fieldcraft-pro:

npm install @squaredr/fieldcraft-pro @squaredr/fieldcraft-core

app/builder/page.tsx

"use client";

import { FieldCraftProProvider } from "@squaredr/fieldcraft-pro";
import { FormBuilder, squaredrDarkPreset } from "@squaredr/fieldcraft-pro/form-builder";
import "@squaredr/fieldcraft-pro/styles.css";

export default function BuilderPage() {
  return (
    <FieldCraftProProvider licenseKey={process.env.NEXT_PUBLIC_FCPRO_LICENSE_KEY!}>
      <FormBuilder
        onSave={(schema) => console.log("Saved:", schema)}
        height="100vh"
        theme={squaredrDarkPreset}
      />
    </FieldCraftProProvider>
  );
}

Props

Prop	Type	Description
`initialSchema`	FormEngineSchema	Schema to load on mount
`onChange`	(schema) => void	Called on each valid JSON parse
`onSave`	(schema) => void	Called on Ctrl+S or Save button
`schemaAdapter`	SchemaAdapter	Optional adapter for backend persistence
`height`	string \| number	Container height (default: 600px)
`width`	string \| number	Container width (default: 100%)

Live Preview

The editor uses a 50/50 split layout. The left panel is the Monaco JSON editor and the right panel renders the form using FormEngineRenderer from @squaredr/fieldcraft-react. The preview updates on every valid JSON parse with debouncing.

When the JSON is invalid, the preview shows a parse error message. When the schema is empty, it shows a placeholder prompt.

Validation Markers

Schema validation errors appear as inline markers in the Monaco editor. The errorsToMarkers utility converts validation error arrays to Monaco-compatible marker objects.

Backend Persistence

Pass a schemaAdapter to enable load/save from your backend. The adapter uses the same interface as @squaredr/fieldcraft-core:

import { createHttpSchemaAdapter } from "@squaredr/fieldcraft-core";

const adapter = createHttpSchemaAdapter({ baseUrl: "/api" });

<SchemaEditor schemaAdapter={adapter} height="100vh" />

← PreviousForm Builder Next →Response Viewer