Engineering Guides

Tutorials & Walkthroughs

Learn best practices for configuring layouts, building custom controls, preserving component state, and integrating modern UI frameworks.

Core Foundation & Concepts

🚀

Getting Started with Strelit UI Kit

Familiarize yourself with basic layout managers, component registration, and DOM container mounting.

Dynamically Adding & Removing Components

Inject new items into existing stacks, columns, or rows on user click or programmatic events.

💾

Serializing & Restoring Workspace State

Extract `layout.saveLayout()` snapshots to JSON and reload them via `layout.loadLayout()`.

🪟

Multi-Monitor Browser Popouts

Manage detached native popout windows and synchronize communication across multiple display screens.

Advanced Customization & Frameworks

React & Next.js Teleports

Embed declarative React components and portals without losing context during drag operations.

🅰️

Angular Simple Integration

Wrap standard Angular components in virtual containers.

🏛️

Angular ComponentPortal Architecture

Enterprise multi-injector setup with custom ComponentPortals.

🛠️

Custom Stack Header Controls

Inject custom action buttons, badges, and dropdown menus right inside tab stack headers.

🏷️

Extending Tab Behavior

Customize tab close events, rename callbacks, and status indicators.

📊

Highcharts Financial Grids

Integrate auto-reflowing charts with container resize observers.