A free, open-source database schema designer that runs entirely in your browser.
Design your database visually, define relationships, and export production-ready SQL — no sign-up, no server, no data leaves your machine.
tabl.design is a visual, browser-based Entity Relationship Diagram (ERD) tool. Think of it like a lightweight, privacy-first alternative to tools like dbdiagram.io or Lucidchart — but all your data stays local in your browser via IndexedDB.
- 🗂️ Project-based workflow — Organise your schemas into separate projects
- 🧩 Visual canvas editor — Drag-and-drop tables powered by React Flow
- 🔗 Relationship modeling — Define
one-to-one,one-to-many, andmany-to-manyrelationships visually - 📋 Rich column editor — Set types, constraints (PK, FK, Unique, Nullable, Auto Increment), and default values
- 🎨 Table color coding — Assign accent colours to tables for visual clarity
- 📤 SQL Export — Generate SQL for PostgreSQL, MySQL, and Oracle with one click
- 💾 100% offline & private — All data is stored locally in IndexedDB (via Dexie.js), nothing is sent to any server
- 🌗 Light & Dark mode — Full theme support
Try it now at https://tabl.design — no account required.
- Node.js v18 or later
- npm (comes with Node.js)
# 1. Clone the repository
git clone https://github.com/LionsLeo/tabl.git
cd tabl
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devOpen http://localhost:3000 in your browser.
npm run buildThis outputs a fully static site to the ./out directory, ready to be served from any static host (GitHub Pages, Netlify, Cloudflare Pages, etc.).
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Static Export) |
| Language | TypeScript |
| Canvas / Diagramming | React Flow (@xyflow/react) |
| State Management | Zustand |
| Local Storage / DB | Dexie.js (IndexedDB wrapper) |
| UI Components | Radix UI + shadcn/ui |
| Styling | Tailwind CSS v4 |
| Icons | Lucide React |
| Theming | next-themes |
| Toasts | Sonner |
src/
├── app/
│ ├── page.tsx # Dashboard — list & manage projects
│ └── editor/ # Visual schema editor route
├── components/
│ ├── dashboard/ # ProjectCard, CreateProjectDialog
│ ├── editor/ # Canvas, Toolbar, TableNode, RelationshipEdge, PropertiesPanel, ExportDialog
│ └── ui/ # Reusable shadcn/ui components
├── lib/
│ ├── db.ts # Dexie (IndexedDB) setup
│ └── sql/ # SQL generators (PostgreSQL, MySQL, Oracle)
├── stores/
│ ├── project-store.ts # Zustand store for project CRUD
│ └── editor-store.ts # Zustand store for canvas state
└── types/
└── index.ts # Shared TypeScript types (Project, TableSchema, Column, Relationship)
INT · VARCHAR · TEXT · BOOLEAN · DATE · DATETIME · DECIMAL · FLOAT · UUID · JSON · ENUM
- One-to-One
- One-to-Many
- Many-to-Many
Contributions are welcome and appreciated! Here's how to get involved:
- Fork the repository
- Create a feature branch:
git checkout -b feat/your-feature-name - Commit your changes:
git commit -m "feat: add your feature" - Push to your branch:
git push origin feat/your-feature-name - Open a Pull Request against the
mainbranch
- Add more SQL dialects (SQLite, MSSQL)
- Import existing SQL schema to auto-generate diagrams
- Export diagram as PNG/SVG image
- Keyboard shortcuts
- Undo / Redo history
- Schema validation and linting
- Shareable diagram links (via URL encoding)
Please open an issue first for major changes so we can discuss the approach.
This project is licensed under the MIT License. See the LICENSE file for details.