Code

BuilderJS - Visual Drag & Drop HTML Builder

BuilderJS - Visual Drag & Drop HTML Builder

(4) 3.75 stars
43 Sales

About BuilderJS, Version 2.0.2 (November, 9th, 2019)

Welcome to BuilderJS 2.0, the most powerful Drag & Drop HTML editor for email and landing page. Using a drag & drop tool like BuilderJS is the easiest and most efficient way to make elegant and responsive emails or HTML pages.

BuilderJS is made in pure Javascript and HTML, making it easy to integrate with any web application no matter what the server-side programming language is (Java, .Net, PHP, Ruby on Rails, Python, etc.)

BuilderJS - Visual Drag & Drop HTML Builder - 1

BuilderJS is made fully customizable and open to any integration scenario: you can make it a standalone web page or embed it into your own site. For example, when it comes to save user work, BuilderJS allows you to configure a Save URI, to which it will make a POST request, passing the latest updates to the server side scripting for handling. The request is triggered when user clicks on Save button in the builder. And there are lots of other configuration settings allowing you to customize how it works and interact with the other components.

BuilderJS - Visual Drag & Drop HTML Builder - 2

Visual Drag & Drop Editor

BuilderJS makes design a real fun thanks to the modern and intuitive design view. Enjoy making your awesome email or HTML page without any hassle. Just drag & drop elements onto your design then resize / adjust / style those with advanced UI controls.

Source Editor

Beside the visual Drag & Drop editor, BuilderJS also comes with a fully-featured HTML source editor. You can always switch to Source View or Dual View to fully customize your design. Any changes made to HTML/CSS source is reflected in the design view instantly in real time.

BuilderJS - Visual Drag & Drop HTML Builder - 3

Themes & Templates

BuilderJS allows you to create new blank work space and build your design from scratch. However, most of the time, you may want to start making your own email or page design from an existing template, then tailor it the way you desire. You can also configure BuilderJS to load templates from a directory / URL and it will, in turn, show up provided available templates to user for choosing from

BuilderJS - Visual Drag & Drop HTML Builder - 4

Fully Responsive Email & Page

BuilderJS supports making email or pages that are fully responsive. You can always preview your design with a PC, tablet or mobile phone simulator. It is to make sure your email or page will show up correctly in reality

Built-in & Custom Widgets

BuildJS comes with bundle of common HTML widgets like Text, Image, video, devider, etc. allowing you to simply drag and drop to build your email or page. You can also add your own widget for reuse!

Multilingual

With BuilderJS’ simple I18n (Internationalization) system, you can easily translate the entire web UI to any other language you desire. You can you also customize the phrases / works appearing on the web UI to reflect your own brand. All can be done by updating a single translation file.

Sync & Publishing

There are many sync & publishing options availale: either download your work as a ZIP package or store it onto a cloud service like Dropbox, Google Drive or OneDrive.

Tag

Tagging is a very helpful feature allowing you to jnject custom variables into your email or page content. For example, you may want to insert {contact-first-name} or {product-price} values to your email and have those variables transformed to actual values when it comes to send your email or launch your page.

Autocomplete

BuilderJS provides contextual completion functionality for text matches which helps user quickly insert a tag into your content. Just type in a pre-configured marker for a tag, such as % or {, you will get the list of available autocomplete options displayed in a dropdown. The provided suggestion can be quickly selected and inserted into content.

API & Documentation

BuilderJS is shipped with a comprehensive documentation allow you to fully control over how BuilderJS works. You can very quickly get BuilderJS up and running with minimum configuration or customize it the way you desire with advanced configuration settings.

Key features in a glance

  • Easy Installation – Getting started quickly by simply copying our demo/ folder to your web’s document root to see BuilderJS in action. You will get the whole site up and running similar to our live demo page. Check out our documentation for more conguration settings if you are interested.
  • Design View – The powerful web UI editor for working with HTML emails or pages by drag & drop. Click on an element of your design and adjust its attributes in the attribute panel: color picker, image uploader, resize slider, padding/margin visual control, etc.
  • Source View – Fully featured HTML source editor with syntax highlighting, advanced indenting… provide you with maximized control over your email or page design. This is ideal for advanced users who have experience working with HTML / CSS / JavaScript.
  • Drag & Drop – BuilderJS is made to work with any template highly HTML5 / CSS3 compliance, no HTML pre-processing or wrapping required. Simply upload your template and enjoy dragging & dropping any HTML element.
  • Template Switching – Easily change your design to another template within seconds. Just choose a template from Available Templates list. Available templates can be passed to the BuilderJS through a configuration setting.
  • API Documentation – In-depth beautiful API documentation is included in BuilderJS package. You can open it in your PC’s web browser by clicking on the starting page at document/index.html. It is also available as a built-in guideline through the Help menu of the builder.
  • Localization – The built-in I18n (shorthand for internationalization) provides an easy way for translating your BuilderJS web UI to a custom language other than English.
  • Clean & Elegant – Enjoy everyday working with a modern and web editor. BuilderJS offers powerful features & capability the easy way without extra learning curve.
  • Themes & Templates – no need to build everything from scratch use one of the pre-built templates to give your project structure and change it’s design with one of included themes.
  • Rich Elements Library – Take advantage of dozens of pre-built elements included or easily create your own custom one for ultimate reusability.
  • Responsive Preview – Quickly preview how your design looks on a wide range of devices such as mobile, tablet, desktop. With an advanced simulator included, you can also choose a particular device view to work with your design.
  • Publish & Export – Download your whole design as a ZIP file, synchronize incomplete project or publish the final one to a cloud storage / sharing service like Amazon S3, Google Drive, Dropbox, OneDrive… with one single click.
  • Revision Management – Feel free to edit your email or HTML page without worrying about backups. You can always undo or redo your actions in BuilderJS. You can also see a history of changes / updates you made and switch back to any revision you desire

Release Notes

Version 2.0.2 (2019-11-09)


 * Fixed: inline editor does not work for certain types of element
 * Fixed: UI glitches on older versions of IE
 * Fixed: compatibility issues with older version of IE
 * Fixed: compatibility issues with older version of Opera
 * Fixed: more compatible HTTP headers for Ajax requests
 * Added: more flexible editor mode
 * Added: more decoration widgets
 * Added: more preview options
 * Added: support adding selected item to library for reuse
 * Added: support for HTTP 1.1 methods PUT, UPDATE, PATCH, DELETE
 * Added: more SYNC options
 * Added: convenient TAGS editing
 * Added: better TAG autocommplete when typing
 * Added: better TAG preview panel

Version 2.0.0 (2019-09-23)


 * Added: responsive support for old email clients
 * Added: full Edge 11 compatibility
 * Added: design view supported for older browsers
 * Added: template font issue per saving
 * Added: more HTML widgets for the core library
 * Added: template switching in design view
 * Added: cloud synchronization support
 * Added: more drag & drop visual effect 
 * Fixed: open/click tracking not working correctly
 * Fixed: custom widget does not preserve content

Version 1.9.3 (2019-06-06)


 * Added: more layout widgets
 * Added: full Opera compatibility
 * Added: customizable headers for Ajax request
 * Added: detection of invalid HTML structure
 * Added: more HTML widgets for the core library
 * Added: use cache to boost template load performance
 * Added: sync options in construction parameters
 * Added: double view support
 * Added: source view with syntax highlight theme
 * Added: the first publicly available version
by
by
by
by
by
by