Form Builder

Visual Form Builder

Create forms visually with our interactive form builder. Features a modular tab system that can be extended with custom tabs for specialized workflows.

Live Preview

Code Export

Extensible

Want to try it ?

Start using the form builder to create forms with a visual interface. Extend it with custom tabs to match your specific workflow needs.

Open Builder

Basic Usage

Get started with the form builder using the default configuration with builder, preview, and code tabs.

The form builder provides an intuitive interface for creating forms visually. It includes three main tabs by default: Builder for form design, Preview for testing, and Code for export.

Default Builder

import { FormBuilder } from '@/components/formedible/builder/form-builder';

export default function MyBuilderPage() {
  return (
    <div className="min-h-screen">
      <FormBuilder />
    </div>
  );
}

Tab Configuration

Control which tabs are available and customize the builder's functionality.

You can configure which tabs are enabled and set the default tab that opens when the builder loads.

Enabled Tabs

// Builder and Preview only
<FormBuilder enabledTabs={["builder", "preview"]} />

// All tabs with custom default
<FormBuilder 
  enabledTabs={["builder", "preview", "code"]}
  defaultTab="preview" 
/>

Available Tab IDs

builder

Visual form designer with drag-and-drop fields

preview

Live preview of the form as users will see it

code

Generated code that can be copied and used

Custom Tabs

Extend the builder with custom tabs for specialized functionality.

Create custom tabs to add specialized functionality to the form builder. Custom tabs receive props to access and modify form data.

Creating a Custom Tab

import { TabContentProps, TabConfig } from '@/components/formedible/builder/types';

// 1. Create tab content component
const DocumentationTabContent: React.FC<TabContentProps> = ({ 
  getFormMetadata, 
  getAllFields 
}) => {
  const metadata = getFormMetadata();
  const fields = getAllFields();

  return (
    <div className="p-8">
      <h2 className="text-2xl font-bold mb-4">Form Documentation</h2>
      <div className="space-y-4">
        <p><strong>Title:</strong> {metadata.title}</p>
        <p><strong>Fields:</strong> {fields.length}</p>
        
        <div className="space-y-2">
          {fields.map((field) => (
            <div key={field.id} className="border rounded p-3">
              <span className="font-medium">{field.label}</span>
              <span className="ml-2 text-muted-foreground">({field.type})</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// 2. Define tab configuration
const documentationTab: TabConfig = {
  id: "documentation",
  label: "Docs",
  icon: FileText,
  component: DocumentationTabContent,
  enabled: true,
  order: 4,
};

Using Custom Tabs

import { FormBuilder } from '@/components/formedible/builder/form-builder';
import { builderTab, previewTab, codeTab } from '@/components/formedible/builder/default-tabs';

<FormBuilder 
  tabs={[builderTab, previewTab, codeTab, documentationTab]}
  defaultTab="builder"
/>

Available Props

Props available to custom tab components for accessing and modifying form data.

TabContentProps Interface

interface TabContentProps {
  // Form data access
  getFormMetadata: () => FormMetadata;
  getAllFields: () => FieldConfig[];
  selectedFieldId?: string;
  
  // Form modification
  onFormMetadataChange: (metadata: Partial<FormMetadata>) => void;
  onAddField: (field: FieldConfig) => void;
  onUpdateField: (id: string, updates: Partial<FieldConfig>) => void;
  onDeleteField: (id: string) => void;
  onSelectField: (id: string) => void;
  onDuplicateField: (id: string) => void;
  onReorderFields: (startIndex: number, endIndex: number) => void;
}

Common Use Cases

Documentation Tab

Auto-generate form documentation and field references

Styling Tab

Customize form themes, colors, and appearance

Security Tab

Review sensitive fields and security settings

Export Tab

Export form data in different formats (JSON, YAML, etc.)

Tab Ordering

Control the order of tabs and customize the builder workflow.

You can control the order in which tabs appear by setting the order property or by arranging them in the tabs array.

// Method 1: Using order property
const customTabs = [
  { ...stylingTab, order: 1 },      // First tab
  { ...builderTab, order: 2 },      // Second tab
  { ...previewTab, order: 3 },      // Third tab
  { ...codeTab, order: 4 },         // Fourth tab
];

<FormBuilder 
  tabs={customTabs}
  defaultTab="styling"  // Start with styling tab
/>

// Method 2: Array order (simpler)
<FormBuilder 
  tabs={[stylingTab, builderTab, previewTab, codeTab]}
  defaultTab="styling"
/>

Ready to Build Forms Visually?

Start using the form builder to create forms with a visual interface. Extend it with custom tabs to match your specific workflow needs.

Open Builder Get Started