⚙️ Methods

📘 Get Generated HTML

Retrieve the current HTML content built inside the editor:

const html = builder.html();

You can then send this HTML to a server for saving.

🎨 Get the Styles

const mainCss = builder.mainCss(); // Returns the default typography style for the page.
const sectionCss = builder.sectionCss(); // Returns the typography styles for specific sections on the page

In production, the saved HTML content should be rendered with the styles.

📥 Load HTML Content Programmatically

To completely replace the current content in the editor with new HTML, use the loadHtml() method:

builder.loadHtml(html);

This is ideal for loading saved content from a database or pre-defined template.

Example:

const myContent = `
  <div class="is-section is-section-100 is-box type-system-ui">
	    <div class="is-overlay"></div>
	    <div class="is-container v2 size-18 leading-14 is-content-1300">
	    <div class="row">
	        <div class="column">
	            <h1 class="leading-11 size-88">Hello World</h1>
	        </div>
	    </div>
	    </div>
	</div>
`;

builder.loadHtml(myContent);

📥 Load Styles into Builder

Load previously saved styles to restore typography:

builder.loadStyles(mainCss, sectionCss); 

⚙️ Programmatically Open HTML Code Editor

You can open the HTML code editor from code using:

builder.viewHtml();

⬇️ Download the Generated HTML

Triggers downloading the current content as an HTML file.

builder.download();

🎞️ Open 'Animate Section' panel

Opens the 'Animate Section' panel.

builder.openMotionCascade();

⏱️ Open Motion Editor

Opens the Motion (timeline) editor.

builder.openMotionDock();

🤖 Open AI Assistant Panel

Launches the AI Assistant panel for content generation.

builder.openAIAssistant();

🧹 Clear Content

Clears all content from the current page.

builder.clear();

⚙️ Change Element Selection Behavior

By default, when a user presses CMD+A (Mac) or CTRL+A (Windows) inside an editable area, ContentBox selects only the current element (such as a paragraph or heading) — not the entire text in a column.

You can control this behavior using the elementSelection option:

const builder = new ContentBuilder({
    container: '.container',
    elementSelection: true // Default behavior
});

• When elementSelection: true – Selects only the current element inside the column.
• When elementSelection: false – Selects the entire column content.

↩️ Programmatically Trigger Undo or Redo

You can also trigger undo or redo actions from your code using the following methods:

builder.undo();  // Reverts the last action

builder.redo();  // Re-applies the last undone action

These are useful when integrating with custom UI elements.

🪟 Build Your Own Dialog

builder.modal() builds a dialog around your content. You supply what goes inside; the shell, title bar, close button, accessibility attributes, padding and dragging are handled for you:

const wordCount = builder.modal({
    title: 'Word Count',
    width: 320,
    className: 'wordcount',   // optional hook for your own CSS
    html: `
        <div>
            <div style="line-height:1">
                <span class="wc-words" style="font-size:56px;font-weight:700;">0</span>
                <span style="font-size:15px;margin-left:6px;">words</span>
            </div>
        </div>`
});

It returns a handle:

wordCount.open();     // show it
wordCount.close();    // hide it
wordCount.body        // the content wrapper - query your own markup from here
wordCount.el          // the dialog element

So a custom button becomes:

builder.addTextButton(buttonHtml, '.wordcount-button', () => {
    wordCount.body.querySelector('.wc-words').textContent = countWords();
    wordCount.open();
});

Options

🖥️ Page Preview

A fullscreen preview of the page with a width ruler, for checking the layout at any size without leaving the editor.

builder.openPagePreview();

The frame loads your previewURL, and the content reaches that page through the existing onPreviewOpen hook:

const builder = new ContentBox({
    previewURL: 'preview.html',
    onPreviewOpen: () => {
        // default: saves builder.html(), mainCss() and sectionCss() to localStorage
    },
});

Nothing happens if previewURL is not set.

Not to be confused with openPreview(), which opens Live Preview, the small floating window. They are separate tools and both remain available.

🛑 Destroying the Editor Instance

To completely remove a ContentBox instance, use:

builder.destroy();