Embed BuilderJS in your framework
BuilderJS is a framework-agnostic, vanilla-JavaScript drag-and-drop editor (~140KB) that mounts into any DOM node — no framework lock-in, no published npm React/Vue component to wrestle with. You ship two assets, `dist/builder.js` and `dist/builder.css`, point the builder at an empty element, and your users get a visual editor that produces BOTH web/landing-page HTML and Outlook-safe email HTML from the same canvas. Because it's just a DOM-mount bundle, the integration pattern is the same everywhere: create a container, mount the builder client-side after the element exists, and read the document back as JSON. In React that's `useEffect`; in Vue, `onMounted`; in Angular, `ngAfterViewInit`; in Svelte, `onMount`; in Next.js, a dynamic import with `ssr:false` inside a `'use client'` component. Persistence is yours to own: call `getData()` for a lossless JSON snapshot, POST it to your route or backend, and `load()` it back later. This hub links every framework guide plus the reference backends you copy and own. BuilderJS is the editor you embed — your app keeps full control of routing, auth, tenancy and storage.
One mount pattern, every framework
BuilderJS is a DOM-mount bundle, not a published npm React or Vue component — and that's what makes it portable. You add the script and stylesheet, then in your framework's post-render lifecycle you instantiate the builder against a container element that already exists in the DOM. The mechanics never change across stacks: wait for the node, mount, and capture the instance so you can call methods on it later. React calls this from `useEffect`, Vue from `onMounted`, Angular from `ngAfterViewInit`, and Svelte from `onMount`. Everything runs client-side, because the editor needs a live DOM and a window. That single rule — mount after the element exists, in the browser — is why the same ~140KB library drops into a Next.js dashboard, a Laravel Blade view, or a single static HTML file with equal ease. Each framework guide below shows the exact lifecycle hook and a copy-paste mount snippet.
Persist with getData() to your own backend
BuilderJS is JSON-first. Call `getData()` and you get a lossless snapshot of the entire document — 42 element types, 59 controls, 31 overlays, styles and structure — that round-trips perfectly back through `load()`. Persistence is deliberately your responsibility: the editor never phones home, never stores anything for you, and has no opinion about where your data lives. You POST the JSON to your own route and write it to your own database; when the user returns, you fetch it and call `load()` to restore the exact canvas. The download ships reference PHP backends (MySQL, SQLite, S3 for save, upload and auth) that you copy and own outright — and because they're just reference implementations, porting the same save/upload/auth contract to Node, Go or Python is straightforward. Your app owns auth, routing, multi-tenant isolation, seats and billing; the builder owns only the editing surface and the JSON it hands you.
Same canvas, dual output: email and pages
One embedded editor covers two jobs that teams usually buy two tools for. When your user is done, BuilderJS exports either standards web/landing-page HTML or, through its EmailExportPipeline, Outlook-safe email HTML. That pipeline does the unglamorous email work for you: it converts flexbox layouts to nested tables, rasterizes SVG to PNG, adds `@media` rules so blocks stack on mobile, emits MSO conditional comments for Outlook, and inlines CSS. The library ships 30+ templates and 200+ samples that were Litmus-tested across 22 clients, so your users start from markup that already renders. Important boundary: BuilderJS builds the email template and the page markup — it does not send the email or host the page. You bring the ESP for delivery and your own hosting or CMS for publishing. The editor's contract ends at clean, exportable HTML; what happens to that HTML downstream is your platform's job.
Extend without forking — Elements, themes, AI hooks
You can grow the editor without ever maintaining a fork. `Builder.registerElement` lets you add custom Elements, Widgets and Controls — your own components, your own property panels — alongside the built-in 42 element types. Theming is configurable, and i18n covers 20+ locales including RTL, so the editor speaks your users' language out of the box. AI hooks are pluggable and vendor-neutral: BuilderJS exposes the seams, and you decide whether to wire in a provider, which model, and under what terms — nothing is hard-coded to a single vendor. Multi-tenancy is supported at the architecture level through closure-captured configuration, meaning you can run isolated editor instances per tenant — but your application owns the actual isolation, seat counts and billing logic. The throughline: every extension point is designed to keep your customizations in your codebase, upgrade-safe, instead of patched into someone else's source.
Own the source with a one-time license
BuilderJS is sold as a one-time CodeCanyon purchase (item 27146783), Regular $52 or Extended $99. You get the source, self-host it, and there is no SaaS layer, no monthly fee, no per-seat charge, no usage metering and no phone-home. For context on the embeddable-editor market: Unlayer's embeddable builder lists paid plans at $250/mo (Launch), $750/mo (Scale) and $2,000/mo (Optimize) as flat monthly subscriptions, as of June 2026 (source: unlayer.com/pricing). GrapesJS, by contrast, is genuinely free and open source under the BSD-3-Clause license (v0.23.2 is the latest core release as of June 2026; source: github.com/GrapesJS/grapesjs) — and that's the honest comparison to make: the question versus a free, framework-agnostic OSS editor isn't 'cheaper than free', it's whether you want a finished, supported, dual-output (email + pages) library with reference backends you own. Author support is time-boxed (roughly 6–12 months); the source you keep forever. Try the live demo at builder.emotsy.com.
Explore
- Embed in React
- Embed in Next.js
- Embed in Vue
- Embed in Angular
- Embed in Svelte
- Embed in Laravel
- Embed in plain HTML
- Embeddable builder overview
- One-time license
- Embed in Rails
- Embed in Django
- Embed in Node / Express
- React email builder component
- Embed in WordPress
- Embed in Nuxt
- Embed in SvelteKit
- Embed in Remix
- Embed in Astro
- Embed in Flask
- Embed in Livewire
- Embed in Blazor
Frequently asked questions
-
Is BuilderJS an npm React or Vue component I can import?
No. BuilderJS is a DOM-mount bundle (dist/builder.js + dist/builder.css), not a published npm framework component. You mount it imperatively against a DOM element inside your framework's lifecycle hook — useEffect in React, onMounted in Vue, ngAfterViewInit in Angular, onMount in Svelte. The same mount pattern works in every stack because the library targets the DOM, not a specific framework.
-
Does it work with server-side rendering or Next.js?
The editor is client-side only — it needs a live browser DOM and window, so it cannot run during SSR. In Next.js you load it with a dynamic import using ssr:false inside a 'use client' component, and mount it after the component renders. The same principle applies anywhere: mount in the browser, after the container element exists.
-
How do I save and reload what users build?
Call getData() to get a lossless JSON snapshot of the document, then POST it to your own route and store it in your own database. To restore, fetch the JSON and call load(). BuilderJS never stores data for you and never phones home — persistence, auth and routing stay entirely in your application.
-
Can BuilderJS send the emails or host the pages it builds?
No. BuilderJS is the editor you embed; it builds the email template markup and the page HTML, and that's where its job ends. It does not send email, host or publish pages, run funnels, do CRM or automation, or process payments. You bring your own ESP for delivery and your own hosting or CMS for publishing the exported HTML.
-
Can I add my own elements and use my own AI provider?
Yes. Use Builder.registerElement to add custom Elements, Widgets and Controls without forking the source. AI hooks are pluggable and vendor-neutral — BuilderJS exposes the integration seams and you choose the provider and terms. Theming is configurable and i18n covers 20+ locales including RTL.
-
What does the license cover and is it a subscription?
It's a one-time CodeCanyon license (item 27146783) — Regular $52 or Extended $99 — with no SaaS, no monthly fee, no per-seat cost, no usage metering and no phone-home. You own and self-host the source. Author support is time-boxed (about 6–12 months), but the source is yours to keep and run indefinitely.