🎨 Canvas Mode

Canvas mode is an option in ContentBuilder.js that allows users to freely position and arrange content blocks anywhere on the page.

To activate Canvas mode, set the canvas option to true and provide a previewURL when initializing ContentBuilder:

const builder = new ContentBuilder({
    container: '.container',
    canvas: true,
    previewURL: 'preview-canvas.html'
});

• canvas: true – Enables free positioning of blocks.
• previewURL – The URL to a standalone HTML file used to preview the canvas-based content (provided in the package). This file includes all necessary styles and scripts to render the output correctly.

To support Canvas mode, you must include the following CSS and JavaScript files in your page:

<link href="block/block.css" rel="stylesheet">
<script src="block/block.js"></script>

The package includes a working example to help you get started: • example-canvas.html – Demonstrates how to use Canvas mode.