⭐ react-layout-engine-z

A constraint-based layout engine for React, inspired by AutoLayout and modern design tools.
Designed for complex layouts, dashboards, builders, and micro-frontend shells, where CSS flex/grid becomes hard to control. and debug.
Layout is treated as logic and data, not just styles.

LIVE EXAMPLE

✨ Features

• Constraint-based layout (fill, hug, fixed)

• Explicit layout primitives (Box, VStack, HStack)

• Predictable layout behavior (no CSS magic)

• Layout engine independent from CSS flex/grid

• Component-scoped layout tree

• Fully typed with TypeScript

• React 17+ compatible

• Tiny core, easy to extend (devtools, builder, adaptive layout)

📦 Installation

npm install react-layout-engine-z
# or
yarn add react-layout-engine-z

🚀 Usage

1️⃣ Basic Layout

import { Box, VStack } from "react-layout-engine-z"

export default function App() {
  return (
    <Box width={800} height={400}>
      <VStack gap={12} align="center">
        <Box width={200} height={40}>
          Header
        </Box>

        <Box width="fill" height={200}>
          Content
        </Box>

        <Box width={120} height={30}>
          Footer
        </Box>
      </VStack>
    </Box>
  )
}

2️⃣ Layout Rules

Size rules
width={200}          // fixed
width="fill"         // fill remaining space
width="hug"          // fit content
width={{ min: 120, max: 400 }}

Alignment
<VStack align="center" />
<HStack align="end" />

3️⃣ Stack Primitives

<VStack gap={8}>
  <Box height={40} />
  <Box height="fill" />
</VStack>

<HStack gap={12}>
  <Box width={120} />
  <Box width="fill" />
</HStack>

🧠 Mental Model

React Tree
 └─ Layout Nodes
     ├─ Size rules (fill / hug / fixed)
     ├─ Direction (vertical / horizontal)
     ├─ Alignment & gap
     └─ Computed layout (x, y, width, height)

• Each creates a layout node

• Nodes form a layout tree

• The engine:

  • Measures content (hug)

  • Resolves sizes (fill, min/max)

  • Computes positions

  • Applies layout in one batch

• Think of it as a mini layout engine running inside React.

🎯 When to Use

✅ Good fit for

• Dashboards

• Internal tools

• Layout builders / editors

• Design systems

• Micro-frontend shells

• Highly dynamic layouts

❌ Not recommended for

• Marketing pages

• Blogs

• Simple static layouts

• For those, CSS flex/grid is simpler and faster.

⚠️ Design Choices & Limitations

• Layout is component-scoped

• No global layout sharing

• Not a replacement for CSS inside components

• Focuses on layout structure, not styling

• Opinionated by design

📄 License

MIT