Theme Editor

A visual editor for creating custom FormEngineTheme objects. Adjust colors, typography, spacing, and shape to match your brand, then export the theme JSON for use in your app.

Install

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

Basic Usage

app/admin/theme/page.tsx

"use client";

import { FieldCraftProProvider } from "@squaredr/fieldcraft-pro";
import { ThemeEditor } from "@squaredr/fieldcraft-pro/theme-editor";
import "@squaredr/fieldcraft-pro/theme-editor/styles.css";

export default function ThemePage() {
  return (
    <FieldCraftProProvider licenseKey={process.env.NEXT_PUBLIC_FCPRO_LICENSE_KEY!}>
      <ThemeEditor
        onSave={(theme) => {
          // Save to your backend, local storage, or CMS
          fetch("/api/theme", {
            method: "PUT",
            body: JSON.stringify(theme),
          });
        }}
        height="100vh"
      />
    </FieldCraftProProvider>
  );
}

How It Works

The Theme Editor lets you visually edit all 41 properties of a FormEngineTheme object across five tabs:

Colors — primary, secondary, error, surface, background, text colors
Typography — font family, sizes for headings, labels, body, help text
Shape — border radius for fields, cards, buttons, and border width
Spacing — gaps between fields, section padding, field padding
Layout — max width, content alignment, progress bar height

A live form preview updates as you edit, so you can see exactly how your forms will look. You can start from any of the 6 built-in presets and customize from there.

Using Your Custom Theme

Once you've designed your theme, use the Save button (or Ctrl+S) to trigger the onSave callback. You can also use the Export JSON button to copy the theme object.

Then pass it to any FieldCraft component that accepts a theme prop:

Using your saved theme

import { FormEngineRenderer } from "@squaredr/fieldcraft-react";
import { myCustomTheme } from "@/lib/theme"; // Your saved theme JSON

<FormEngineRenderer
  schema={schema}
  theme={myCustomTheme}
  onSubmit={handleSubmit}
/>

Matching Your Website's Brand

To make FieldCraft forms match your website:

Open the Theme Editor and select the preset closest to your design
Update Colors to match your brand palette (primary, background, surface)
Set Typography font family to match your site's font stack
Adjust Shape border radius to match your UI (e.g., fully rounded, sharp, etc.)
Export the JSON and store it in your project

Example: storing theme in a constants file

// lib/fieldcraft-theme.ts
import type { FormEngineTheme } from "@squaredr/fieldcraft-core";

export const brandTheme: FormEngineTheme = {
  colors: {
    primary: "#4f46e5",       // Your brand primary
    background: "#ffffff",     // Your site background
    surface: "#f9fafb",       // Card/section background
    text: "#111827",          // Body text
    // ... rest of the theme from the editor export
  },
  typography: {
    fontFamily: "'Inter', sans-serif",  // Match your site font
    // ...
  },
  shape: { /* ... */ },
  spacing: { /* ... */ },
  layout: { /* ... */ },
};

Props

Prop	Type	Description
`initialTheme`	`FormEngineTheme`	Starting theme. Defaults to `cleanPreset`.
`onChange`	`(theme) => void`	Called on every edit.
`onSave`	`(theme) => void`	Called on Save button / Ctrl+S.
`height`	`string \| number`	Container height.
`width`	`string \| number`	Container width.
`showPreview`	`boolean`	Show live preview panel. Default: `true`.
`toolbarExtra`	`ReactNode`	Extra content in the toolbar.

← PreviousResponse Viewer