# Docking: keep-alive tabs

SvDockManager keepAlive: keep inactive tabs mounted (hidden) so their DOM state - scroll position, unsaved form input - survives a tab switch instead of being unmounted.

Uses `@svgrid/grid` (MIT). Category: Layout. Live demo: https://svgrid.com/demos/366-dock-keepalive/

Install: `npm i @svgrid/grid` (Svelte 5).

## 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](https://svgrid.com/docs/help/ui-components/sv-dock-layout.md)

## Related articles

- [Saved Views - Persist Grid Layout and Filters](https://svgrid.com/blog/saved-views-persist-layout/) - 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](https://svgrid.com/blog/avoiding-layout-thrash-custom-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](https://svgrid.com/blog/column-resizing-and-reordering/) - 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)

```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](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/366-dock-keepalive.svelte)