Full source code included · v2.0

Drag-drop email & page builder
you ship in your product.

JSON-first · full source code included · no framework lock-in. Drop one script tag, mount a builder, and let your users design their own pages — saved, exported, and shipped.

Try the builder Get BuilderJS — $52 Browse gallery
  • ~1,000 teams shipping
  • 4.4 CodeCanyon rating
  • 62 themes & samples
How it works

Three steps from script tag to shipped page.

  1. Mount the builder

    Add one script tag and a container div. The builder boots inside any framework — pure HTML, React, Vue, or PHP.

    new Builder({ container: '#editor' });

  2. Let users design

    Drag elements onto the canvas, edit copy in place, swap themes, upload assets. All bidirectional with JSON state.

    builder.load(THEME_JSON, THEME_TEMPLATES, THEME_CONFIG_DATA, MEDIA_URL);

  3. Save & export

    Get JSON for your database, rendered HTML for your CDN, or a full theme bundle ZIP for portability.

    const data = builder.getData(); const html = builder.getHtml();
Live in your browser

Drop one script tag, mount the editor.

Five lines of HTML + a single Builder constructor. No build step, no framework. The screenshot on the right is exactly what the snippet on the left produces.

snippet.php (excerpt — view full file →) 
<link rel="stylesheet" href="/dist/builder.css">
<script src="/dist/builder.js"></script>

<div id="WidgetsContainer"></div>
<div id="MainContainer"></div>
<div id="SettingsContainer"></div>

<script>
  const builder = new Builder({
    mainContainer:     '#MainContainer',
    widgetsContainer:  '#WidgetsContainer',
    settingsContainer: '#SettingsContainer',
  });
  builder.load(THEME_JSON, THEME_TEMPLATES, THEME_CONFIG_DATA, MEDIA_URL);
</script>
View full snippet.php
Open the full builder

What ships in the package

  • 35 working examples basic · backend · cookbook
  • 62 themes & samples standard + extended
  • 8 cookbook recipes copy-paste chrome variants
  • 6 backend recipes PHP · MySQL · S3 · Auth
  • v2.0 engine version latest, May 2026
Examples by category

Show off, then read more.

Every category opens with three featured walkthroughs. Click "View all" to jump straight into that tier's full listing on the examples hub — every row that ships lands here automatically.

Browse all 36 examples

Basic Basic 5 examples

Buyer's first 5 minutes. Drop-in integration, theme registration, dark mode, multi-instance.

View all 5 Basic examples

Backend Backend 4 examples

Wire any backend in ~20 lines. PDO + SQLite fallback so it boots zero-config.

View all 4 Backend examples

Cookbook Cookbook 8 examples

8 ready-to-paste chrome shapes. Each entry is 4 self-contained files — copy the dir verbatim into your project.

View all 8 Cookbook examples

Events Events 5 examples

React to engine state changes — document saved, element added, mode flipped, region focused.

View all 5 Events examples

API API 5 examples

Programmatic operations — getHtml, getData, setMode, selectElement, clearElements.

View all 5 API examples

Extensions Extensions 5 examples

Extend the engine — custom widgets, custom elements, custom controls, locale packs.

View all 5 Extensions examples

Flows Flows 4 examples

End-to-end production patterns — bundle export, bundle import, history shortcuts.

View all 4 Flows examples
Ship the HTML

Export anywhere — four ways out of the editor.

One engine read — builder.getHtml() — feeds four backend stubs you own. Inline CSS for the inbox, single HTML for speed, ZIP for portability, source bundle for migration. Every one is a runnable example.

  • Recommended

    Inline CSS

    Standalone HTML with every <style> rule baked into inline style="" — the most portable output. Lands intact in email (Gmail, Outlook, Yahoo) and any client that strips <head> styles.

    POST /backend/export-inline.php Read the walkthrough

  • Single HTML

    One rendered file with absolute asset URLs. Fastest path — use it when the consumer can already reach the editor's media URL.

    POST /backend/export-html.php See the three modes

  • Portable ZIP

    index.html plus only the asset files the HTML references, at relative paths. Unzip, open, it renders — host it from any domain.

    POST /backend/export-zip.php See the three modes

  • Source bundle

    The ZIP plus the sample's source (index.json + thumbnail) — re-importable into another tenant's theme registry for migration or hand-off.

    POST /backend/export-bundle.php See the three modes

All four are one click away in the live builder — open the Export ▾ menu (Inline CSS sits at the top, the recommended default).

Try it in the builder
Use cases

Built for products buyers ship today.

BuilderJS slots into 4 common product surfaces. Pick the one that matches yours and start from a working recipe.

