Quick Start

Basic Usage

Using CDN (HTML/JavaScript):

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

<!-- Your content container -->
<div class="container"></div>

<!-- Include scripts -->
<script src="contentbuilder/contentbuilder.min.js"></script>
<script>
// Initialize ContentBuilder
const builder = new ContentBuilder({
   container: '.container'
});

// Load snippets (drag & drop blocks)
builder.loadSnippets('assets/minimalist-blocks/content.js');

// Load initial HTML content
builder.loadHtml(`
<div class="row">
    <div class="column">
        <p>Lorem Ipsum is simply dummy text.</p>
    </div>
</div>
`);

// Get the HTML content
const html = builder.html();
</script>

<!-- Initialize Runtime -->
<script src="runtime/contentbuilder-runtime.min.js"></script>
<script>
    const runtime = new ContentBuilderRuntime();
    runtime.init();
</script>

Using NPM (React/Vue/Modern Frameworks):

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

// Import Runtime library
import ContentBuilderRuntime from '@innovastudio/contentbuilder-runtime'
import '@innovastudio/contentbuilder-runtime/dist/contentbuilder-runtime.css'

// Initialize ContentBuilder
const builder = new ContentBuilder({
   container: '.container'
});

// Load snippets (drag & drop blocks)
builder.loadSnippets('assets/minimalist-blocks/content.js');

// Load initial HTML content
builder.loadHtml(`
<div class="row">
    <div class="column">
        <p>Lorem Ipsum is simply dummy text.</p>
    </div>
</div>
`);

// Get the HTML content
const html = builder.html();

// Initialize Runtime
const runtime = new ContentBuilderRuntime();
runtime.init();