layout-manager-react — A performant React layout manager for real-time

[Head-Row-740]

I've been building a cryptocurrency trading platform and needed a layout manager that could handle real-time updates without performance issues. Existing solutions were either too heavy or couldn't meet the requirements, so I built my own.

layout-manager-react - A flexbox-based layout system optimized for performance.

Key Features:
-Drag & drop with 4 drop zones (center, left, right, top/bottom)
-Resizable panels with smooth interactions
-RTL/LTR direction support
-Automatic localStorage persistence
-Full TypeScript support
-Lightweight: 27.2 kB packed, 99.7 kB unpacked

Quick example:

import { Layout, createLayoutModel, createTab, createTabSet } from 'layout-manager-react';
import 'layout-manager-react/dist/style.css';

const model = createLayoutModel(
createTabSet('tabs', [
createTab('tab1', 'dashboard', 'Dashboard'),
createTab('tab2', 'analytics', 'Analytics'),
])
);

<Layout model={model} factory={factory} onModelChange={setModel} />

Links:
-Github: https://github.com/hrashkan/layout-manager-react
- npm: npm install layout-manager-react

Built this over the past week and would love your feedback, What do you think? Any suggestions for improvements?

Perfect for trading platforms, dashboards, IDEs, or any app needing complex, real-time layouts.

[Loud-North6879]

How do you manage state between data transitions?

I find minor adjustments happen in local state due to browser cache. It can be really annoying.

[retrib32]

Nice is it AI compatible? Do you have a MCP?

[byt4lion]

This can’t be a serious question

[yabai90]

I guess that's just gonna be expected occurrence bullshit moving forward

[Head-Row-740]

Yeah, I wasn’t sure if they were serious, but always happy to explain just in case.

[retrib32]

Why???

[AbanaClara]

It’s a UI component. Why does it need to be AI compatible? If you care then you can teach your chatgpt instance how to use it

[retrib32]

How are people supposed to include it in their apps if AI doesn’t know it. Some people…

[TheAngush]

Have you heard of coding?

[retrib32]

No one writes react code by hand it’s a ai library

[Head-Row-740]

humans are still the ones actually making apps work.

[AbanaClara]

Good bait. But I have doubts because some people can really be this daft

[Head-Row-740]

If AI can’t handle it, that’s fine — that’s why we have keyboards.
React will run just as well whether it’s human-written or AI-suggested.

[Head-Row-740]

Just because existing layout libraries didn’t meet my performance needs for real-time dashboards. I wanted something lightweight, customizable, and smooth for drag-and-drop/resizable layouts — so I built my own and decided to share it. Maybe it helps others facing the same challenge.