BuilderJS - Visual HTML Email and Page Builder Plugin for Web

BuilderJS: Drag and Drop HTML Email and Page Builder

BuilderJS is a JavaScript editor for building HTML emails and web pages inside your own application. Embed it in a SaaS product, CRM, newsletter tool or marketing platform. The package includes a prebuilt JavaScript bundle, CSS, templates and full source code. You can run the demo without npm, Composer or a build step.

Your users can drag elements onto a canvas, edit text, change styles and export HTML. Documents are saved as JSON, so your application can store them and reopen them for further editing.

Try the live demo to edit a template and export HTML in your browser. No signup required.

Run the Demo

The included demo requires PHP 8.1 or later. Extract the package and start PHP’s built-in server:

unzip builderjs-*.zip -d ~/my-builder cd ~/my-builder/builderjs php -S localhost:8000 -t demo/

Open http://localhost:8000 in your browser. From the showcase home, open the builder, browse 35+ integration examples or read the included developer documentation. Saving and uploads are disabled in the demo until you enable them in demo/backend/config.php.

Connect Your Backend

The demo’s configuration is in demo/builder.php. To point it at your own save and upload handlers, add these assignments after the existing $builderConfig array:

$builderConfig['endpoints']['save'] = '/your-app/save'; $builderConfig['endpoints']['assetUpload'] = '/your-app/upload'; $builderConfig['defaultTheme'] = 'default'; $builderConfig['defaultSample'] = 'master/sample/email/Blank';

Reload the page to use the new settings. The Save button will POST to your endpoint. The backend examples document the request and response formats; use your application’s authentication and access controls when implementing your own handlers.

What’s New in 2.1.0

BuilderJS 2026 uses a new version line starting at 2.x. Version 2.1.0 follows the last published version, 7.0.1, and includes these changes:

• Signature element. Let users insert saved email signatures supplied by your app through onListSignatures. The selected HTML is copied into the document, so later changes to the saved signature do not alter existing documents. Users can edit the copy as HTML, or through your own editor using onMountHtmlEditor.
• Demo writes disabled by default. Save, image upload, theme import and other write endpoints return HTTP 403 until enabled in demo/backend/config.php. Theme import requires a signed-in session and validates every ZIP entry before writing. Image uploads accept JPEG, PNG, WebP and GIF only.
• Readable bundle. dist/builder.js is built without webpack’s eval() wrappers. Full source code is included in src/.
• Updated documentation and credits. The backend guide now covers saved signatures. LICENSE.md lists the third-party libraries, fonts and icon sets used by the package.

Features from 7.0.1 are also included: the YouTube element with web and email modes, Social Icons with 11 styles, signup form templates, Feature-list and Spacer widgets, email export improvements and funnel templates.

Drag and Drop Editing

Build layouts with headings, paragraphs, images, buttons, dividers, columns, lists, social icons, YouTube content, feature lists, spacers and signup forms. Elements with web and email modes adapt their output to the selected context. You can add your own widgets through widgetsBox.addWidget().

Visual Style Settings

Users can change typography, colors, spacing, alignment, borders, shadows and backgrounds through the settings panel. Developers can customize the editor’s appearance with CSS variables and theme templates.

Responsive Layouts

Switch the preview width to check desktop, tablet and mobile layouts. Email templates use table-based layouts and responsive styles. The email export pipeline includes adjustments for clients with limited CSS support.

Email HTML Export

Set outputMode: 'email' to apply the email export pipeline when calling getHtml(), or call getHtmlForEmail() explicitly. The pipeline inlines CSS and adapts layout markup for email. Email compatibility warnings help authors identify features that may have limited client support.

The package also includes a PHP CSS inliner and a working example. Test your final templates in the email clients your audience uses.

JSON Documents

Use getData() to read the editable document as JSON and load() to reopen it. Store that JSON alongside exported HTML in your own database. Your application can use it for saved drafts, document versions, A/B variants or generated content.

