FormBuilder

The FormBuilder component provides a drag-and-drop interface for creating dynamic forms visually.

Basic Usage

tsx
import { FormBuilder } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';

function App() {
  const handleSave = (schema) => {
    console.log('Form schema:', schema);
  };

  return (
    <FormBuilder
      onSave={handleSave}
      initialSchema={{
        title: 'My Form',
        description: 'Form description',
        fields: []
      }}
    />
  );
}

Props

PropTypeDefaultDescription
initialSchemaFormSchema-Initial form schema to load
onSave(schema: FormSchema) => void-Callback when user saves the form
readOnlybooleanfalseDisable editing if true

Features

  • ✓
    Drag & Drop: Intuitive drag-and-drop interface powered by @dnd-kit
  • ✓
    Field Palette: Sidebar with 20+ available field types
  • ✓
    Properties Panel: Configure field properties, validation, and styling
  • ✓
    Device Preview: See how forms look on desktop, tablet, and mobile
  • ✓
    Undo/Redo: Full history management for all changes
  • ✓
    Form Settings: Configure submit button text, labels, and theme

Advanced Example

Using FormBuilder with state management and persistence:

tsx
import { useState, useEffect } from 'react';
import { FormBuilder, FormSchema } from '@formmorf/builder';

function FormManager() {
  const [schema, setSchema] = useState<FormSchema | null>(null);

  // Load schema from localStorage
  useEffect(() => {
    const saved = localStorage.getItem('formSchema');
    if (saved) {
      setSchema(JSON.parse(saved));
    } else {
      setSchema({
        title: 'New Form',
        description: '',
        fields: []
      });
    }
  }, []);

  const handleSave = (newSchema: FormSchema) => {
    // Save to localStorage
    localStorage.setItem('formSchema', JSON.stringify(newSchema));

    // Also save to backend
    fetch('/api/forms', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newSchema)
    });

    setSchema(newSchema);
  };

  if (!schema) return <div>Loading...</div>;

  return (
    <div className="h-screen">
      <FormBuilder
        initialSchema={schema}
        onSave={handleSave}
      />
    </div>
  );
}

Keyboard Shortcuts

UndoCtrl + Z
RedoCtrl + Shift + Z
Delete Selected FieldDelete

Next: FormViewer

Learn how to render forms for end users with the FormViewer component

FormViewer Documentation