Build Dynamic Forms with Drag & Drop
Enterprise React form builder with responsive previews, comprehensive validation, and TypeScript support. Built with Material-UI for modern, accessible forms.
Everything you need to build forms
Built with modern technologies for the best developer and user experience.
Drag & Drop Interface
Intuitive form building with @dnd-kit. Drag fields, reorder, and customize with ease.
Responsive Preview
Preview your forms on desktop, tablet, and mobile devices in real-time.
Comprehensive Validation
Built-in validators and custom validation support for all field types.
Material-UI Components
Modern, accessible UI components following Material Design principles.
TypeScript Support
Full TypeScript definitions with IntelliSense for better developer experience.
Flexible API
Easy integration and customization with a powerful, well-documented API.
Quick Start
Get started with FormMorf in just 3 simple steps
Install
Add FormMorf to your project
npm install @formmorf/builder
# or
pnpm add @formmorf/builder
# or
yarn add @formmorf/builderImport
Import the components
import { FormBuilder } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';Use
Start building forms
function App() {
const handleSave = (schema) => {
console.log('Form schema:', schema);
};
return (
<FormBuilder
onSave={handleSave}
initialSchema={{
title: 'My Form',
description: 'Build your form here',
fields: []
}}
/>
);
}See it in action
Try the live demo to experience FormMorf's powerful features
Ready to build amazing forms?
Get started with FormMorf today and create beautiful, functional forms in minutes.