quilt-core

Framework-independent layout JSON, validation, commands, and subscriptions. No DOM or React dependency. MIT licensed; ships ESM, TypeScript declarations, and sources for editor navigation.

Quilt is a TypeScript library for split panes, tab groups, and popout windows. It provides a framework-independent layout model, a DOM renderer, and React bindings. Applications supply pane content and manage their own data and storage.

• Nested horizontal and vertical splits, with minimum and maximum pane sizes.
• Tab groups with configurable orientation, appearance, and per-pane permissions.
• CSS theme tokens and typed theme presets.
• Versioned JSON for layout and workspace settings.
• Same-origin popout windows that return their panes when closed.
• Keyboard navigation, optional shortcuts, and optional close confirmation.

Demos

• Vanilla TypeScript
• React
• Customize and export theme JSON from the Theming tab in either demo.
• Electron desktop downloads for macOS, Windows, and Ubuntu/Debian

See screenshots and controls or the application examples. The desktop application contains the same vanilla and React demos and runs offline. Demo builds have no trusted developer certificate; see the installation notes.

Install

npm install quilt-core

Use ESM imports. For local development archives, see packaging instructions.

Use

import { createLayout, LayoutStore, validate } from 'quilt-core';

const store = new LayoutStore(
  createLayout({
    pane: { id: 'notes', type: 'notes', title: 'Notes' },
  }),
);
const unsubscribe = store.subscribe(({ action, layout }) => {
  console.log(action, JSON.stringify(layout));
});
store.split('main', 'horizontal', {
  id: 'preview',
  type: 'preview',
  title: 'Preview',
});
console.log(validate(store.export())); // []
unsubscribe();
store.dispose();

createLayout() returns a fresh empty layout. createLayout({ pane, groupId }) returns a validated clone, activates the supplied pane, and defaults groupId to main. It preserves IDs and throws LayoutError for invalid input. parseLayout validates complete JSON; validate returns issues without throwing for invalid layout input.

Development and verification use Node 24; browser use requires modern JavaScript support including structuredClone. This package needs no stylesheet or host element. The quilt-vanilla DOM adapter and quilt-react binding provide views. Application data and persistence remain application-owned.

See API documentation and migration notes.

Documentation

• Getting started
• API reference
• Themes and tab bars
• Registration, React context, persistence, and confirmation
• Three.js integration
• Examples
• Troubleshooting
• Migration
• Changelog