ContentBuilder.js  (ver. 2.4.5)

Now You Can Have Drag & Drop Content Editing in Your Own Web Apps or CMS

InnovaStudio Content Builder (ContentBuilder.js) is a JQuery plugin that converts a <div> element into Editable Area. Unlike other editors, ContentBuilder.js provides you with beautifully designed content blocks, ready to drag & drop. You can even create your own content blocks.

Write Anything Beautifully!

Note: Direct Image embed uses base64 format which can be saved as jpg or png automatically (example in PHP and ASP.NET is provided in the package).

In-place Content Editing

Direct Image Embed

Drag & Drop Beautiful Blocks

Drag & drop slider block.
Code block for custom purpose is also available (note: these features and upload function are disabled in the online demo).

Quick embed icons for any purpose.


Include the required js/css files and call:

      snippetFile: 'snippets.html'

The snippetFile parameter lets you specify a html file containing snippet collection (content blocks) . You can add your own snippets in this file.

To get the HTML content:

var sHTML = $('#contentarea').data('contentbuilder').html();

Below is an example of a simple snippet file and how it would look in the builder as content blocks, ready to drag & drop.

<div data-thumb="assets/simple/thumbnails/01.png">
            <h1>Heading 1</h1>
            <p>Lorem Ipsum is simply dummy text...</p>
<div data-thumb="assets/simple/thumbnails/02.png">
            <p>Lorem Ipsum is simply dummy text...</p>
<div data-thumb="assets/simple/thumbnails/03.png">
            <img src="assets/simple/header.jpg" />

150+ Blocks Included


Your own snippets

This example uses a very simple snippet file.
View Demo

Saving Content

For demo purpose, the content is saved in browser's local storage.
View Demo

Multiple Instance

This example shows multiple editable area.
View Demo

Content can be viewed in all modern browsers. For editing, we recommend:

  • Recent versions of Chrome, Firefox, Safari, Opera
  • IE 10 or later

As Featured On

Hacker News


Product Hunt