Svelte Dock Layout
A docking layout is the shape every serious internal tool converges on: panes you can drag, split, stack as tabs and resize, arranged however the person using it prefers. SvDockLayout gives you that, and the whole arrangement is a plain serializable tree you can store per user.
Because the layout is data, restoring a workspace is assigning a value, and shipping a sensible default layout is writing one down. SvDockManager adds floating and popped-out windows on top for the cases where a pane needs to leave the page entirely.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvDockLayout, dockGroup, dockTabs, dockPane, type DockNode } from '@svgrid/grid'
let layout = $state<DockNode>(
dockGroup('row', [
dockTabs([dockPane('explorer', 'Explorer')]),
dockGroup('column', [
dockTabs([dockPane('editor', 'index.ts'), dockPane('readme', 'README.md')]),
dockTabs([dockPane('terminal', 'Terminal')]),
], [0.7, 0.3]),
], [0.25, 0.75]),
)
</script>
<SvDockLayout bind:layout>
{#snippet pane(p)}
{#if p.id === 'explorer'}<FileTree />{:else}<div>{p.title}</div>{/if}
{/snippet}
</SvDockLayout>What you get
- Drag to split or stack - Drop a tab on a pane edge to split in that direction, or on its centre to stack it as another tab in the same pane.
- The layout is data - A DockNode tree of groups, tab sets and panes. Bind it, save it to localStorage or a user record, and assign it back to restore.
- Resizable splitters - Every group carries its own size ratios, so dragging a splitter updates the same tree the rest of the layout lives in.
- Floating and popped-out panes - SvDockManager adds panes that float over the workspace or open in a real browser window and keep working.
- Keep-alive tabs - A hidden tab can keep its component mounted, so a grid scrolled halfway down is still there when you come back to it.
- Free and MIT - Both SvDockLayout and SvDockManager are in @svgrid/grid with no license key.
Live examples
- Docking layout - SvDockLayout: an IDE-style docking workspace - drag a tab onto another pane and drop on an edge to split or the centre to stack as a tab, drag the splitters to resize, close panes. The whole layout is a serializable, bindable DockNode tree.
- Docking manager - SvDockManager: SvDockLayout plus floating windows, tab reordering and pinning / auto-hide. Drag a tab into open space to float it, along its strip to reorder, or use the tab buttons to auto-hide (collapse to an edge) and pin back. (Popping out to a native OS window is opt-in - see the pop-out demo.)
- Docking: analytics workspace - SvDockManager as a BI workspace: per-pane minSize stops splitters crushing panels, and Save / Load persist the whole (tiled + floating + auto-hidden) layout to localStorage.
- Docking: header positions - SvDockManager headerPosition: put the tab strip on any side of a panel (top / bottom / left / right - left & right render vertical tabs) and toggle tab reordering.
- Docking: API & events - SvDockManager imperative API (onReady) + event stream (onEvent): a toolbar floats / pops out / maximizes / auto-hides / focuses panes from code, with every action logged live.
- Docking: pop out to a window - SvDockManager allowPopout (off by default): pop a panel out to a real OS window for a second monitor - a live monitoring console where Live log / Metrics keep streaming in the popped-out window, and closing it docks the panel back. Falls back to an in-app floating window when pop-ups are blocked.
Documentation
- SvDockLayout - A basic docking layout: nested resizable split groups and tabbed leaves, with drag-to-dock. Drag any pane's tab onto another pane and drop it on an edge to…
- SvDockManager - A full docking manager built on top of SvDockLayout. It keeps everything the tiled layout does - nested resizable splits, tabbed leaves, drag-to-dock - and…
- Docking layout - By default a screen arranges its blocks in a responsive 12-column grid. For dashboards, consoles, and analyst tools you can switch a screen to a docking…
Related articles
- SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
Frequently asked questions
How do I build a dockable layout in Svelte?
Compose a DockNode tree with dockGroup, dockTabs and dockPane, bind it to SvDockLayout, and render each pane from the pane snippet by its id.
Can I save and restore the layout?
Yes. The bound layout is a plain serializable object, so JSON.stringify it into localStorage or a user profile and assign it back on load.
Can a pane open in its own window?
Yes. SvDockManager supports popping a pane out into a real browser window, which stays connected to the same application state.
Is the dock layout free?
Yes. The docking layout and the dock manager are MIT-licensed in @svgrid/grid.