JBJB FormOpen-source form tools
View sourceStart building
Open source · MIT licensed

Build · Export · Embed

Build forms visually. Ship them anywhere.

Compose accessible JB components, configure every detail, then export a portable form document that your own site can render with <jb-form-builder>.

No account required · Saved locally · MIT licensed

JBUntitled formSaved
Import JSONExport JSONSave
CURRENT DRAFT

Untitled form

⋮⋮
Full nameText input
⋮⋮
CountrySelect
⋮⋮
Email addressText input · required
Drop a component here
form.json{ "type": "jb-input", "name": "email", "required": true }
ValidationEmail is required
فرم ثبت‌نام
Visual builderCompose, reorder, and configure
Portable JSONVersioned and framework-neutral
Accessible by defaultBuilt from JB components
Render anywhereWeb component or React

A complete component library

Everything a form needs.

Twenty-eight purpose-built fields and containers cover content, identity, dates, choices, uploads, payments, and advanced structure.

Text
Image
Voice
Link
Divider / spacer
Section heading
Text input
Number input
Range input
Mobile input
Password input
Payment input
National ID
Date input
Time input
PIN input
Textarea
Select
Listbox
Checkbox
Switch
File input
Image input
Button
Tabs
Conditional container
Wizard
Repeatable group

Designed for real forms

From a blank canvas to production-ready JSON.

The builder keeps composition approachable without hiding validation, localization, or structural control.

1

Drag, drop, and reorder

Add purpose-built fields, organize sections, and move items into the right order with instant canvas feedback.

Full nameEmail addressDrop here
2

Precise properties and validation

Tune labels, placeholders, initial values, required state, constraints, and error messages for each field.

Enter a valid email address
3

Conditional containers that adapt

Reveal only the questions that matter by matching form values with declarative conditions.

Show National ID if

CountryisIran

4

Wizards, tabs, and repeatable groups

Break long forms into steps or tabs and collect lists of nested records without leaving the visual builder.

1 · Account2 · Profile3 · Review

The open-source workflow

Build here. Own the result.

JB Form produces a portable document instead of locking your form inside a hosted platform.

  1. 1Build

    Compose fields on the visual canvas.

  2. 2Configure

    Set behavior, validation, and locales.

  3. 3Preview

    Test the responsive rendered form.

  4. 4Export

    Download JSON and use it in your app.

MIT · OPEN SOURCE

One import. Your JSON. Your website.

The open-source renderer is route- and storage-agnostic. Import <jb-form-builder>, provide the exported form document, and the same responsive form runs inside your own application.

  • Framework-independent custom element
  • Optional typed React wrapper
  • Lazy-loads only the JB controls your form uses
Build a formBrowse source
import "jb-form-builder";
import { loadDependencies } from
  "jb-form-builder/dependency-loader";

const form = document.querySelector(
  "jb-form-builder"
);
form.loadDependencies = loadDependencies;
form.formDocument = exportedJson;
<jb-form-builder>The exported form, rendered on your siteFramework-independent · route-agnostic

Localized and responsive

English, Persian, and every breakpoint.

Author localized content, switch between LTR and RTL, and preview the exact responsive form before you export.

EnglishLTR
فارسیRTL
Live previewResponsive
Under construction

Coming after the core workflow

A dedicated Theme Designer is on the way.

The Designer route already preserves form identity, but visual theme editing is intentionally still in development. The builder, preview, JSON export, and embeddable renderer are available now.

See the current Designer status
Theme DesignerVisual theme editing is in progress

Your workspace

Your forms stay close.

Continue a local draft, preview a saved form, or open it in the builder.

Start building

Saved forms

0
Loading saved forms…

No lock-in

Build once. Render wherever your users are.

Start in the visual builder, keep the exported JSON, and ship the form through your own stack.

Start buildingSee embed code