Static frame
DesignerStaticFrame renders a canvas read-only — no interactivity, no overlays. Use it for dashboard thumbnails, project gallery tiles, and PDF previews. The same renderers from your RendererProvider drive both interactive and static modes.
When To Use
- Use Static frame 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 Static frame 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, DesignerStaticFrame, LayerRendererProps, RendererRegistry, Card, CardContent
Onboarding hero
Activity card
Brand block
Success state