Quick Start

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

function App() {
  const handleSave = (schema) => {
    console.log('Form schema:', schema);
    // Save to your backend or state management
  };

  return (
    <FormBuilder
      onSave={handleSave}
      initialSchema={{
        title: 'Contact Form',
        description: 'Get in touch with us',
        fields: []
      }}
    />
  );
}

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

function ContactPage({ formSchema }) {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data);
    // Process form submission
  };

  return (
    <FormViewer
      schema={formSchema}
      onSubmit={handleSubmit}
    />
  );
}

import { useState } from 'react';
import { FormBuilder, FormViewer, FormSchema } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';

function FormManager() {
  const [schema, setSchema] = useState<FormSchema>({
    title: 'My Form',
    description: '',
    fields: []
  });
  const [mode, setMode] = useState<'build' | 'preview'>('build');

  const handleSave = (newSchema: FormSchema) => {
    setSchema(newSchema);
    console.log('Schema saved:', newSchema);
  };

  const handleSubmit = (data: Record<string, any>) => {
    console.log('Form data:', data);
    alert('Form submitted! Check console for data.');
  };

  return (
    <div>
      <div className="mb-4">
        <button
          onClick={() => setMode('build')}
          className={mode === 'build' ? 'font-bold' : ''}
        >
          Build Mode
        </button>
        <button
          onClick={() => setMode('preview')}
          className={mode === 'preview' ? 'font-bold' : ''}
        >
          Preview Mode
        </button>
      </div>

      {mode === 'build' ? (
        <FormBuilder
          initialSchema={schema}
          onSave={handleSave}
        />
      ) : (
        <FormViewer
          schema={schema}
          onSubmit={handleSubmit}
        />
      )}
    </div>
  );
}

export default FormManager;

const initialSchema = {
  title: 'Contact Form',
  description: 'We would love to hear from you',
  fields: [
    {
      id: '1',
      type: 'text',
      label: 'Full Name',
      name: 'fullName',
      required: true,
      placeholder: 'Enter your name'
    },
    {
      id: '2',
      type: 'email',
      label: 'Email Address',
      name: 'email',
      required: true,
      placeholder: 'you@example.com'
    },
    {
      id: '3',
      type: 'textarea',
      label: 'Message',
      name: 'message',
      required: true,
      placeholder: 'Your message here...',
      rows: 5
    }
  ]
};

<FormBuilder initialSchema={initialSchema} onSave={handleSave} />

'use client';

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

export default function BuilderPage() {
  return <FormBuilder {...props} />;
}