Skip to main content Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill flexlayout-reactThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
name flexlayout-react description FlexLayout for React - Advanced docking layout manager with drag-and-drop, tabs, splitters, and complex window management user-invocable false disable-model-invocation true version 1.0.0 category development author Claude MPM Team license MIT progressive_disclosure {"entry_point":{"summary":"Professional docking layout system: drag-and-drop panels, tabs, splitters, persistence, complex multi-pane interfaces","when_to_use":"Building IDE-like interfaces, dashboard builders, multi-document editors, complex admin panels with draggable panes","quick_start":"1. Create model with Model.fromJson() 2. Wrap app in Layout component 3. Define factory function 4. Persist with model.toJson()"}} context_limit 700 tags ["react","layout","docking","drag-drop","ide","dashboard","flexlayout"] requires_tools []
FlexLayout-React - Professional Docking Layouts
Overview
FlexLayout-React provides IDE-quality docking layouts with drag-and-drop, tabs, splitters, and complex window management. Perfect for dashboards, IDEs, admin panels, and any interface requiring flexible, user-customizable layouts.
Key Features :
Drag-and-drop panel repositioning
Tabbed interfaces with close, maximize, minimize
Splitters for resizable panes
Border docking areas
Layout persistence (save/restore)
Programmatic layout control
TypeScript support
Installation :
npm install flexlayout-react
Basic Setup
1. Define Layout Model
import { Model , IJsonModel } from 'flexlayout-react' ;
const initialLayout : IJsonModel = {
global : {
tabEnableClose : true ,
tabEnableRename : false ,
},
borders : [],
layout : {
type : 'row' ,
weight : 100 ,
children : [
{
type : 'tabset' ,
weight : 50 ,
children : [
{
type : 'tab' ,
name : 'Explorer' ,
component : 'explorer' ,
}
]
},
{
type : 'tabset' ,
weight
50
children
type
'tab'
name
'Editor'
component
'editor'
const
Model
fromJson
2. Create Layout Component import React , { useRef } from 'react' ;
import { Layout , Model , TabNode , IJsonTabNode } from 'flexlayout-react' ;
import 'flexlayout-react/style/dark.css' ;
interface ComponentRegistry {
explorer : React .ComponentType ;
editor : React .ComponentType ;
terminal : React .ComponentType ;
}
function App (const modelRef = useRef (Model .fromJson (initialLayout));
const factory = (node : TabNode const component = node.getComponent ();
switch (component) {
case 'explorer' :
return <ExplorerPanel /> case 'editor' :
return <EditorPanel /> case 'terminal' :
return <TerminalPanel /> default :
return <div > Unknown component: {component}</div > return (
<div style ={{ width: '100vw ', height: '100vh ' }}>
<Layout
model ={modelRef.current}
factory ={factory}
/>
</div >
3. Component Implementation function ExplorerPanel (return (
<div className ="panel-explorer" >
<h3 > File Explorer</h3 >
<ul >
<li > src/</li >
<li > public/</li >
<li > package.json</li >
</ul >
</div > function EditorPanel (return (
<div className ="panel-editor" >
<textarea
style ={{ width: '100 %', height: '100 %' }}
placeholder ="Start typing..."
/>
</div >
Advanced Layout Configurations
Complex Multi-Pane Layout const complexLayout : IJsonModel = {
global : {
tabEnableClose : true ,
tabEnableRename : false ,
tabEnableDrag : true ,
tabEnableFloat : true ,
borderSize : 200 ,
},
borders : [
{
type : 'border' ,
location : 'left' ,
size : 250 ,
children : [
{
type : 'tab' ,
name : 'Explorer' ,
component : 'explorer' ,
}
]
},
{
type : 'border' ,
location : 'bottom' ,
size : 200 ,
children : [
{
type : 'tab' ,
name : 'Terminal' ,
component : 'terminal' ,
},
{
type : 'tab' ,
name : 'Output' ,
component : 'output' ,
}
]
}
],
layout : {
type : 'row' ,
weight : 100 ,
children : [
{
type : 'tabset' ,
weight : 70 ,
children : [
{
type : 'tab' ,
name : 'Editor 1' ,
component : 'editor' ,
},
{
type : 'tab' ,
name : 'Editor 2' ,
component : 'editor' ,
}
]
},
{
type : 'tabset' ,
weight : 30 ,
children : [
{
type : 'tab' ,
name : 'Properties' ,
component : 'properties' ,
},
{
type : 'tab' ,
name : 'Outline' ,
component : 'outline' ,
}
]
}
]
}
};
Nested Rows and Columns const nestedLayout : IJsonModel = {
global : {},
borders : [],
layout : {
type : 'row' ,
children : [
{
type : 'col' ,
weight : 50 ,
children : [
{
type : 'tabset' ,
weight : 70 ,
children : [
{ type : 'tab' , name : 'Top Left' , component : 'panel-a' }
]
},
{
type : 'tabset' ,
weight : 30 ,
children : [
{ type : 'tab' , name : 'Bottom Left' , component : 'panel-b' }
]
}
]
},
{
type : 'col' ,
weight : 50 ,
children : [
{
type : 'tabset' ,
weight : 30 ,
children : [
{ type : 'tab' , name : 'Top Right' , component : 'panel-c' }
]
},
{
type : 'tabset' ,
weight : 70 ,
children : [
{ type : 'tab' , name : 'Bottom Right' , component : 'panel-d' }
]
}
]
}
]
}
};
Layout Persistence
Save and Restore Layout import { useState, useEffect } from 'react' ;
import { Model , Actions } from 'flexlayout-react' ;
function LayoutManager (const [model, setModel] = useState (() => {
const saved = localStorage .getItem ('layout' );
return saved
? Model .fromJson (JSON .parse (saved))
: Model .fromJson (defaultLayout);
});
const onModelChange = (newModel : Model const json = newModel.toJson ();
localStorage .setItem ('layout' , JSON .stringify (json));
};
return (
<Layout
model ={model}
factory ={factory}
onModelChange ={onModelChange}
/>
Reset to Default Layout function LayoutControls ({ model }: { model: Model } ) {
const resetLayout = (const newModel = Model .fromJson (defaultLayout);
window .location .reload ();
};
const saveLayout = (const json = model.toJson ();
const blob = new Blob ([JSON .stringify (json, null , 2 )], {
type : 'application/json'
});
const url = URL .createObjectURL (blob);
const a = document .createElement ('a' );
a.href = url;
a.download = 'layout.json' ;
a.click ();
};
return (
<div className ="layout-controls" >
<button onClick ={resetLayout} > Reset Layout</button >
<button onClick ={saveLayout} > Export Layout</button >
</div >
Dynamic Tab Management
Adding Tabs Programmatically import { Actions , DockLocation } from 'flexlayout-react' ;
function addNewTab (model : Model , tabsetId : string doAction (Actions .addNode (
{
type : 'tab' ,
name : `New Tab ${Date .now()} ` ,
component : 'editor' ,
},
tabsetId,
DockLocation .CENTER ,
-1
));
}
const addToExplorer = (addNewTab (model, 'explorer-tabset-id' );
};
const addToActive = (const activeTabset = model.getActiveTabset ();
if (activeTabset) {
addNewTab (model, activeTabset.getId ());
}
};
Closing Tabs function closeTab (model : Model , tabId : string doAction (Actions .deleteTab (tabId));
}
function closeAllTabs (model : Model const tabsets = model.getRoot ().getChildren ();
tabsets.forEach (tabset =>if (tabset.getType () === 'tabset' ) {
const tabs = tabset.getChildren ();
tabs.forEach (tab =>if (tab.getType () === 'tab' ) {
model.doAction (Actions .deleteTab (tab.getId ()));
}
});
}
});
}
Tab Context and Props
Passing Data to Components interface EditorTabProps {
node : TabNode ;
}
function EditorTab ({ node }: EditorTabProps ) {
const filepath = node.getConfig ()?.filepath as string ;
const readonly = node.getConfig ()?.readonly as boolean ;
return (
<div >
<p > Editing: {filepath}</p >
<textarea readOnly ={readonly} />
</div > const factory = (node : TabNode const component = node.getComponent ();
switch (component) {
case 'editor' :
return <EditorTab node ={node} /> default :
return <div > Unknown</div > const newTab : IJsonTabNode = {
type : 'tab' ,
name : 'my-file.ts' ,
component : 'editor' ,
config : {
filepath : '/src/my-file.ts' ,
readonly : false ,
}
};
Accessing Tab State function SmartPanel ({ node }: { node: TabNode } ) {
const name = node.getName ();
const isActive = node.isSelected ();
const isVisible = node.isVisible ();
return (
<div className ={isActive ? 'active ' : 'inactive '}>
<h3 > {name}</h3 >
{isVisible && <p > This tab is visible</p > }
</div >
Styling and Theming
Custom CSS
.flexlayout__layout {
background : #1e1e1e ;
}
.flexlayout__tab {
background : #2d2d2d ;
color : #cccccc ;
}
.flexlayout__tab :hover {
background : #3e3e3e ;
}
.flexlayout__tab_button--selected {
background : #1e1e1e ;
border-bottom : 2px solid #007acc ;
}
.flexlayout__splitter {
background : #2d2d2d ;
}
.flexlayout__splitter :hover {
background : #007acc ;
}
Dark/Light Theme Toggle import 'flexlayout-react/style/dark.css' ;
import 'flexlayout-react/style/light.css' ;
function ThemeToggle (const [theme, setTheme] = useState<'dark' | 'light' >('dark' );
useEffect (() => {
const link = document .createElement ('link' );
link.rel = 'stylesheet' ;
link.href = `flexlayout-react/style/${theme} .css` ;
document .head .appendChild (link);
return () => {
document .head .removeChild (link);
};
}, [theme]);
return (
<button onClick ={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
Toggle Theme
</button >
Integration with Tauri
Persisting Layout to Tauri Backend import { invoke } from '@tauri-apps/api/core' ;
async function saveLayoutToTauri (model : Model const json = model.toJson ();
await invoke ('save_layout' , {
layout : JSON .stringify (json)
});
}
async function loadLayoutFromTauri (Promise <Model > {
const layout = await invoke<string >('load_layout' );
return Model .fromJson (JSON .parse (layout));
}
Window-Specific Layouts import { invoke } from '@tauri-apps/api/core' ;
import { getCurrent } from '@tauri-apps/api/window' ;
function WindowLayout (const [model, setModel] = useState<Model | null >(null );
useEffect (() => {
const currentWindow = getCurrent ();
const windowLabel = currentWindow.label ;
invoke<string >('load_window_layout' , { windowLabel })
.then (layout =>setModel (Model .fromJson (JSON .parse (layout)));
})
.catch (() => {
setModel (Model .fromJson (defaultLayout));
});
}, []);
const onModelChange = (newModel : Model const currentWindow = getCurrent ();
const json = newModel.toJson ();
invoke ('save_window_layout' , {
windowLabel : currentWindow.label ,
layout : JSON .stringify (json)
});
};
if (!model) return <div > Loading...</div > return (
<Layout
model ={model}
factory ={factory}
onModelChange ={onModelChange}
/>
Advanced Patterns
Custom Tab Headers import { Layout , Model , TabNode , ITabRenderValues } from 'flexlayout-react' ;
function App (const onRenderTab = (
node : TabNode ,
renderValues : ITabRenderValues
) => {
const modified = node.getConfig ()?.modified as boolean ;
renderValues.content = (
<div className ="custom-tab-header" >
<span > {node.getName()}</span >
{modified && <span className ="modified-indicator" > ●</span > }
</div > return (
<Layout
model ={model}
factory ={factory}
onRenderTab ={onRenderTab}
/>
Tab Actions (Custom Buttons) const onRenderTab = (node : TabNode , renderValues : ITabRenderValues buttons .push (
<button
key ="save"
onClick ={() => saveTabContent(node)}
title="Save"
>
💾
</button > buttons .push (
<button
key ="duplicate"
onClick ={() => duplicateTab(node)}
title="Duplicate"
>
📋
</button >
Best Practices
Persist layouts - Save to localStorage or backend for user experienceUse unique component names - Avoid collisions in factory functionHandle missing components - Factory should have default caseMemoize factory function - Prevent unnecessary re-rendersUse config for tab data - Store tab-specific props in configProvide reset mechanism - Users can restore default layoutTest layout changes - Verify persistence works correctlyHandle edge cases - Empty tabsets, deleted componentsUse borders wisely - Left/right/top/bottom for tools, main area for contentOptimize large layouts - Lazy-load components when possible
Common Pitfalls
function App (const model = Model .fromJson (layout);
return <Layout model ={model} /> function App (const modelRef = useRef (Model .fromJson (layout));
return <Layout model ={modelRef.current} />
import { Layout } from 'flexlayout-react' ;
❌ Not handling onModelChange :
<Layout model={model} factory={factory} />
<Layout
model ={model}
factory ={factory}
onModelChange ={saveLayout}
/>
Resources
Summary
FlexLayout provides IDE-quality docking layoutsModel-driven - Define layout as JSON, control programmaticallyPersistent - Save/restore user layouts easilyCustomizable - Custom tabs, borders, themesReact-friendly - Hooks, TypeScript supportPerfect for - IDEs, dashboards, admin panels, complex UIsTauri integration - Persist to backend, window-specific layouts
Related Skills When using FlexLayout-React, these skills enhance your workflow:
react-state-machine : XState v5 state machines and actor model for complex UI logic, multi-step forms, async flowsreact-hooks-composition : Advanced React hooks composition patterns for data-fetching and performancetanstack-query : Server-state management for React apps with caching and refetchingzustand : Lightweight client-state management alternative to Reduxnextjs : React framework with SSR, routing, and full-stack capabilitiestest-driven-development : TDD patterns for React components and hooks [Full documentation available in these skills if deployed in your bundle]
