Examples
16 copy-pasteable patterns for building real things on top of DocMosaic - from a 30-line minimal editor to frames, controlled-state persistence, custom backends, theming, and embedding.
DocMosaic ships as a kit, not a fixed app. These examples sell the capabilities of that kit - what you can build, not which primitives exist. Each page is one focused scenario with a complete, copy-pasteable snippet.
Pick the closest fit, copy the code, adapt to your shell.
Starter
Basic editor
The 30-line minimum - Editor.Root + Canvas + Section, nothing else.
Print and PDF
A4 portrait with print + download buttons. The canonical DocMosaic shell.
Controlled state
Lift document state out and own the source of truth - for sync, persistence, or collaboration.
BYO-UI (headless)
Skip the compound primitives entirely and drive the reducer with your own shell.
Composition
Multi-page documents
Pages sidebar plus drag-to-reorder. The reducer handles page math.
Template gallery
A starter-templates dialog wired to localStorage for "recently used".
Frames & image slots
Group elements with container frames and drop photos into Canva-style shaped image slots.
Drawing mode
DrawButton + DrawingControls on a blank page - sketches alongside images.
Read-only viewer
Lock the editor for preview. Selection, zoom, and export still work.
Embedded in a modal
Drop the editor into a Radix dialog without breaking drag-and-drop.
Customization
Custom PDF backend
Swap the bundled jsPDF pipeline for a mocked / Worker / pdf-lib renderer.
next/image renderer
Replace the default <img> with next/image via EditorConfigProvider.
Custom theme
Override --primary and --secondary tokens for a third-party brand.
Custom keybindings
Add a "b = bring to front" shortcut on top of the default keymap.
Integration
Save to a database
onDocumentChange → localStorage + simulated server sync with debounce.
Mobile & touch support
How the editor adapts to phones and tablets - the responsive shell and touch interactions.
What these examples are not
They're not a tutorial. If you haven't seen the editor yet, start with Quick start first - then come here to copy the shape closest to what you're building.