A high-performance, futuristic, and premium mind-mapping application built with React Flow, Zustand, and Immer. Designed with a glassmorphic aesthetic and geared towards speed and productivity.
- 🚀 High Performance: Built with
@xyflow/reactfor smooth interaction with large maps. - 🎨 Glassmorphic UI: A premium, futuristic look with light and dark mode support.
- 📂 Space Management: Organize your thoughts into multiple distinct workspaces (Spaces).
- ⚡ Keyboard Centric: Full support for keyboard shortcuts to maximize productivity.
- 🛠 Semantic Styling: Automatic node coloring based on branch or depth, with mood-based semantic icons.
- 🔄 Auto-Layout: Built-in Dagre layout engine for automatic organization (Horizontal, Vertical, Radial).
- 📝 Rich Editing: Tiptap-powered rich text editing within nodes.
- 💾 Offline Ready: Local-first persistence using IndexedDB (via
idb-keyval). - 📥 Import/Export: Save maps as JSON or export them as high-quality PNG images.
- 🧠 Brainstorming Mode: Rapidly add multiple topics in one go.
| Shortcut | Action |
|---|---|
Tab |
Add Child Node |
Enter |
Add Sibling Node |
Space / Double Click |
Edit Node Content |
Backspace / Delete |
Delete Node (and subtree) |
B |
Toggle Brainstorm Mode |
Cmd/Ctrl + Z |
Undo |
Cmd/Ctrl + Shift + Z |
Redo |
Arrow Keys |
Navigate between nodes |
- Framework: React 19
- Node Engine: React Flow (v12)
- State Management: Zustand with Immer and Zundo
- Styling: Vanilla CSS with futuristic glassmorphism tokens
- Icons: Lucide React
- Rich Text: Tiptap
- Layout: Dagre
- Persistence: IndexedDB via idb-keyval
- Clone the repository:
git clone https://github.com/coding-vasu/mind-map.git
- Install dependencies:
npm install
- Start the development server:
npm run dev
Contributions are welcome! Please read our CONTRIBUTING.md and CODE_OF_CONDUCT.md for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.