layout

KO | EN

gitlite — search

#hacktoberfest #ai #llm #rust #deep-learning #macos #nodejs #java #awesome #cli #vue #pytorch #mcp #open-source

(★ 58)

Responsive Layout Builder is a web tool that lets developers quickly create and test page layouts. You can split the screen into sections, adjust them, and instantly see the generated code in JSX + Tailwind or HTML + CSS.

layout Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Responsive Layout Builder

## Overview

The Responsive Layout Builder is a web tool that lets developers quickly create and test page layouts. You can split the screen into sections, adjust them, and instantly see the generated code in JSX + Tailwind or HTML + CSS. Future updates will add breakpoint-specific settings(sm, md, lg) so layouts adapt better on different devices.

https://github.com/user-attachments/assets/c8da0ab6-a0d2-4641-81ba-175b7bbf0998

## What It Can Do

- Interactive canvas with split panes (horizontal / vertical)

- Add a new pane by splitting the selected one

- Choose row or column orientation for the next split

- Resize panes by dragging the divider (live updates with proportional sizing)

- Double-click divider to reset split to 50/50

- Select panes (highlighted visually)

- Rearrange panes by dragging one pane onto another (swaps label and color)

- Delete a pane (parent collapses automatically, root is protected)

- Reset everything back to a single pane

- Real-time code generation:

- JSX + Tailwind: flex markup with flex ratios

- HTML + CSS: auto-generated class names with proportional flex values

- Copy generated code with one click

## How It Works

- State Tree (layoutSlice): A binary tree of LeafNode and SplitNode

- SplitNode: has orientation (row | col) and sizes [a,b]

- LeafNode: stores label and color (for visuals only)

- Actions: split, resize, rearrange, delete, reset

- Canvas Rendering: recursive components (SplitView and LeafView) render the layout

- Resizing: drag events adjust pane sizes (kept between 0.1–0.9)

- Rearranging: swaps colors/labels instead of restructuring nodes (simpler for now)

- Code Output: two code generators (JSX + HTML/CSS) read from the tree

## Running Locally

```bash
npm install
npm run dev
# open http://localhost:3000
```

The builder is at: http://localhost:3000/home

## Roadmap / TODO

- [ ] Undo / Redo history (e.g., last 50 actions)
- [ ] Breakpoint model (different layout for each screen size)

## Contributing

Contributions welcome! Please fork the repo and submit a PR.

Proposed flow:
1. Open an issue describing the enhancement.
2. Discuss and refine the approach.
3. Submit PR with clear before/after notes + screenshots.

---

### Quick Start (TL;DR)
```
npm i
npm run dev
open http://localhost:3000/home
```

Enjoy experimenting and feel free to suggest improvements!

layout

layout Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

layout

layout Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README