@saurabhch/formforge-react

A drag-and-drop form builder and renderer for React. Admins design forms in your admin panel; their users fill them in; you get structured JSON back.

npm install @saurabhch/formforge-react @saurabhch/formforge-core

import { FormForgeProvider, FormBuilder, FormRenderer } from '@saurabhch/formforge-react';
import '@saurabhch/formforge-react/styles.css';

// Admin side
<FormForgeProvider>
  <FormBuilder
    schema={record.schema}
    publishedSchema={record.publishedSchema}   // enables the change summary
    onSave={(schema) => api.saveDraft(record.id, schema)}
    onPublish={() => api.publish(record.id)}
  />
</FormForgeProvider>

// User side
<FormRenderer
  schema={record.publishedSchema}
  onSubmit={(values, { payload }) => api.submit(record.id, payload)}
/>

Ships with "use client", so it works in the Next.js App Router. Every browser API is behind an effect or a guard, so it survives server rendering.

What it does

• Builder — drag from the palette, reorder, move fields between steps, undo/redo, autosave, device preview (desktop/tablet/mobile), preview modal, pre-publish checks
• 18 field types plus your own, with per-field width, validation rules and conditional show/hide driven by other answers
• Multi-step forms with progress, per-step validation and resumable drafts
• Design panel — presets, colour picker with eyedropper, webfonts, type scale, label placement, field/container styles, button shape. Saved with the form as CSS variables, so it renders the same everywhere
• Responsive by container query — fields reflow to the form's width, not the window's, so a form in a sidebar or modal collapses correctly

Four extension points

| You want to change | How | |---|---| | The backend | Pass any FormStore implementation (see @saurabhch/formforge-adapters) | | Field types | <FormForgeProvider fields={[myField]}> — appears in palette, renderer, validation and logic | | The look | slots={{ Input, Button, Select }} for your design system, or --ff-* tokens | | The layout entirely | useFormRuntime and useFormBuilder hold all behaviour and render nothing |

Submission JSON

Every submit produces one document — flat data for your database, labelled fields for a notification email, plus form identity and meta. Available as ctx.payload in onSubmit, or rendered for the user with showJson.

MIT © Maysha Soft