Page Roller

Build complete web pages visually with drag-and-drop sections. Export ready-to-use HTML with all styles and scripts included.

Features

Section Library

Pre-built sections including Hero, Card Grid, Forms, Footer, Navigation, and Content blocks.

Drag & Drop

Click to add or drag sections to reorder. Intuitive visual editing with live preview.

Theme Integration

Choose light/dark themes with colour variants. Integrates with Theme Roller custom themes.

Template Library

Save multiple page templates. Load, edit, and manage your designs from localStorage.

Export Options

Copy HTML to clipboard, download as .html file, or save to browser storage.

Live Preview

Split-screen preview shows your page in real-time as you build. Open full preview in new window.

<div class="page-roller-feature-grid"><div class="page-roller-feature-card">
        <span data-icon="layers" data-icon-size="32"></span>
        <h3>Section Library</h3>
        <p>Pre-built sections including Hero, Card Grid, Forms, Footer, Navigation, and Content blocks.</p>
    </div>
    <div class="page-roller-feature-card">
        <span data-icon="move" data-icon-size="32"></span>
        <h3>Drag &amp; Drop</h3>
        <p>Click to add or drag sections to reorder. Intuitive visual editing with live preview.</p>
    </div>
    <div class="page-roller-feature-card">
        <span data-icon="sparkles" data-icon-size="32"></span>
        <h3>Theme Integration</h3>
        <p>Choose light/dark themes with colour variants. Integrates with Theme Roller custom themes.</p>
    </div>
    <div class="page-roller-feature-card">
        <span data-icon="save" data-icon-size="32"></span>
        <h3>Template Library</h3>
        <p>Save multiple page templates. Load, edit, and manage your designs from localStorage.</p>
    </div>
    <div class="page-roller-feature-card">
        <span data-icon="download" data-icon-size="32"></span>
        <h3>Export Options</h3>
        <p>Copy HTML to clipboard, download as .html file, or save to browser storage.</p>
    </div>
    <div class="page-roller-feature-card">
        <span data-icon="eye" data-icon-size="32"></span>
        <h3>Live Preview</h3>
        <p>Split-screen preview shows your page in real-time as you build. Open full preview in new window.</p>
    </div>
</div>

Page Builder

Click sections on the left to add them, or drag to reorder. Edit properties when a section is selected.

Page Builder

<div id="page-roller-container"></div>

/**
 * Page Builder - from public/showcase/page-roller.
 */
export function mount(root) {
        // Create Page Roller instance
    const builder = E.pageRoller(root.querySelector('#page-roller-container'), {
            theme: Domma.theme.get(),
            splitView: true,
            autoSave: true
        });
        // Try to load active document
    const active = builder.loadFromStorage ? builder.loadFromStorage() : null;
}

Usage

JavaScript API

                // Create a Page Roller instance
                const builder = Domma.elements.pageRoller('#container', {
                theme: 'light',
                themeVariant: 'ocean',
                useGrid: true,
                splitView: true
                });

                // Add sections programmatically
                builder.addSection('hero');
                builder.addSection('cardGrid');
                builder.addSection('footer');

                // Export HTML
                const html = builder.exportHTML();
                builder.download('my-page');
                builder.copyToClipboard();

                // Save/Load templates
                builder.saveTemplate('My Landing Page');
                builder.loadTemplate('My Landing Page');
                builder.listTemplates(); // ['My Landing Page', ...]
            

Section Methods

                // Get/Set sections
                builder.getSections();
                builder.getSection(0);
                builder.updateSection(0, { title: 'New Title' });

                // Move/Remove sections
                builder.moveSection(2, 0);
                builder.removeSection(1);

                // Theme configuration
                builder.setTheme('dark', 'forest');
                builder.setGridEnabled(true);
                builder.getPageConfig();

                // Lifecycle
                builder.newPage();
                builder.refreshPreview();
                builder.destroy();
            

<div class="grid grid-cols-2 gap-4"><div class="card">
        <div class="card-body">
            <h3 class="card-title">JavaScript API</h3>
            <div class="code-block language-javascript">
                <span class="comment">// Create a Page Roller instance</span>
                const builder = Domma.elements.pageRoller('#container', {
                theme: 'light',
                themeVariant: 'ocean',
                useGrid: true,
                splitView: true
                });

                <span class="comment">// Add sections programmatically</span>
                builder.addSection('hero');
                builder.addSection('cardGrid');
                builder.addSection('footer');

                <span class="comment">// Export HTML</span>
                const html = builder.exportHTML();
                builder.download('my-page');
                builder.copyToClipboard();

                <span class="comment">// Save/Load templates</span>
                builder.saveTemplate('My Landing Page');
                builder.loadTemplate('My Landing Page');
                builder.listTemplates(); <span class="comment">// ['My Landing Page', ...]</span>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h3 class="card-title">Section Methods</h3>
            <div class="code-block language-javascript">
                <span class="comment">// Get/Set sections</span>
                builder.getSections();
                builder.getSection(0);
                builder.updateSection(0, { title: 'New Title' });

                <span class="comment">// Move/Remove sections</span>
                builder.moveSection(2, 0);
                builder.removeSection(1);

                <span class="comment">// Theme configuration</span>
                builder.setTheme('dark', 'forest');
                builder.setGridEnabled(true);
                builder.getPageConfig();

                <span class="comment">// Lifecycle</span>
                builder.newPage();
                builder.refreshPreview();
                builder.destroy();
            </div>
        </div>
    </div>
</div>