Examples

Example 1: HTML - Editing Mode

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>ContentBox Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="contentbox/contentbox.css" rel="stylesheet">
    <link href="contentbuilder/contentbuilder.css" rel="stylesheet">
</head>
<body>

<script src="contentbox/contentbox.min.js"></script>
<script>
const builder = new ContentBox({
    controlPanel: true,
    iframeSrc: 'blank.html',

    autoSave: () => {
        save();
    },
});

// Load content from localStorage
const html = localStorage.getItem('content') || '';
builder.loadHtml(html);

// Load styles
const mainCss = localStorage.getItem('mainCss') || '';
const sectionCss = localStorage.getItem('sectionCss') || '';
builder.loadStyles(mainCss, sectionCss);

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

</body>
</html>

Example 2: HTML - Viewing Mode

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>View Content</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="runtime/contentbox-runtime.css" rel="stylesheet">
    
    <!-- Your saved global styles and section-specific styles here 
        (mainCss & sectionCss) -->
</head>
<body style="touch-action: pan-y">

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

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

Example 3: React - Editing Mode

tsx

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

function App() {
    // Ref to hold ContentBox instance
    const builderRef = useRef<ContentBox | null>(null);

    useEffect(() => {

        builderRef.current = new ContentBox({

            controlPanel: true,
            iframeSrc: `/blank.html`,

            autoSave: () => {
                save();
            }
        });

        // Load initial content
        const savedHtml = localStorage.getItem('savedHtml') || '';
        builderRef.current.loadHtml(savedHtml);

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

    const save = async () => {
        if(!builderRef.current) return;
        const builder = builderRef.current;

        const html = builder.html();
        const mainCss = builder.mainCss();          // Global styles used on the page
        const sectionCss = builder.sectionCss();    // Section-specific styles

        // Save to localStorage as an example
        localStorage.setItem('savedHtml', html)
        localStorage.setItem('savedMainCss', mainCss)
        localStorage.setItem('savedSectionCss', sectionCss)

        console.log('Content saved!');
    }

    return (
        <>
            {/* ContentBox will be rendered here by the library */}
        </>
    );
}

export default App

Example 4: React - Viewing Mode

tsx

// src/ViewPage.tsx - For viewing saved content
import { useEffect, useState, useRef } from 'react'
import ContentBoxRuntime from '@innovastudio/contentbox-runtime'
import '@innovastudio/contentbox-runtime/dist/contentbox-runtime.css'

export default function ViewPage() {
    const [html, setHtml] = useState<string>('')
    const [mainCss, setMainCss] = useState<string>('')
    const [sectionCss, setSectionCss] = useState<string>('')
    const runtimeRef = useRef<ContentBoxRuntime | null>(null)

    // Load data from localStorage
    useEffect(() => {
        const html = localStorage.getItem('savedHtml') || ''
        const mainCss = localStorage.getItem('savedMainCss') || ''
        const sectionCss = localStorage.getItem('savedSectionCss') || ''
        
        setHtml(html)
        setMainCss(mainCss)
        setSectionCss(sectionCss)
    }, []);

    // Initialize runtime after content is rendered
    useEffect(() => {
        if (html && !runtimeRef.current) {
            runtimeRef.current = new ContentBoxRuntime()
            runtimeRef.current.init()
        }

        return () => {
            if (runtimeRef.current) {
                runtimeRef.current.destroy()
                runtimeRef.current = null
            }
        }
    }, [html])

    return (
        <>
            <style>{mainCss}</style>
            <style>{sectionCss}</style>
            <div className="is-wrapper" dangerouslySetInnerHTML={{ __html: html }} />
        </>
    );
}