We have put together a few examples to help you get started with the designer. The examples cover a range of use cases and can be used as a starting point for your own projects.
A simple editor with a frame.
HeaderAdd a header to the designer.
PanelsAdd left and right panels to the designer.
PanesAdd panes to the designer.
ToolbarAdd a toolbar to the designer.
Custom ToolbarBuild a custom toolbar for the designer.
Print & PDFA print-ready editor with PDF export and paper size controls.
Unit SystemWork with different measurement units like pixels, mm, cm, in, and pt.
Blob EditorA custom svg blob editor built using the designer.
Designer ToolSwitch between Move and Hand tools for different interaction modes.
Export LayersHow to export the layers as JSON.
Frame SizeHow to change the size of the frame.
HistoryHow to use the history feature to undo and redo actions.
Image GeneratorAn AI image generator with filters.
Custom LayerAdd custom layer types to the designer.
Layer TreeAdd a layer tree to the designer.
MobileHow to make the designer mobile friendly.
ModeSingle or multiple layer mode.
PagesHow to create multi-page designs.
PerformanceOptimized for performance
Read OnlyHow to make the designer read only.
Save to DatabaseThis example shows how to save and load layers from a database.
ZoomZoom in and out controls and custom controls.