HTML Builder (Front-End Version)

HTML Builder (Front-End Version)

HTML Builder

HTML Builder – a drag and drop builder for HTML pages!

HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

Custom elements are easily added, and the process is explained in the detail in the provided documentation (also found online here).

HTML Builder features

  • build custom HTML pages using predefined HTML elements
  • create your own custom HTML elements with ease
  • integrates seamlessly with CSS frameworks (like Bootstrap, Foundation, etc)
  • create multiple pages in one session
  • edit CSS, links, images (uploading possible) and icons (integrates with Font Awesome)
  • export the created pages (incl CSS, Javascript and images)
  • basic editing of written content (only available for non IE browsers)
  • beautiful add-on for HTML template authors!

Setup HTML Builder with your own HTML template

HTML Builder makes it extremely easy to configure the script with your own HTML template, allowing users to easily create custom pages! It’s very easy to integrate your own HTML elements (simply create the element files and configure the elements.json file, more details are included in the documentation).

Besides adding your own HTML elements, you can also easily configure which elements are allowed to be edited (CSS) by the user and which CSS attributes are editable. You can even go as far as specifying values from which the user can choose for certain CSS attributes (for example, COLOR can be either: red, black or yellow). HTML Builder allows for total flexibility and control!


  • web server with PHP enabled (the export, save and image upload functions require PHP)
  • browser to access the script


Are you an author selling HTML templates are you looking to provide your customers with an easy way to customise your products after purchasing it? HTML Builder makes integration with HTML templates extremely easy and your customer will the fact they can easily create their own custom pages using your designs!

Themeforest authors who have purchased an extended license are allowed to bundle HTML Builder with their HTML templates!

They love it; and so will you!


Change log

v2.27 2016-07-02
- new feature: global blocks (use for menus, footers, etc)

v2.26 2016-06-27
- bug fix: some drag/drop issues on the canvas were solved

v2.25 2016-06-23
- enhancement: better menu bar
- bug fixes: fixed up several smaller bugs inside the template blocks

v2.2 2016-06-19
- enhancement: use inline editor rather editor inside modal popup
- enhancement: no more modes, click and edit your elements without having to switch modes
- new feature: responsive view modes

v2.01 2016-05-30
- enhancement: implement inline content editor

v2.0 - 2016-04-05
- bug fix: image uploads not working properly when script runs in sub folder

v2.0 - 2016-03-25
- bug fix: Builder does not work properly when placed in a  subfolder rather then the root folder
- bug fix: link dropdown are hidden/not visible
- bug fix: in some cases, an weird alert popup appears when applying updated styling
- bug fix: exporting with the style editor open maintains the red dashed outline in the exported HTML
- bug fix: exporting breaks certain canvas elements
- bug fix: height detection malfunction on blocks with fixed headers
- bug fix: top part of sidebar hidden behind nav bar when scrolling down
- enhancement: prevent SAVE button from being disabled when page is empty
- enhancement: secondary sidemenu slides out next to primary side menu

v2.0 - 2016-03-25
- enhancement: complete rewrite of the Javascript code base to make it more developer friendly
- enhancement: implementation of commonjs module pattern
- enhancement: site is now saved in a .json file rather then using the browser's local storage (this also means you can move your site date elsewhere if needed)
- new feature: implemented autosave

v1.9 - 2015-03-31
- security fix: users can now only upload specified file types

v1.9 - 2015-03-18
- new feature: saving sites
- new feature: live preview

v1.83 - 2015-02-24
- bugfix: saving content using content editor disabled scrolling on the canvas
- bugfix: changing content using HTML editor does not adjust the height of the block

v1.83 - 2015-02-20
- bugfix: HTML source editor not saving changes

v1.83 - 2015-02-11
- bugfix: moving blocks on the canvas results in the blocks resetting

v1.83 - 2015-02-06
- improved handling of inline styling (incl improved removal of inline styles before exporting)
- fixed block height issue on Chrome (when changing block order)

v1.82 - 2015-02-03
- improved sidebar functionality
- fixed: Chrome issues (browser becoming unresponsive with certain blocks)
- fixed: altered styling missing after export
- improved responsiveness of the canvas

v1.8 - 2015-01-21
- improved removal of inline styling before exporting sites
- implement support for blocks containing advanced JS which modifies underling HTML (such as popular slideshow scripts)
- re-aligned block action buttons, now aligned horizontal
- fixed: HTML source code editor overflowing into other blocks
- fixed: loading issues (mostly in Chrome) where the initial loader remains visible and doesn't finish loading the page
- fixed: exporting issues (empty ZIP file, only happening on certain server configurations)

v1.7 - 2014-11-23
- fixed: disappearing scrollbars after using "Content" mode
- implemented HTML source code editing
- changed sidebar appear event from "hover" to "click" 
- added 7 additional blocks
- implemented table editing
- improved background image editing

v1.6.5 - 2014-11-16
- fixed bug: can't edit links wrapped around elements, such as images and icons
- fixed bug: multiple text editors appear in the modal popup on occasion

v1.6 - 2014-11-10
- implemented video editing (both Youtube and Vimeo videos can be used)
- implemented linking to blocks (useful when building one-page sites)

v1.5.5 - 2014-11-04
- Improved (written) content editing using rich text editing
- Sticky header bar with building mode and buttons

v1.5 - 2014-09-17
- images can now be used as thumbnails for the elements, significantly speeding up the load time of the script when using a large number of elements (both iframes AND images can be used)
- items inside elements can now be cloned, allowing users to easily add menu items, etc
- items inside elements can now be deleted by the user
- 13 new elements have been added

Emergency path 2014-09-14:
- reset now reset icon changes as well

v1.4 - 2014-09-13
- added missing  tags to exported markup
- now allows for inline scripting (scripts within the body tags)
- added icon editing / integration with font-awesome

Emergency patch 2014-08-27:
- issue with file input widget on Chrome and Safari

v1.3 - 2014-08-27
- implemented image editing/uploading

Emergency patch 2014-08-13:
- issue with nested editable elements not being clickable

Emergency patch 2014-08-12:
- missing scroll inside the elements section on Chrome/Safari (OSX)
- escaped content when exporting (on older versions of PHP)

v1.2 - 2014-08-12
- implemented CSS editing and link editing

v1.1 - 2014-08-06
- improved export function; now exports entire site including CSS, JS and images