Full Bleed Shell
Edge-to-edge canvas shell with a floating toolbar for maps, boards, and diagram editors that need every pixel of viewport space.
Edge-to-edge canvas shell with a floating toolbar for maps, boards, and diagram editors that need every pixel of viewport space.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Full Bleed Shell is an edge-to-edge canvas layout for maps, boards, and diagram editors. Three floating pill segments sit at the top of the viewport without a sidebar or content wrapper eating into the canvas. The left pill carries the Acme brand and the document title Q2 Architecture with a Saved badge. The center pill is a drawing toolbar with Select, Pan, Add node, and Layers tool buttons, Select active. The right pill holds Undo, Redo, a Share button, and the signed-in avatar. A floating zoom control at bottom-right shows 100% with minus and plus buttons.
Tool buttons are a typed const array with explicit active fields, so the active state is never inferred from a union. aria-pressed drives accessibility.
Reach for this block as the outermost layout for any infinite-canvas product surface, a diagram editor, a map view, a kanban board, or a whiteboard, replacing the dashed canvas zone with the real rendering layer.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the diagram editor canvas. Other full bleed layouts:
Tip: keep the toolbar floating, not fixed to a band, so the canvas height equals the full viewport and the toolbar does not clip content near the top.