Installation.

Install the package

Use the same published version as this showcase, or review the upstream release notes before updating.

This package’s license: MIT. Retain upstream and bundled third-party notices when redistributing.

Mount your first view

Import the stylesheet and give the host a measurable height before creating a DockingManager. Keep stable ContentId values when saving layouts.

<div class="toolbar"><button id="float">Float editor</button><button id="dock">Dock editor</button><button id="hide">Auto-hide tools</button><button id="save">Save layout</button><button id="restore">Restore</button></div><div id="workspace" class="stage"></div><p class="hint">Drag tabs, resize splitters and edit the note. The content stays alive as you move it.</p>

import '@wieslawsoltes/dockyard/styles.css';

The complete executable source is in the usage guide. Imports shown here are intended for a bundler or a browser import map; bare npm imports do not resolve in ordinary HTML by themselves.

Own the lifetime

Call manager.Dispose() when the host is removed. Resolve restored content by ContentId because deserialization recreates model wrappers.

The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.

Know the contract

Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/dockyard@0.2.0.