Examples

Example 1: HTML - Editing Mode

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ContentBuilder Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="contentbuilder/contentbuilder.css" rel="stylesheet">
    <link href="runtime/contentbuilder-runtime.css" rel="stylesheet">
</head>
<body>

<div class="container"></div>

<button onclick="save()">Save</button>

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

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

// Load content
const html = localStorage.getItem('content') || `
<div class="row">
    <div class="column">
        <h1>Hello World</h1>
        <p>Start editing your content here.</p>
    </div>
</div>`;
builder.loadHtml(html);

// Save function
function save() {
    const html = builder.html();
    localStorage.setItem('content', html);
    alert('Content saved!');
}
</script>

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

</body>
</html>

Example 2: HTML - Viewing Mode

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>View Content</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="runtime/contentbuilder-runtime.css" rel="stylesheet">
</head>
<body>

    <!-- Important: Use 'is-container' class when viewing -->
    <div class="container is-container">
        <!-- Your saved content here -->
    </div>
    
    <script src="runtime/contentbuilder-runtime.min.js"></script>
    <script>
        const runtime = new ContentBuilderRuntime();
        runtime.init();
    </script>
    
</body>
</html>

Important: When using Runtime for viewing, always add the is-container class to your content wrapper.

Example 3: React - Editing Mode

import { useEffect, useRef } from 'react'
import ContentBuilder from '@innovastudio/contentbuilder'
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css'

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

function App() {
    const builderRef = useRef<ContentBuilder | null>(null);

    useEffect(() => {
        // Initialize ContentBuilder
        builderRef.current = new ContentBuilder({
            container: '.container'
        });

        // Load snippets
        builderRef.current.loadSnippets('/assets/minimalist-blocks/content.js')

        // Load initial content
        const savedHtml = localStorage.getItem('content') || `
        <div class="row">
            <div class="column">
                <h1>Hello World</h1>
                <p>Start editing your content here.</p>
            </div>
        </div>`;
        builderRef.current.loadHtml(savedHtml)

        // Initialize runtime
        let runtime: ContentBuilderRuntime | null = new ContentBuilderRuntime();
        runtime.init();

        // Cleanup
        return () => {
            builderRef.current?.destroy()
            runtime?.destroy();
            runtime = null;
        };
    }, []);

    const handleSave = () => {
        if (!builderRef.current) return;
        const html = builderRef.current.html();
        localStorage.setItem('content', html)
        alert('Content saved!')
    };

    return (
        <>
            <div className="container" style={{ maxWidth: '980px', margin: '0 auto' }}></div>
            <button onClick={handleSave}>Save</button>
        </>
    );
}

export default App

Example 4: React - Viewing Mode

import { useEffect, useRef } from 'react'
import ContentBuilderRuntime from '@innovastudio/contentbuilder-runtime'
import '@innovastudio/contentbuilder-runtime/dist/contentbuilder-runtime.css'

export default function ViewPage() {
    const containerRef = useRef<HTMLDivElement | null>(null)

    useEffect(() => {
        const savedHtml = localStorage.getItem('content') || '<p>No content available.</p>'
        
        if (containerRef.current) {
            // Render content
            containerRef.current.innerHTML = ''
            const range = document.createRange()
            const fragment = range.createContextualFragment(savedHtml)
            containerRef.current.appendChild(fragment)

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

            // Cleanup
            return () => {
                runtime?.destroy();
            };
        }
    }, []);

    return (
        <div
            className="is-container"
            ref={containerRef}
            style={{ maxWidth: '980px', margin: '0 auto' }}
        ></div>
    );
}