Write Anything Beautifully

ContentBuilder.js 4.1

A drag & drop HTML editor + layout builder javascript library for your web applications, CMS or online site builder (no jQuery include needed). ContentBuilder.js is the first editor that allows you to build content layout in almost any css grid framework such as Bootstrap, Foundation, Materialize and more.

Not just another WYSIWYG editor

It's the only editor that plays with grid layouts

Build multi-column content, series of photos, lists of features and many more. You will be able to produce magazine-style content - with layout freedom - that makes web content beautiful and responsive.

Detailed controls when you need it

Element level editing without complexity

Improve editing experience with the flexibility to move elements or change styles the right way (all without adding complexity to the interface or HTML structure).

Image control that matters

Immediate image embed with simple adjustment for aesthetic

The image embed uses base64 format which can be saved automatically as jpg or png. Saving images requires server side handler (example for saving images in PHP and ASP.NET are provided in the package).

Convenient controls for the titles & text

Text controls that are built for convenient & responsive result

Make writing fun again with clean & minimalistic toolbar design, convenient text settings & wide font size range that you can pick easily without scrolling and adjust precisely with responsive result. 

Attention to colors.

Color picker that really helps

Start with simple predefined base colors whereas each will show gradient (lightness) options when you pick one. And when you need more or less saturation, an HSL panel will suggest more precise options. This logical guidance (once you get familiar) will help you evaluate colors quickly & easily.

Configurable Interface at Runtime

Allow users to choose their editing preferences

Hide unwanted tools, choose the toolbar placement or even make the interface super clean to help users write without distraction

200+ beautiful blocks

Everything you need to create beautiful content.

ContentBuilder.js provides you with 200+ beautifully designed content blocks for almost any mission. You can also add your own blocks or customize existing blocks (blocks are defined in editable JSON file).

Usage

ContentBuilder.js is written in pure Javascript (ES6 module) so you can use it in most situations. Here is the simple usage:

Include the js & css files:

<link rel="stylesheet" type="text/css" href="contentbuilder.css"></link>
<script src="contentbuilder.min.js"></script>

Initialize:

var builder = new ContentBuilder({
     container: '.container',
});

To get the HTML content:

var html = builder.html();

The first generic builder for almost any framework

ContentBuilder.js builds content layout using grid systems from popular css frameworks you're familiar with (Bootstrap, Foundation, Materialize or generally 12 columns grid systems). If you're not using any of them, basic css will be provided.

As Featured On


t3n

Hacker News

Product Hunt

Order & Download


Standard:

$69.95

Websites for clients: Unlimited

Resale in product or usage as hosted service (SaaS): No

Source Code: No


Pro:

$199

Websites for clients: Unlimited

Resale in product or usage as hosted service (SaaS): Yes
(1 product, unlimited users)

Source Code: No


Super:

$599

Websites for clients: Unlimited

Resale in product or usage as hosted service (SaaS): Yes 
(3 products, unlimited users)

Source Code: Yes


1 Year Free Upgrade & Email Support Included

After successful order, an automatic email containing login and download info will be sent.
If no email received within 1-2 hours, please check your spam folder or contact our support at: support@innovastudio.com

Change License

From Standard to Pro License ($129)
From Pro to Super License ($399)
From Standard to Super License ($529)

Upgrade

Upgrade here