Skip to main content

Fjorm

Modular drag-and-drop form builder for React — bring your own components.

Fjorm lets you build visual, drag-and-drop form editors in React. Drag components from a toolbox onto a canvas, configure each field's properties in a sidebar editor, preview the live form, and serialize the result as JSON. The rendering layer is completely pluggable — use raw HTML inputs, Ant Design, MUI, Mantine, or your own design system.

Features​

  • Visual form builder — drag components from a palette onto a canvas
  • Inline property editing — edit labels, placeholders, required flags, select options
  • Nested layouts — grid/column containers with their own drop zones for complex form layouts
  • Preview mode — toggle between builder and rendered-form views
  • UI-framework agnostic — register your own display components per field type
  • JSON serialization — export/import form structure as portable JSON (supports nested trees)
  • TypeScript-first — full type definitions for all APIs
  • Lightweight — peer-deps only: React 19+ and react-dom 19+; runtime deps: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, uuid

Install​

npm install fjorm react react-dom

Quick Start​

import { Config, FormBuilder, formComponents } from 'fjorm'
import 'fjorm/dist/index.css'

export default function App() {
  const config = new Config()
  config.addComponents(formComponents)

  return (
    <div style={{ height: '100vh' }}>
      <FormBuilder config={config} />
    </div>
  )
}

This gives you a working drag-and-drop form builder with five built-in field types: Header, Paragraph, TextInput, SelectInput, and Container (for grid/column layouts).

Project Structure​

fjorm/
├── src/                  # library source
│   ├── index.ts          # public API barrel
│   ├── types.ts          # TypeScript definitions
│   ├── styles.css        # builder UI styles
│   ├── utils/            # Config class, hooks
│   └── components/       # atoms, molecules, organisms
├── website/              # Docusaurus docs site
├── demo/                 # Playground SPA (demo + all examples)
├── examples/             # Standalone reference projects
│   ├── antd/             # Ant Design v6
│   ├── mui/              # Material UI v9
│   └── mantine/          # Mantine v9
└── .github/workflows/    # CI/CD