Form Builder

A visual drag-and-drop form builder that outputs FieldCraft schemas. 28 field types, undo/redo, keyboard shortcuts, and theming out of the box.

Install

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

Basic Usage

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) => {
          // Save to your backend
          fetch("/api/schemas/" + schema.id, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(schema),
          });
        }}
        height="100vh"
        theme={squaredrDarkPreset}
      />
    </FieldCraftProProvider>
  );
}

Styles: You must import @squaredr/fieldcraft-pro/styles.css for the builder UI to render correctly.

Props

Prop	Type	Description
`initialSchema`	FormEngineSchema	Schema to load on mount. Defaults to an empty form.
`onChange`	(schema) => void	Called on every schema change
`onSave`	(schema) => void	Called when user clicks Save or presses Ctrl+S
`height`	string \| number	Container height
`theme`	FormBuilderTheme	Theme overrides via CSS variables
`toolbarExtra`	ReactNode	Extra content in the toolbar (e.g., a Preview toggle)

Adding a Preview Mode

The toolbarExtra prop lets you inject custom controls into the toolbar. A common pattern is adding a Builder/Preview toggle that swaps between the drag-and-drop canvas and a live FormEngineRenderer:

import { FormBuilder, DEFAULT_SCHEMA } from "@squaredr/fieldcraft-pro/form-builder";
import { FormEngineRenderer, darkPreset } from "@squaredr/fieldcraft-react";
import { useState } from "react";

function BuilderWithPreview() {
  const [mode, setMode] = useState<"build" | "preview">("build");
  const [schema, setSchema] = useState(DEFAULT_SCHEMA);

  const toggle = (
    <div className="flex gap-1">
      <button onClick={() => setMode("build")}>Builder</button>
      <button onClick={() => setMode("preview")}>Preview</button>
    </div>
  );

  if (mode === "preview") {
    return (
      <FormEngineRenderer
        schema={schema}
        theme={darkPreset}
        onSubmit={console.log}
      />
    );
  }

  return (
    <FormBuilder
      initialSchema={schema}
      onChange={setSchema}
      toolbarExtra={toggle}
    />
  );
}

Theming

Two built-in presets are available:

import { squaredrDarkPreset, cleanPreset } from "@squaredr/fieldcraft-pro/form-builder";

// Dark theme (matches squaredr.tech)
<FormBuilder theme={squaredrDarkPreset} />

// Light/clean theme
<FormBuilder theme={cleanPreset} />

You can also pass a custom FormBuilderTheme object with any combination of CSS color values for background, foreground, primary, accent, border, and builder-specific surfaces.

Keyboard Shortcuts

Shortcut	Action
`Ctrl+S`	Save
`Ctrl+Z`	Undo
`Ctrl+Shift+Z`	Redo
`Delete`	Remove selected field or section
`Ctrl+D`	Duplicate selected

Persistence

The FormBuilder does not handle persistence itself. Use the onSave callback to send the schema to your backend. The schema output is a standard FormEngineSchema JSON object that works with any REST API, database, or the built-in adapters from @squaredr/fieldcraft-core.

← PreviousLicense & Setup Next →Schema Editor