Use Your Existing Backend

The editor is plain JavaScript and does not require a particular backend framework. The included demo and reference handlers use PHP. You can implement the same integration with Node.js, Laravel, Django, Rails, ASP.NET, Java, Go or another backend.

Self-Hosted and Customizable

Host the editor in your application and choose where documents and assets are stored. Add your logo, change colors and adapt the interface to your product. There is no required “Powered by” badge or hosted editor subscription. The default setup loads UI icons and some libraries from CDNs; dependencies and credits are listed in LICENSE.md.

Multiple Editors on One Page

Mount multiple BuilderJS instances with separate containers, themes and document data. The examples show how to copy a document between two editors and configure separate editors for different tenants.

Developer API

Initialize the editor with new Builder({...}) and load a document with builder.load(data, templates, config, mediaUrl, callback). Subscribe to events, register elements through Builder.registerElement(), add widgets or extend controls. The included developer portal covers the API, JSON structure, themes and backend integration.

What’s in the Package

• dist/: the compiled builder.js, builder.css and self-hosted fonts.
• demo/: the showcase home, live builder, theme gallery, design system reference, examples and documentation.
• demo/examples/: 35+ examples covering basic setup, backend integration, layout variants, events, API methods, extensions and export/import flows.
• demo/docs/: 15 developer guides with keyboard search.
• demo/backend/: reference PHP handlers for saving, image uploads, HTML export, ZIP export and bundle export.
• demo/themes/: theme files and 50+ email templates, including newsletters, welcome emails, sales announcements and event invitations.
• src/: full engine source, included with both Regular and Extended License purchases. To rebuild the bundle, run npm install && npm run build.
• README.md, CHANGELOG.md and LICENSE.md: setup instructions, release history, license information and third-party credits.

50+ Included Email Templates

Start with a newsletter, product launch, welcome email, abandoned cart message, event invitation, sales announcement, receipt or services layout. Edit the content and styling to match your brand, or begin with a blank template.

Use Cases

• Email marketing: add a visual email composer to your application.
• Newsletters: let authors create and revise their own layouts.
• CRM and customer communication: design messages inside your existing workflow.
• CMS and landing pages: provide a visual editor for page content.
• Marketing automation: include email design in your campaign tools.
• Transactional emails: edit receipts, invoices and notifications.
• Internal tools: create branded messages for sales, support and HR teams.
• Generated content: load JSON documents created by your application for users to review and edit.

Browser Compatibility

The editor supports Chrome, Firefox, Safari and Edge. Exported email appearance depends on the template and the receiving email client; use the preview tools and check the final HTML in your target clients.

Included Documentation

Serve the demo/ folder to browse the developer portal at /docs/. Guides cover the JSON schema, Builder API, custom elements, controls, themes, backend integration and localization. Each integration example also includes a walkthrough accessible from the examples hub.

License and Third-Party Libraries

BuilderJS is available under Envato’s Regular and Extended Licenses. Check the Envato license terms for your intended use. LICENSE.md includes license references and credits for EJS, JsBarcode, QR Code Styling, Parsedown, Prism, Google Fonts, Material Symbols, Bootstrap, ECharts and Mermaid. These dependencies retain their respective licenses.

Support

For bug reports and integration questions, use the support form on this CodeCanyon item page.

Release Notes

