Docking: keep-alive tabs

About this example

SvDockManager keepAlive in Svelte 5. By default only the active tab renders, so switching unmounts the previous panel and loses its DOM state; with keepAlive inactive tabs stay mounted but hidden, so scroll position and unsaved form input survive a tab switch. Type in one tab, switch away and back, and toggle the prop to compare.

SvDockManager - keepAlive. By default only the ACTIVE tab renders, so switching tabs unmounts the old one and its DOM state (scroll, form input) is lost. Turn on keepAlive and inactive tabs stay mounted (just hidden), so per-tab state persists. Type in one tab, switch away and back, and toggle keepAlive to feel the difference.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

What is the cost of keepAlive?

Inactive panels stay in the DOM, so memory and any live subscriptions persist for every open tab. Leave it off for panels that are cheap to recreate.

Does keepAlive apply to floating windows?

Floating windows are always visible, so the setting only affects tabs stacked in a pane.

Can I keep only some panels alive?

The prop is workspace-wide in this demo; for a mix, hold the state of cheap-to-lose panels in a store and let them remount.

Related documentation

• SvDockLayout

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 (366-dock-keepalive.svelte)

<script lang="ts">
  /**
   * SvDockManager - keepAlive. By default only the ACTIVE tab renders, so
   * switching tabs unmounts the old one and its DOM state (scroll, form input)
   * is lost. Turn on `keepAlive` and inactive tabs stay mounted (just hidden),
   * so per-tab state persists. Type in one tab, switch away and back, and toggle
   * keepAlive to feel the difference.
   */
  import { SvDockManager, dockGroup, dockTabs, dockPane } from '@svgrid/grid'
  import type { DockManagerState } from '@svgrid/grid'

  let workspace = $state<DockManagerState>({
    main: dockGroup('row', [
      dockTabs([dockPane('a', 'Scratch A'), dockPane('b', 'Scratch B'), dockPane('c', 'Scratch C')]),
      dockTabs([dockPane('notes', 'Notes')]),
    ], [0.6, 0.4]),
    floating: [],
    autoHide: [],
  })
  let keepAlive = $state(true)
</script>

<div class="wrap">
  <header>
    <h2>Keep-alive tabs</h2>
    <label class="chk"><input type="checkbox" bind:checked={keepAlive} /> keepAlive</label>
  </header>
  <p class="hint">Type in <b>Scratch A</b>, switch to B and back. With <b>keepAlive on</b> the text survives; turn it off and switching tabs clears it (the pane is unmounted).</p>

  <div class="stage">
    <SvDockManager bind:workspace {keepAlive}>
      {#snippet pane(p)}
        <div class="pad">
          <textarea placeholder={`Uncontrolled text for "${p.title}" - not stored in app state.`}></textarea>
        </div>
      {/snippet}
    </SvDockManager>
  </div>
</div>

<style>
  .wrap { padding: 20px; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; }
  header { display: flex; align-items: center; justify-content: space-between; }
  header h2 { margin: 0; font-size: 20px; font-weight: 700; }
  .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sg-muted, #64748b); }
  .hint { margin: 0 0 6px; color: var(--sg-muted, #64748b); font-size: 12.5px; }
  .stage { flex: 1; min-height: 420px; }
  .pad { height: 100%; padding: 12px; box-sizing: border-box; }
  textarea { width: 100%; height: 100%; box-sizing: border-box; resize: none; font: inherit; font-size: 13px; line-height: 1.6;
    padding: 10px; border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: 8px;
    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
</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.