Open Source Drag and Drop Form Builders for Developers

If you need an open source drag and drop form builder, first decide what you want: a library you embed in your own app so your users can build forms, or a self-hosted app that replaces Typeform or Google Forms. For embedding, Form.io's builder (@formio/js, MIT) is the most complete fully open source option, with formBuilder (jQuery, MIT) as a lighter one. For self-hosting, OpnForm, HeyForm and Formbricks are active AGPL-3.0 projects. Watch the licenses: several "open source form builders" give away only the form renderer and charge for the drag-and-drop designer.

Open source form builders compared

GitHub stars, licenses and activity checked in each repository in October 2026.

Project	Type	Drag-and-drop builder license	Stack	Stars	Best for
Form.io (@formio/js)	Embeddable library	MIT	Vanilla JS, React/Angular wrappers	~2k	Letting your users design forms inside your app
formBuilder	Embeddable library	MIT	jQuery	~2.7k	Simple builders in existing or server-rendered apps
Puck	Embeddable visual editor	MIT	React	~13k	Drag-and-drop editors built from your own React components
OpnForm	Self-hosted app	AGPL-3.0 (enterprise folder separate)	Laravel, Nuxt	~3.8k	A self-hosted Typeform/Tally replacement
HeyForm	Self-hosted app	AGPL-3.0	TypeScript	~9k	Conversational, one-question-at-a-time forms
Formbricks	Self-hosted app	AGPL-3.0 (enterprise folder separate)	Next.js	~13k	Surveys, in-app feedback, NPS
LimeSurvey	Self-hosted app	GPL-2.0 or later	PHP	~3.8k	Long research surveys
SurveyJS	Library	Form Library MIT; Survey Creator is commercial	JS, React/Angular/Vue	—	Teams willing to pay for a polished designer
FormEngine	Library	Core MIT; drag-and-drop designer is commercial	React	—	Rendering JSON forms in React

Two projects you'll see in older lists: OhMyForm's repository is archived, and Formily's designer (alibaba/designable) hasn't had a commit since April 2025. Typebot, a chat-style form builder, is source-available under the Functional Source License (FSL-1.1-Apache-2.0, where each release becomes Apache 2.0 two years later), not an OSI open source license.

The open-core catch: renderer free, designer paid

Form builders have two parts: the designer (the drag-and-drop canvas that outputs a JSON schema) and the renderer (which turns that schema into a working form). The renderer is the easy part, and many vendors open source only that.

• SurveyJS: the Form Library is MIT, but Survey Creator, the drag-and-drop part, needs a paid per-developer license for use in your application (SurveyJS licensing).
• FormEngine: FormEngine Core is MIT; the drag-and-drop React form builder on top is sold under a commercial license (per its README).
• Form.io: the builder in @formio/js is MIT. Form.io's paid product is the hosted and enterprise platform (the open source API server, formio/formio, is OSL-3.0).

If you search for a "react form builder drag and drop open-source", check the license of the designer package specifically, not the repo's headline badge.

Embed a drag-and-drop form builder with Form.io

Form.io's builder produces a JSON form definition. You save that JSON, then render it anywhere with the same library. This is the pattern for an admin panel where customers build their own intake forms.

Plain HTML

From the formio.js README:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css" />
<script src="https://cdn.form.io/js/formio.full.min.js"></script>

<div id="builder"></div>
<script>
  Formio.builder(document.getElementById('builder'), {}, {}).then((builder) => {
    // fires with the full form definition whenever a component is added, edited or removed
    builder.on('change', (form) => console.log(JSON.stringify(form)));
  });
</script>

The default templates use Bootstrap classes, so include Bootstrap CSS or the builder will look broken. Pin versions in production instead of loading the latest from the CDN.

React

Install the React wrapper and core library (formio/react):

npm install @formio/react @formio/js

Then pair the builder with the renderer:

import { useRef, useState } from 'react';
import { FormBuilder, Form } from '@formio/react';

const initialForm = { display: 'form', components: [] };

