https://github.com/biswa-ganguly/grid_maker
Grid Builder Pro is a powerful and intuitive visual grid layout builder built using React, Tailwind CSS, and React Grid Layout. It allows developers and designers to drag, resize, and arrange grid items, and then export the generated layout in either HTML or React JSX format using Tailwind utility classes.
https://github.com/biswa-ganguly/grid_maker
react-grid-layout reactjs resizeobserver tailwindcss typescript
Last synced: 2 months ago
JSON representation
Grid Builder Pro is a powerful and intuitive visual grid layout builder built using React, Tailwind CSS, and React Grid Layout. It allows developers and designers to drag, resize, and arrange grid items, and then export the generated layout in either HTML or React JSX format using Tailwind utility classes.
- Host: GitHub
- URL: https://github.com/biswa-ganguly/grid_maker
- Owner: biswa-ganguly
- Created: 2025-06-11T15:58:49.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-11T17:11:01.000Z (about 1 year ago)
- Last Synced: 2025-06-11T19:05:54.883Z (about 1 year ago)
- Topics: react-grid-layout, reactjs, resizeobserver, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://grid-maker-ten.vercel.app
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧱 Grid Builder Pro
**Grid Builder Pro** is a powerful and intuitive visual grid layout builder built using **React**, **Tailwind CSS**, and **React Grid Layout**. It allows developers and designers to drag, resize, and arrange grid items, and then export the generated layout in either HTML or React JSX format using Tailwind utility classes.
---
## 🚀 Features
- 🖱️ Drag-and-drop grid items
- ↔️ Resizable grid boxes
- 🗑️ Delete items by dragging into a trash bin
- 🧩 Dynamic code generation (HTML + Tailwind or React JSX + Tailwind)
- 📋 One-click copy to clipboard
- 🎨 Responsive and elegant UI
---
## 🛠️ Tech Stack
- **React**
- **TypeScript**
- **Tailwind CSS**
- **react-grid-layout**
- **ResizeObserver API**
---
## 📦 Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/biswa-ganguly/grid-builder-pro.git
cd grid-builder-pro