Docking manager

About this example

SvDockManager in Svelte 5, a full docking workspace on top of SvDockLayout. Beyond tiling and drag-to-dock it adds floating windows through a tab button or by dragging a tab into open space, tab reordering along the strip, and pinning and auto-hide where the triangle button collapses a panel to an edge, hovering the edge tab flies it out and Pin re-docks it. The whole workspace binds through bind:workspace; popping a panel out to a native window is opt-in.

SvDockManager - a full docking workspace on top of SvDockLayout. Beyond tiling + drag-to-dock it adds: floating windows (the box button on a tab, or drag a tab into open space), tab reordering (drag a tab along its strip) and pinning / auto-hide (the triangle button collapses a panel to an edge; hover the edge tab to fly it out, then Pin to re-dock). Popping a panel out to a real OS window is opt-in (allowPopout, off by default) - see the pop-out demo.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

How do I float a panel?

Click the float button on its tab or drag the tab into empty space; the panel becomes a movable, resizable window over the workspace and can be docked again by dragging it onto a pane.

What is auto-hide?

The panel collapses to a tab on the nearest edge; hovering or clicking that tab slides it out temporarily, and Pin returns it to the tiled layout.

Is the workspace serializable?

Yes. bind:workspace holds the tiled tree, the floating windows and the auto-hidden panels in one object, which the analytics workspace demo saves to localStorage.

Related documentation

• Docking layout
• SvDockManager

Related articles

• Saved Views - Persist Grid Layout and Filters - Give users named, switchable snapshots of column order, sorting, filters, and grouping - persisted to localStorage or a server adapter - using SvGrid's createNamedViews API.
• Avoiding Layout Thrash in Custom Grid Cells - Layout thrash from interleaved DOM reads and writes is the most common cause of scroll jank in grids with custom cells - here is how to find it and design your way out of it.
• Column Resizing and Reordering - Let Users Shape the Grid - How to wire drag-to-resize and drag-to-reorder in SvGrid, then persist the layout to localStorage so it survives page reloads.

Source code (362-dock-manager.svelte)

<script lang="ts">
  /**
   * SvDockManager - a full docking workspace on top of SvDockLayout. Beyond
   * tiling + drag-to-dock it adds: floating windows (the box button on a tab, or
   * drag a tab into open space), tab reordering (drag a tab along its strip) and
   * pinning / auto-hide (the triangle button collapses a panel to an edge; hover
   * the edge tab to fly it out, then Pin to re-dock). Popping a panel out to a
   * real OS window is opt-in (`allowPopout`, off by default) - see the pop-out demo.
   */
  import { SvDockManager, dockGroup, dockTabs, dockPane, type DockManagerState } from '@svgrid/grid'

  let workspace = $state<DockManagerState>({
    main: dockGroup('row', [
      dockTabs([dockPane('explorer', 'Explorer')]),
      dockGroup('column', [
        dockTabs([dockPane('editor', 'index.ts'), dockPane('readme', 'README.md')]),
        dockTabs([dockPane('terminal', 'Terminal'), dockPane('problems', 'Problems')]),
      ], [0.66, 0.34]),
    ], [0.22, 0.78]),
    floating: [],
    autoHide: [],
  })

  const files = ['src/index.ts', 'src/app.svelte', 'src/lib/dock.ts', 'README.md', 'package.json']
</script>

<div class="wrap">
  <header>
    <h2>Docking manager</h2>
    <p>
      <b>Float:</b> the &#9634; button (or drag a tab into open space).
      <b>Reorder:</b> drag a tab along its strip (an insertion line shows where).
      <b>Dock:</b> drag a tab over a pane - a 5-way guide + preview show where it lands.
      <b>Auto-hide:</b> the &#9663; button sends a panel to its nearest edge, or drag a tab to any border. Click the edge tab to fly it out, then Pin (&#128204;) to re-dock.
    </p>
  </header>

  <div class="stage">
    <SvDockManager bind:workspace>
      {#snippet pane(p)}
        {#if p.id === 'explorer'}
          <ul class="explorer">{#each files as f (f)}<li>{f}</li>{/each}</ul>
        {:else if p.id === 'editor'}
          <pre class="code">export function dock() {'{'}
  return 'float me'
{'}'}</pre>
        {:else if p.id === 'readme'}
          <div class="doc"><h3>README</h3><p>Float, reorder, and auto-hide panels.</p></div>
        {:else if p.id === 'terminal'}
          <pre class="term">$ npm run dev
  ready in 288 ms</pre>
        {:else if p.id === 'problems'}
          <div class="doc"><p>No problems detected.</p></div>
        {/if}
      {/snippet}
    </SvDockManager>
  </div>
</div>

<style>
  .wrap { padding: 20px; display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13px; line-height: 1.6; }
  .stage { flex: 1; min-height: 460px; }
  .explorer { list-style: none; margin: 0; padding: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
  .explorer li { padding: 5px 8px; border-radius: 6px; }
  .explorer li:hover { background: var(--sg-row-hover-bg, #f1f5f9); }
  .code, .term { margin: 0; padding: 12px; font-size: 12.5px; line-height: 1.6; font-family: ui-monospace, monospace; }
  .term { color: var(--sg-muted, #64748b); }
  .doc { padding: 12px; font-size: 13px; }
  .doc h3 { margin: 0 0 6px; font-size: 14px; }
</style>

View this example on GitHub

More Layout examples

• Account & security settings console - A real SaaS settings surface composed from the UI kit: SvMenubar app bar, promise + Undo-action toasts on save, SvPopconfirm on destructive rows, SvHoverCard teammate previews, and frame input adornments (leading icons, prefix affixes, masked API key). Profile / Team / Security tabs over SvCard + SvStat.
• Invoice builder - An adornment-heavy money form: currency prefixes, % suffixes, masked tax IDs (frame adornments), line items with SvPopconfirm delete + Undo action toasts, live SvStat totals, an SvHoverCard tax hint, and a promise toast on Send. Pure UI-kit composition.
• Operations KPI dashboard - A KPI console: SvStat + SvSparkline tiles, an SvGauge SLA dial, SvHoverCard drill-down previews per service, an SvMenubar toolbar (View / Range / Actions) and a promise toast on Refresh. Pure UI-kit composition, no grid dependency.
• Form: rich field types - SvForm reaching the whole input suite from one schema - phone, country, mask, combobox, radio, slider, tags, datetime and file - plus per-field help text, a readonly field, column span, and a promise toast on submit.
• Form: cascading fields - SvForm dependent selects - a child list derives from the parent value via a function `options`, and `dependsOn` clears the child when the parent changes so a stale selection never lingers. Country -> State -> City.