Quick Start

Basic Usage

Using CDN (HTML/JavaScript):

html

<!-- Include stylesheets -->
<link href="contentbox/contentbox.css" rel="stylesheet">
<link href="contentbuilder/contentbuilder.css" rel="stylesheet">

<!-- Include scripts -->
<script src="contentbox/contentbox.min.js"></script>
<script>
// Initialize ContentBox
const builder = new ContentBox({
    controlPanel: true, 
    iframeSrc: 'blank.html'
});

// Load initial HTML content
const html = `
<div class="is-section is-box type-system-ui">
    <div class="is-container v2 leading-14 size-18">
        <div class="row">
            <div class="column">
                <p>Lorem Ipsum is simply dummy text...</p>
            </div>
        </div>
    </div>
</div>`;
const mainCss = '', sectionCss = '';
builder.loadHtml(html);
builder.loadStyles(mainCss, sectionCss);

// Get the HTML content
const html = builder.html();
// Get the styles (main styles and sections' styles)
const mainCss = builder.mainCss();
const sectionCss = builder.sectionCss();
</script>

Using NPM (React/Vue/Modern Frameworks):

javascript

// Import ContentBox library
import ContentBox from '@innovastudio/contentbox'
import '@innovastudio/contentbox/public/contentbox/contentbox.css'
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css'

// Initialize ContentBox
const builder = new ContentBox({
    controlPanel: true,
    iframeSrc: 'blank.html'
});

// Load initial HTML content
const html = `
<div class="is-section is-box type-system-ui">
    <div class="is-container v2 leading-14 size-18">
        <div class="row">
            <div class="column">
                <p>Lorem Ipsum is simply dummy text...</p>
            </div>
        </div>
    </div>
</div>`;
const mainCss = '', sectionCss = '';
builder.loadHtml(html);
builder.loadStyles(mainCss, sectionCss);

// Get the HTML content
const html = builder.html();
// Get the styles (main styles and sections' styles)
const mainCss = builder.mainCss();
const sectionCss = builder.sectionCss();