2.1.0 / 2026-10-28 ==================   * Note: BuilderJS 2026 uses the 2.x version line. This release follows 7.0.1.  * Added: Signature element. Your app lists saved signatures through onListSignatures. The selected HTML is copied into the document and can be edited as HTML or through onMountHtmlEditor.  * Security: Demo write endpoints return HTTP 403 until enabled in demo/backend/config.php. This covers saving, image uploads, theme imports, thumbnails, QR images and backend examples.  * Security: Theme import requires a signed-in session and validates every ZIP entry before writing. Image upload accepts JPEG, PNG, WebP and GIF, with types detected from file contents.  * Security: save.php no longer creates theme directories. Cross-origin write requests are rejected. Script execution is disabled in uploads/ and themes/ on Apache.  * Changed: dist/builder.js is built without webpack's eval() wrappers.  * Changed: The package.json in the download lists only the build script.  * Fixed: README quick start path and documentation references to files outside the package.  * Fixed: Third-party library, font and icon credits in LICENSE.md.  7.0.1 / 2026-06-20 ==================   * Added: YouTube element with web and email modes, a thumbnail play button for email and size presets.  * Added: Social Icons widget with 11 styles, SVG in the editor, PNG on email export and per-platform backgrounds.  * Added: Signup form templates and generator, with 8 templates, 5 layouts and popup background images.  * Added: Feature-list and Spacer widgets with icon size, per-item color and typography controls.  * Added: Inline-CSS email export v5 pipeline and email compatibility warnings.  * Added: Upsell and Thank-You funnel templates in Simple and Extended variants.  * Added: Optional SEO configuration in demo/, disabled by default. The buyer package contains no telemetry.  * Changed: Consistent link URL validation, including merge tags, and updated control panels.  * Changed: assetUploadHandler replaced with onBrowse.  * Changed: Internal artefact_type renamed to outputMode. Existing JSON documents still load.  * Fixed: Button box-sizing in exported email, including full-width buttons.  * Fixed: Rounded cell clipping and empty placeholders in exports.  * Fixed: Selection of YouTube and video elements.  * Fixed: Bare URLs and email addresses wrapped in <a style="color:inherit"> on export. ZIP and bundle exports include only assets referenced by the active sample.  7.0.0 / 2026-05-11 ==================   * Added: Rebuilt buyer portal with showcase home, live builder, gallery, design reference and examples hub.  * Added: 35+ integration examples across basic, backend, cookbook, events, API and extensions.  * Added: Developer documentation at demo/docs/, with 15 guides across 4 tracks and Cmd-K search.  * Added: 8 editor layout variants, including minimal, two-column, three-column, sidebar-only, mobile, card, rich header and canvas-only.  * Added: Backend examples for MySQL saving, S3 storage, authentication and realtime sync.  * Added: English, French and Vietnamese locale packs, with support for custom translations.  * Added: Events including document:saved, element:added, element:removed and mode:changed.  * Added: API examples for document data, loading, modes, selection, clearing and undo/redo.  * Added: Custom elements through Builder.registerElement() and widgets through widgetsBox.addWidget().  * Added: Custom control subclassing guide.  * Added: Multiple editor instances on one page.  * Added: Light and dark modes in the demo, plus a theme picker with category filters.  * Added: Bundle and ZIP export handlers alongside HTML export.  * Added: Playwright regression coverage for Chromium and Firefox.  * Added: Accessibility improvements across the builder and showcase.  * Added: PHP 8.x compatibility for backend examples.  * Fixed: Drag-and-drop issues in Safari and Firefox.  * Fixed: Initial template loading performance.  * Fixed: Dark-mode contrast in control panels.  * Fixed: Duplicate CSS after repeated saves.  * Fixed: Image uploads with large files.  * Fixed: Inline editing across supported browsers.  6.0.6 / 2026-03-03 ==================   * Added: Pure HTML widgets without a Bootstrap requirement.  * Added: More base templates.  * Added: X icon for the former Twitter service.  * Added: More translations and language support.  * Fixed: Drag-and-drop issues in Safari.  * Fixed: Drag-and-drop usability.  * Fixed: Reduced nested HTML in widgets.  * Fixed: Compatibility with older Outlook versions.  * Fixed: Reduced template file sizes.  * Fixed: PHP 7.3 compatibility in sample code.  * Fixed: CSS inlining examples for PHP.  * Fixed: Translation typos.  * Fixed: Image previews in certain browsers.