React Form Builder

Develop your dynamic forms builder.Develop your own dynamic forms builder, websites builder, dashboards builder. Dynamic UI form JSON. Drag and drop react builder. Generate UI from JSON schema.

Get startedWatch Intro
export const formBuilder = createBuilder({
  entities: [
    createEntity({
      name: "textField",
      validate: (value) => z.string().parse(value),
    }),
  ],
});

Introduction

Overview

Builder is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also generate dynamic UI from JSON schema, drag and drop React UI builders, and any other builders you envision.

Some key characteristics:

  • Headless: Bring your own components and design the user experience as you want.
  • Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end.
  • Typesafe: Ensures full type safety by default in every aspect.
  • Multi-platform: Runs on web (React), mobile (React Native), servers, serverless, and workers.
  • Framework agnostic: Features a core that is independent of any front-end framework.
  • Zero dependencies: Offers a streamlined, lightweight library.
  • Unopinionated: Affords you the freedom to build anything you imagine.
  • Progressively Enhanceable: Embraces web standards.

Currently, Builder offers support for React and React Native, with plans to extend compatibility to other front-end frameworks in the future.

Get Started

Learn how to get started with Builder through our guides.

Installation

Step-by-step guides for setting up and using the library.

React Form Builder Guide

Explore our guides to spark your inspiration.

Core concepts

Learn the core concepts to better understand the library.

API reference

Dive into the API Reference for detailed guidance.

Demo of a React Form Builder with Drag and Drop

Here is a live demo of a simple React Form Builder Drag and Drop interface created using shadcn components for UI and dnd-kit.

In the Preview Form -> Schema section you can get an idea of how to generate React forms dynamically from JSON, making it easy to create and customize forms for your applications.

View on Github

You should know!

You are free to build your own form builder using any components and mechanics you want.

Getting Involved

You're welcome to join our community, engage in discussions, open issues, contribute, and make new friends!

Submit an issue

If you encounter any issues or bugs, we encourage you to report them on our GitHub Issues page.

Before submitting a new issue, please check if there is a solution or question posted on our GitHub Issues page already.

When opening a new issue, please be as explicit as possible, preferrably by following our Bug Report Template.

Join the community

For sharing ideas and engaging in discussions, our GitHub Discussions forum is the perfect place.

We are open to considering any ideas that provide real value to other developers and fall within the scope of the project.

We will appreciate any type of contributions, including pull requests, documentation improvements, videos, blog posts, and so on.

Next
Installation