— Elegant Editorial Design for the Web, No Complexity
ContentBox.js v5.9.3
ContentBox.js is a page builder Javascript library for creating elegant, magazine-style designs with expressive typography and visual storytelling - all fully responsive. Ideal for building custom CMS or online site builders that go beyond basic web layouts.
ContentBox.js uses the powerful ContentBuilder.js as its HTML editor, with added features for designing full web pages.
— 250+ Layouts
The only builder that offers true Magazine-Layout support—ready out of the box.
With over 250 beautifully designed layouts included, you can craft polished, magazine-ready designs faster—no need to start from scratch.
Designed for Real Editorial Aesthetics
ContentBox.js is the only page builder built specifically with editorial design in mind. It offers true magazine-layout support out of the box because its editing features are purpose-built for creating clean, elegant, and expressive content experiences.
01
Magazine-STYLE Layouts
With full-width editing, you can mimic the clean, intentional structure of minimalist print magazines, bringing that editorial elegance to the web.
02
Generous Whitespace
Easily add spacing at row, column, or element level. This helps focus attention, reduce visual noise, and create a refined reading experience by giving elements room to breathe.
03
Editorial Typography
Thoughtful font choices with settings for bold headers and oversized text guide the reader’s eye like a real magazine headline.
04
Asymmetry & Grid Play Made Easy
ContentBox.js avoids chaotic drag-and-drop behavior. Instead, it offers structured yet flexible row-and-column controls for creating intentionally asymmetric layouts, breaking free from common flowing designs.
05
Grid & Gridless Combined
ContentBox.js also supports gridless editing for added flexibility. You can add a Canvas (Gridless) Section for seamless block positioning. Read more: Designing with Canvas Mode in ContentBox.js
06
AI Code Chat
Code Chat lets you create and edit content by entering instructions. You can design layouts, generate images, modify elements, and build complete pages through natural language prompts.
Unlike generic AI webpage generators that produce the similar-looking landing or sales pages, Code Chat creates unique, creative layout compositions with the visual sophistication you'd expect from premium magazine designs.
Powered by OpenRouter and Fal.ai, Code Chat puts you in control with support for multiple AI models:
- Code Generation Models: Google Gemini 3 Pro, Claude Opus 4.5, GPT-5.1...
- Image Generation Models: Nano Banana Pro, GPT Image, Seedream 4.0, FLUX...
07
No Code Animation Builder
Create on-view or on-scroll triggered animation with scrubbing, section pinning and more. It's probably the only animation builder that has section pinning settings for scroll scrubbing, which normally requires manual coding (eg. using GSAP or ScrollTrigger). ContentBox.js brings this feature into a simple panel you can play with.
08
Ready Plugins or Create Your Own
Add interactive features such as sliders, galleries, logo loops, hero animations, and more to your web content. ContentBox loads each plugin’s script and style only when they are needed, ensuring efficient performance.
You can also build your own plugins to add interactivity or dynamic content.
Designed for storytelling, branding, and portfolios—not just utility pages.
Whether you're crafting long-form narratives, designer portfolios, or brand-focused websites, it gives you the tools to build with purpose—beyond basic landing pages and standard web templates.
A Flexible Builder for Any Stack
ContentBox.js works with popular CSS frameworks like Bootstrap, Tailwind CSS, Foundation, and more. It's written in pure JavaScript (ES6 module), making it easy to integrate into most setups. Examples are provided for use in plain HTML, PHP, React, Next.js, Vue, Laravel, and ASP.NET Core projects. Here’s a simple usage example:
const builder = new ContentBox({
/* options */
});
To get the content (HTML & its styles):
const html = builder.html(); const mainCss = builder.mainCss(); // get page style const sectionCss = builder.sectionCss(); // get sections' styles
To load the content (HTML & its styles):
builder.loadHtml(html); builder.loadStyles(mainCss, sectionCss); // Load styles
Documentation
Order & Download
Standard
$69
- 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
$499
- 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 ( $299)
From Standard to Super License ( $429)
Upgrade
No Limits License! Regardless of the package you choose, the "Websites for clients: Unlimited" feature allows you to incorporate the library into any number of websites owned by you or your clients—whether personal or business-related.
Understanding the Difference: Standard vs. Pro vs. Super Package
Note
ContentBox.js uses an integrated, fully functional version of ContentBuilder as its core editing engine that can only be used within ContentBox.js. For independent usage (outside of ContentBox.js), we recommend ContentBuilder.js full package.
Requirements
All modern browsers with HTML 5 Specification (Chrome, Firefox, Edge, Safari).