export default function FormDesigner() {
  const latest = useRef(initialForm); // updated on every builder change
  const [preview, setPreview] = useState(null);

  return (
    <>
      <FormBuilder form={initialForm} onChange={(form) => { latest.current = form; }} />
      <button onClick={() => setPreview(structuredClone(latest.current))}>Preview</button>
      {preview && (
        <Form src={preview} onSubmit={(submission) => console.log(submission.data)} />
      )}
    </>
  );
}

Keeping the builder's form prop stable avoids re-initializing the builder on every edit. Store latest.current in your database (it's plain JSON) and render it later with <Form src={schema} />. Submissions go to your onSubmit handler, so you don't need the Form.io server unless you want its API.

jQuery: formBuilder

formBuilder is a single call (formbuilder.online docs):

jQuery(($) => {
  const fb = $('#fb-editor').formBuilder();
  $('#save').on('click', () => {
    const json = fb.actions.getData('json', true); // the form definition
    console.log(json);
  });
});

formBuilder loads asynchronously, so call actions from an event handler (as above) or after its promise resolves, not right after initialization.

Its companion formRender plugin renders the saved definition. It suits server-rendered apps (PHP, Rails, Django templates) that already load jQuery.

Self-host an open source form builder

If you want a Typeform-style app you own, rather than a component:

• OpnForm: a no-code form builder with a Laravel API and Nuxt front end, deployed with Docker (deployment docs). Note the limit: as of October 2026, a free self-hosted instance allows 2 users in total; more users and enterprise features need a self-hosted Enterprise license. DevHunt listing: OpnForm.
• HeyForm: conversational forms (surveys, quizzes, polls) with conditional logic, webhooks and Zapier/Make integrations, plus an embed library. Node.js server, AGPL-3.0, with a self-hosting guide.
• Formbricks: survey-focused (link surveys, in-app and website surveys). The repo says you can self-host with Docker without a subscription; the cloud Hobby plan is free up to 250 responses a month as of October 2026 (Formbricks pricing). DevHunt listing: Formbricks.

What AGPL-3.0 means in practice: you can run these internally or as a service, but if you modify the code and let users interact with it over a network, you must offer them your modified source. Their enterprise folders (SSO, advanced roles) are under separate commercial licenses.

When to build your own instead

For a fixed set of fields that only your team edits, a drag-and-drop builder is overkill: write the form in code with React Hook Form or a JSON-schema renderer such as react-jsonschema-form (Apache-2.0). If you need a custom builder that matches your design system exactly, Puck or dnd-kit (MIT) plus a JSON schema gives you full control, at the cost of building field settings, validation and conditional logic yourself. That last part is where most homemade builders stall.

Hosted alternatives

If you don't need to self-host or embed, a hosted builder is less work. Tally, Google Forms, Jotform and others are compared in free web form builders, and there's a list of free Typeform alternatives. More open source tools launched by their makers are on DevHunt's open source page.

FAQ

What is the best open source drag and drop form builder?

To embed in your own app, Form.io's @formio/js: its builder is MIT-licensed, outputs JSON, and has React and Angular wrappers. To self-host a complete form app, OpnForm or HeyForm. For surveys and product feedback, Formbricks.

Is there a free React drag and drop form builder?

Yes. @formio/react wraps Form.io's MIT builder in a FormBuilder component, and Puck (MIT) lets you build a drag-and-drop editor from your own React components. SurveyJS Creator and FormEngine's designer have React versions but need commercial licenses.

Can I self-host an open source form builder for free?

Yes. OpnForm, HeyForm, Formbricks and LimeSurvey all publish Docker or server setup guides, and the community editions have no license fee. Check user limits (OpnForm's free self-hosted edition allows 2 users), and plan for the server, updates, backups and spam protection yourself.

Is SurveyJS free?

The SurveyJS Form Library, which renders forms from JSON, is free under MIT. Survey Creator, the drag-and-drop designer, requires a paid developer license to use in your application.

Where can I find drag and drop form builder projects on GitHub?

Search GitHub topics such as form-builder and formbuilder, then check each repo's license file, last commit date and whether it's archived. Many popular-looking repos are unmaintained or license only the renderer.