Canvas demo
Live @hilum/designer-canvas surface with draggable layers, selection, and toolbar actions.
When To Use
- Use Canvas demo when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
- Start from the example whose layout and information hierarchy already match the workflow you are building.
- Review the examples below to compare density, framing, and emphasis before copying one into production code.
When Not To Use
- Do not use Canvas demo when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
- Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Key building blocks
Designer, DesignerCanvas, DesignerFrame, LayerRendererProps, RendererRegistry, ActionAddLayer
Live canvas preview
Drag layers, marquee-select, and zoom with Cmd+wheel.