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.
Page Builder
Click sections on the left to add them, or drag to reorder. Edit properties when a section is selected.
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();