BuilderJS

A transactional email template editor you embed in your own app

Receipts, password resets, order confirmations, shipping alerts — transactional email is where your brand shows up most, and where the markup has to survive Outlook, Gmail, and Apple Mail without breaking. BuilderJS is the editor your product embeds to author those templates. It is a framework-agnostic, vanilla-JS drag-drop builder library (~140KB) that mounts in any DOM node, in React, Vue, Svelte, Angular, Next.js, Laravel, or plain HTML. It is the editor, not a platform: BuilderJS does not send mail, run a mailbox, or talk to an SMTP relay. You design the template in the embedded canvas, call getData() to capture lossless JSON, render Outlook-safe HTML through the export pipeline, and hand that markup to whatever sends your transactional traffic — your own ESP, API, or queue. One-time CodeCanyon license, source included, self-hosted, no per-seat fee and no phone-home.

Get BuilderJS — $52 Try the builder

Author the template, not the send

BuilderJS gives your users a visual canvas with 42 element types, 59 controls, and 31 overlays to lay out a receipt, a magic-link email, or a delivery notice without touching a single table cell. It is the design surface only. It does not deliver mail, watch deliverability, manage suppression lists, or hold a sending queue — those belong to your application and your ESP. A useful way to picture the split: the editor is where the template is born; your provider is where it ships. A transactional ESP like Postmark starts at $15/mo for 10,000 emails on its Basic plan, with a free developer tier of 100 emails/month (postmarkapp.com/pricing, as of June 2026) — that is the layer that does the sending. BuilderJS produces the markup that layer transmits. Keeping the two concerns separate means you can swap senders, add a backup relay, or self-host your own SMTP without re-authoring a single template.

Outlook-safe HTML, generated for you

Transactional mail has no margin for a broken layout — a garbled password-reset email is a support ticket and a trust hit. BuilderJS ships a dedicated EmailExportPipeline that converts the modern editor canvas into email-client-safe HTML: flexbox is rewritten to nested tables, SVG icons rasterize to PNG, @media rules drive mobile stacking, MSO conditional comments handle Outlook, and a CSS inliner pushes styles inline so Gmail's clipper and Outlook's renderer behave. The same canvas can also emit standard page HTML when you need a hosted confirmation page or a status page to match the email. The library bundles 30+ templates and 200+ samples that have been Litmus-tested across 22 email clients, so your team starts from layouts already proven to render — then your app sends the result through its own pipeline.

JSON-first, so templates are data your app owns

Every design round-trips through getData() and load() with no loss, so a transactional template is just JSON your backend stores, versions, and diffs like any other record. That makes the common transactional workflows tractable: keep a template per locale, branch a 'v2 receipt' for an A/B test, roll back a bad edit, or let a non-technical teammate tweak copy while the JSON stays the system of record. At render time you merge your variables — order total, reset link, tracking number — into the exported HTML inside your own code, where your data and auth already live. Because the schema is plain JSON and the export step is deterministic, you can regenerate every template's HTML in a batch when you change a footer or a logo, without re-opening the editor by hand.

Embed it once, in the stack you already run

BuilderJS is a DOM-mount bundle — dist/builder.js plus dist/builder.css — not a published npm React or Vue component, so it drops into any framework the same way. Mount it client-side inside the lifecycle hook your framework gives you: useEffect in React, onMounted in Vue, ngAfterViewInit in Angular, onMount in Svelte. In Next.js, load it with a dynamic import using ssr:false under a 'use client' boundary, since the editor runs in the browser only. Persist by calling getData() and POSTing the JSON to your own route. The download includes reference PHP backends for save, upload, and auth against MySQL, SQLite, or S3 — code you copy and own outright, and can port to Node, Go, or Python. Extend it without forking: register custom Elements, Widgets, and Controls through Builder.registerElement, add themes, and localize with 20+ bundled locales including RTL.

Own the editor outright — one license, your servers

BuilderJS is sold under a one-time CodeCanyon license (item 27146783) in Regular ($52) and Extended ($99) tiers. You receive the source, self-host it, and there is no SaaS subscription, no monthly fee, no per-seat charge, no usage metering, and nothing phoning home — your users can author unlimited transactional templates without a counter ticking. The architecture is multi-tenant capable through closure-captured configuration, but your application owns tenant isolation, seats, and billing; BuilderJS does not impose its own. Compared with assembling a stack yourself: MJML is excellent and MIT-licensed for free commercial use (github.com/mjmlio/mjml, as of June 2026), but it is a markup compiler, not a finished visual editor — you would still build the drag-drop UI, the controls, and the round-trip JSON layer around it. BuilderJS gives you that finished editor for email and pages in one supported library; note that author support is time-boxed (roughly 6–12 months). Try the live demo at builder.emotsy.com before you buy.

Frequently asked questions

Does BuilderJS send my transactional emails?

No. BuilderJS is the embedded editor that builds the email template and exports Outlook-safe HTML. It never sends mail, connects to SMTP, or manages a sending queue. You hand the exported HTML to your own ESP, API, or relay — for example a transactional provider like Postmark (postmarkapp.com/pricing, as of June 2026) — and that layer does the delivery. You bring the sending.
How do I merge variables like order totals or reset links?

Design the template with placeholders, then merge your real values into the exported HTML inside your own application code, where your data and auth already live. BuilderJS round-trips the design as lossless JSON via getData() and load(), so you store the template as data, regenerate HTML deterministically, and inject per-recipient variables at render time in your backend — not in the editor.
Will the HTML render correctly in Outlook and Gmail?

That is the point of the EmailExportPipeline: it rewrites flexbox to nested tables, rasterizes SVG to PNG, adds @media mobile stacking, emits MSO conditional comments for Outlook, and inlines CSS. The bundled 30+ templates and 200+ samples were Litmus-tested across 22 email clients. Your own sending and final-mile rendering still depend on your ESP and the recipient's client, so test your specific templates as part of your pipeline.
Can I embed it in React or Next.js?

Yes. BuilderJS is a DOM-mount bundle (dist/builder.js + dist/builder.css), not a published npm component, so it mounts the same in any framework. In React, mount it in useEffect; in Next.js, use a dynamic import with ssr:false under a 'use client' boundary because the editor is client-side only. Persist by calling getData() and POSTing the JSON to your own route.
Is there a subscription or per-email cost for BuilderJS?

No. BuilderJS is a one-time CodeCanyon purchase (item 27146783) in Regular ($52) and Extended ($99) tiers. You own the source, self-host it, and there is no monthly fee, no per-seat charge, no usage metering, and no phone-home. Any per-email cost in your stack comes from the ESP you choose to send with, not from the editor. Author support is time-boxed (roughly 6–12 months).