ContentBuilder.js

Write Anything Beautifully!

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.

VIEW DEMO  ORDER NOW

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

In-place Content Editing

Direct Image Embed

Drag & Drop Beautiful Blocks

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).

Usage

Include the required js/css files and call:

$("#contentarea").contentbuilder({
      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">
      <div>
            <h1>Heading 1</h1>
            <p>Lorem Ipsum is simply dummy text...</p>
      </div>
</div>
<div data-thumb="assets/simple/thumbnails/02.png">
      <div>
            <p>Lorem Ipsum is simply dummy text...</p>
      </div>
</div>
<div data-thumb="assets/simple/thumbnails/03.png">
      <div>
            <img src="assets/simple/header.jpg" />
      </div>
</div>

150+ Blocks Included

Examples

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, Opera, Firefox, Safari, Opera
  • IE 10 or later

As Featured On


Hacker News

t3n

Product Hunt