v1.0.0 is now available

Build Powerful Forms Without The Bloat

A lightweight, dependency-free JavaScript library for building drag-and-drop forms. Generates clean JSON schema ready for your backend.

Start Building
Drop next item here

Everything you need to build forms

Designed for developer experience. Minimal configuration, maximum flexibility.

Custom Layouts

Position the toolbox on the left or right side of the canvas. Customize the entire form structure to fit your application's design system.

Clean JSON Output

The builder exports a standardized JSON schema representing your form, ready to be stored in your database.

Component Control

Enable or disable specific components. Only show users what they need, keeping the interface clean.

Custom SVG Icons

Don't like the default icons? Pass your own SVG strings or HTML to the configuration object for a fully branded experience.

Quick Start

Get up and running in seconds. Choose your preferred installation method below.

1. Install

Use NPM or include the script tag directly.

2. Initialize

Target any div ID to inject the builder.

3. Save Data

Call `builder.getJson()` to retrieve the form schema.

Installation
NPMScript Tag
# Install via terminal
$ npm install @heyitsmi/form-builder

# Usage in your app
import { FormBuilder } from '@heyitsmi/form-builder';
import '@heyitsmi/form-builder/form-builder.css';

const builder = new FormBuilder('#app', {
  layout: 'right'
});
<!-- Include in HTML -->
<link rel="stylesheet" href="https://unpkg.com/@heyitsmi/form-builder/form-builder.css">
<script src="https://unpkg.com/@heyitsmi/form-builder/form-builder.js"></script>

// Usage
<script>
  const builder = new FormBuilder('#app');
</script>

Who is this for?

SaaS Platforms

Allow your users to build custom surveys, feedback forms, or application forms directly within your product dashboard.

Agencies & CMS

Provide a flexible page building experience for your clients without needing to install heavy plugins like Elementor.

Internal Tools

Quickly spin up admin panels where non-technical staff need to create data collection forms dynamically.

Frequently Asked Questions

Is this compatible with React/Vue?

Yes! Since it relies on a simple DOM container (div), you can mount it inside a React `useEffect` or Vue `onMounted` hook easily.

Can I add custom input types?

The library architecture is modular. You can extend the `componentFactory` method in the source code to register new component types.

Does it handle form submission?

No. This is a Form Builder, not a form renderer. It outputs the JSON schema. You would need a separate parser to render the form for end-users.

Ready to build better forms?

Open source, MIT Licensed, and free to use forever.

Get Started Now