Tutorials & Walkthroughs
Learn best practices for configuring layouts, building custom controls, preserving component state, and integrating modern UI frameworks.
Modern Framework Integrations (2026)
React 18 & 19 (React Portals)
Preserve component state, React Context, and hooks during drag-and-drop docking using virtual React Portals.
Angular (v17+ Standalone & Signals)
Dock Angular standalone components with full reactive Signal support and ComponentPortal projection.
Vue 3 (Composition API & Teleport)
Combine Vue 3 reactive refs and native <Teleport> wrappers with Strelit's panel geometry.
Vite & Strict TypeScript Starter
Spin up an optimized multi-window workspace with Vite HMR, strict typing, and zero bundler overhead.
Core Layout Architecture
Getting Started
Step-by-step introduction to initializing StrelitLayout, registering factories, and loading declarative configurations.
Saving & Restoring State
Serialize workspaces to JSON, restore active tabs, and synchronize layout configurations with LocalStorage.
Adding Items Dynamically
Insert new views, panels, and component stacks at runtime using programmatic coordinate queries.
Custom Header Controls
Add custom action icons, dropdown menus, and controls directly into panel header tab bars.
Multi-Window Popouts
Tear out tabs into secondary browser windows with uninterrupted event streams and bi-directional state syncing.
Extending Tabs & Titles
Customize tab labels, dynamic close buttons, tab icons, and tab drag-and-drop constraints.
ReactJS (Legacy v1 Pattern)
Reference implementation for class-based React integrations (for migration to React Portals).
Advanced Panels & Third-Party Integrations
HighCharts Realtime Panels
Embed realtime charting canvases with automated resize listeners and responsive layout snapping.
SlickGrid Data Grids
Integrate high-frequency virtual data grids inside split containers with smooth scrolling.
RequireJS (AMD Module)
Architectural reference for loading Strelit Layout via Asynchronous Module Definition (AMD).
AngularJS 1.x (Simple Directive)
Legacy integration pattern using AngularJS custom directive attributes.
AngularJS 1.x (Complex Controller)
Multi-controller scopes, digest cycle synchronization, and nested directive bindings.