@squaredr/fieldcraft-pro

Pro components for FieldCraft — a schema-driven form engine for React. Build forms visually, view responses, and customize themes without writing code.

What's Included

| Component | Description | |-----------|-------------| | FormBuilder | Drag-and-drop visual form designer with 44 field types, undo/redo, import/export, and live preview | | ResponseViewer | Read-only viewer for submitted form data with table and detail views, CSV/JSON export | | ThemeEditor | Visual theme editor for form styling with color pickers, typography controls, and live preview |

Install

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

Quick Start

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

function App() {
  return (
    <FieldCraftProProvider licenseKey="YOUR_LICENSE_KEY">
      <FormBuilder
        onSave={(schema) => console.log(schema)}
        height="100vh"
      />
    </FieldCraftProProvider>
  );
}

Subpath Imports

// Root — everything
import { FormBuilder, ResponseViewer, ThemeEditor } from "@squaredr/fieldcraft-pro";

// Tree-shakeable subpath imports
import { FormBuilder } from "@squaredr/fieldcraft-pro/form-builder";
import { ResponseViewer } from "@squaredr/fieldcraft-pro/response-viewer";
import { ThemeEditor } from "@squaredr/fieldcraft-pro/theme-editor";

// CSS
import "@squaredr/fieldcraft-pro/styles.css";              // Form Builder styles
import "@squaredr/fieldcraft-pro/theme-editor/styles.css"; // Theme Editor styles

Form Builder

Visual form designer with drag-and-drop, live preview, and schema export:

import { FormBuilder } from "@squaredr/fieldcraft-pro";

<FormBuilder
  onSave={(schema) => saveToServer(schema)}
  onChange={(schema) => setPreview(schema)}
  height="100vh"
/>

Field Types (42)

| Category | Fields | |----------|--------| | Text | Short Text, Long Text, Email, Phone, URL, Password | | Numeric | Number, Slider, Rating, NPS, Opinion Scale, Currency | | Selection | Single Select, Multi Select, Dropdown, Yes/No, Ranking, Checkbox Group | | Date/Time | Date, Time, Date Range, Date of Birth | | Media | File Upload, Signature, Image Capture | | Content | Welcome Screen, Thank You Screen, Rich Text, Image, Video, Divider, Spacer | | Structural | Section Header, Info Block, Page Break, Consent | | Advanced | Matrix, Calculated, Hidden, Repeater, Address, Legal Name, Country Select |

Extending with Custom Fields

The FormBuilder accepts questionTypes and palette props to inject additional field types at runtime:

import { FormBuilder, QUESTION_TYPE_INFO, DEFAULT_PALETTE } from "@squaredr/fieldcraft-pro";

<FormBuilder
  questionTypes={{ ...QUESTION_TYPE_INFO, ...myCustomTypes }}
  palette={[...DEFAULT_PALETTE, ...myCustomCategories]}
/>

Response Viewer

Display submitted form responses in table or card/detail views:

import { ResponseViewer } from "@squaredr/fieldcraft-pro";

<ResponseViewer
  schema={schema}
  responses={responses}
  onExport={(format) => console.log(`Export as ${format}`)}
/>

Theme Editor

Live-edit form themes with color pickers, typography controls, and shape/spacing sliders:

import { ThemeEditor } from "@squaredr/fieldcraft-pro";

<ThemeEditor
  onChange={(theme) => console.log(theme)}
  onSave={(theme) => saveToServer(theme)}
/>

Includes presets: Clean, Dark, Modern, High Contrast, Clinical, Playful.

Requirements

• React 18 or 19
• @squaredr/fieldcraft-core >= 1.6.0
• @squaredr/fieldcraft-react >= 1.6.0

License

Commercial license required for production use. Free in development mode.

See LICENSE.txt for details.

Get a license | Documentation | GitHub | Discord