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.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
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.