MIT Licensed & Free Forever

Build beautiful forms
without writing
a single tag

CanvasForm is the open source Bootstrap form builder that lets you drag, configure and export production-ready forms with validation, theming, and full accessibility baked in.

  Trusted by 12,000+ developers · No account required

CanvasForm drag-and-drop interface showing a form builder with inputs, dropdowns and checkboxes
Zero dependencies — pure Bootstrap 5
12k+
GitHub Stars
40+
Field Types
100%
MIT Open Source
WCAG AA
Accessibility
Used by teams at
Vercel Netlify Supabase PlanetScale Railway Render Fly.io

Everything you need to ship forms fast

From simple contact forms to complex multi-step wizards, CanvasForm has the components and controls to handle it all.

Drag and Drop Builder

Arrange 40+ field types with a visual canvas. Reorder, resize, and group fields without touching code.

Built-in Validation

Required fields, regex patterns, custom error messages, and async validation rules. Works with Bootstrap's native states.

Theme Engine

Override any CSS custom property to match your brand in seconds. Light, dark, and system-adaptive presets included.

Accessible by Default

ARIA labels, keyboard navigation, focus management, and screen reader announcements — all generated for you.

Clean HTML Export

Export semantic, well-indented HTML or a JSON schema. Drop it into any Bootstrap 5 project with zero cleanup.

Plugin API

Extend CanvasForm with custom field types, validators, and export adapters. Published packages on npm.

From idea to form in three steps

No account. No backend. No build step required to get started.

1
Open the Builder

Launch the visual editor in your browser. No install, no login. Just open and start building.

2
Design your form

Drag fields onto the canvas, configure labels, validation rules, and placeholder text visually.

3
Export and ship

Copy the clean HTML or download the JSON schema. Drop it into your project and you're live.

Clean output you can actually use

CanvasForm generates semantic, accessible HTML that follows Bootstrap 5 conventions. No wrapper soup, no inline styles.

  • Semantic fieldsets and legends
  • ARIA-linked error messages
  • Bootstrap 5 form-control classes
  • JSON schema for headless projects
  • Minified or pretty-printed output
Read the docs
contact-form.html
<form id="contact-form" novalidate>
  <fieldset class="mb-4">
    <legend class="visually-hidden">
      Contact details
    </legend>

    <div class="mb-3">
      <label for="cf-name">Full name</label>
      <input
        type="text"
        id="cf-name"
        class="form-control"
        required
        aria-describedby="cf-name-err"
      />
      <div
        id="cf-name-err"
        class="invalid-feedback"
      >
        Please enter your name.
      </div>
    </div>
  </fieldset>
</form>
Styled Bootstrap form preview with validation states
12k+
GitHub Stars
2.4M
npm Downloads / mo
340+
Contributors
99.9%
Uptime SLA

Loved by developers worldwide

CanvasForm is used in production by indie developers, agency teams, and enterprise engineering groups.

"We replaced three form libraries with CanvasForm. The export quality is exactly what Bootstrap projects expect, and the accessibility output is better than anything we had hand-rolled."

MK
Mia Kim
Frontend Lead, Stackify

"Finally a form tool that treats accessibility as a first-class feature. Our auditors stopped flagging form-related issues entirely after we switched to CanvasForm."

DL
David Laurent
Engineering Manager, Formio Labs

"I built and shipped a multi-step onboarding wizard in an afternoon. The JSON schema export made it trivial to integrate with our backend API."

PA
Priya Acharya
Indie Developer

Free, forever. Open to everyone.

CanvasForm is MIT licensed. Fork it, extend it, and contribute back. The roadmap is public and driven by community votes.

MIT License
340+ Contributors
npm Package
Full Docs