In production

The email builder inside AcelleMail is BuilderJS.

AcelleMail is a well-known self-hosted email marketing & automation platform, sold as a one-time license since 2016 and run by businesses on their own servers.

When its users design a campaign or a template, they do it in the drag-and-drop editor shown here — and that editor is BuilderJS: the same engine, JSON format and export pipeline that ship in this package, mounted inside AcelleMail's Laravel app through the public API the docs describe.

  • Campaign & template editor
  • Embedded in a Laravel app
  • Self-hosted · one-time license
Visit AcelleMail Try it in AcelleMail's live demo
AcelleMail's campaign editor, built on BuilderJS: a newsletter on the canvas with the drag-and-drop widget palette open
AcelleMail campaign editor — powered by BuilderJS.
API at a glance

The methods + events you'll reach for first.

Six methods cover > 90 % of typical integration. Four events feed every reactive UI you'll wire on top. Click any row to jump into the doc page.

Methods

Events

  • document:changed Fires after every canvas mutation. Throttle if listening for autosave. 
    builder.events.on('document:changed', () => save(builder.getData()));
  • document:saved Fires after Builder.save() resolves. Use to clear dirty-state indicators. 
    builder.events.on('document:saved', () => dirtyDot.classList.remove('on'));
  • mode:changed Fires when design ↔ preview flips. Driven by setMode() OR shortcut. 
    builder.events.on('mode:changed', m => previewBtn.classList.toggle('on', m.to === 'preview'));
  • element:added / element:removed Fires when blocks enter or leave the canvas. Reflect into your own outline panel. 
    builder.events.on('element:added',   ev => outline.add(ev));
builder.events.on('element:removed', ev => outline.remove(ev));

Full reference in /docs/ — including elements, controls, overlays, and the I18n locale-pack contract.

Gallery

Start from a real theme.

65 production-ready email and page templates. Click any thumbnail to open it in the builder.

Browse all themes
Made for developers

No magic. No lock-in.

  • Pure HTML / JS

    Drop one script tag. No framework lock-in, no build step, no `node_modules` to vendor. Works in React, Vue, Laravel, Rails, plain PHP.

    Open the builder

  • Extend everything

    Subclass `Element`, `Control`, or `Widget` to add custom blocks. Every primitive is documented in the design system and matched in code.

    See the design system

  • Full source code included

    PSR-12 sample backend, full developer docs in-package, MIT-style demo. Read the source before you buy — no surprises after.

    Read the docs
Questions

Frequently asked questions.

Pre-purchase answers covering license, framework support, bundle size, and the rest.

  • Is BuilderJS open source?

    BuilderJS is a commercial product with full source code included — not open source in the free-to-redistribute sense. You receive the complete engine source (src/) on purchase, with lifetime updates and 12 months support. The demo (demo/) and example code ship MIT-style.

  • Does it work with React, Vue, or Svelte?

    Yes. BuilderJS mounts inside any DOM node. The container can be any framework's render target. See examples/cookbook/ for 8 chrome variants you can drop into any framework.

  • Can I use it commercially?

    Yes. The license permits commercial use in your products with no per-seat or per-end-user fees. See LICENSE.md in the buyer-package.

  • What backend does it require?

    None for read-only or client-side-only use. For save/load, any HTTP backend works — examples/backend/ ships PHP + SQLite/MySQL/S3 references; port to Node/Go/Python in ~20 LOC.

  • How is BuilderJS different from TinyMCE or GrapesJS?

    JSON-first round-trip + a real theme system + production-grade backend recipes. See the comparison table earlier on this page.

  • What's the bundle size?

    Engine: ~140 KB minified + gzipped. Plus the theme bundle (~5–30 KB per theme) and demo CSS (~80 KB) if you use the showcase chrome. All three lazy-loadable.

  • Does it support i18n?

    Yes. Built-in I18n.t() API; ship custom locale packs. The full i18n integration example lives at examples/extensions/4-i18n-locale-pack/ (Phase C ships the full walkthrough; pre-Phase-C the page renders a placeholder).

  • Can my users save their own designs?

    Yes. builder.getData() returns serializable JSON; builder.load(data, ...) restores the design. Your backend stores it. See examples/backend/1-mysql/.

  • What chrome variants come with BuilderJS?

    8 ready-to-paste cookbook variants — minimal, compact 2-col, compact 3-col, rich 3-col with header, sidebar-only, canvas-only, mobile, and card. Each is a 4-file directory you copy verbatim. See examples/cookbook/.

  • Is there a free trial?

    The full live builder runs at /builder.php — no signup, no payment, all features. Try it before you buy.