@squaredr/fieldcraft-pro

Pro components for FieldCraft — a schema-driven form engine for React.

Includes:

• Form Builder — Drag-and-drop visual form designer with 32 field types, undo/redo, import/export, and live preview
• Response Viewer — Read-only viewer for submitted form data with table and detail views, CSV/JSON export
• Theme Editor — Visual theme editor for form styling and branding with CSS custom properties 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

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}`)}
/>

Supports clinical field rendering (scoring instruments, body diagrams, pain scales, BMI, vitals) when paired with @squaredr/fieldcraft-pro-telehealth.

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.

Field Types (32)

| Category | Fields | |----------|--------| | Text | Short Text, Long Text, Email, Phone, URL | | Numeric | Number, Slider, Rating, NPS, Opinion Scale | | Selection | Single Select, Multi Select, Dropdown, Yes/No, Ranking | | Date/Time | Date, Time | | Media | File Upload | | Content | Welcome Screen, Thank You Screen, Rich Text, Image, Video, Divider, Spacer | | Structural | Section Header, Info Block, Page Break, Consent | | Advanced | Matrix, Calculated, Hidden |

Need telehealth fields (PHQ-9, GAD-7, clinical instruments, patient intake)? See @squaredr/fieldcraft-pro-telehealth.

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]}
/>

Requirements

• React 18 or 19
• @squaredr/fieldcraft-core ^1.3.3
• @squaredr/fieldcraft-react ^1.2.8

License

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

See LICENSE.txt for details.

Get a license | Documentation | Discord