An interactive mind mapping tool built with React and React Flow, allowing you to:
- Create and edit nodes dynamically
- Add subtitles, tags, and colors to nodes
- Drag and connect nodes visually
- Double-click to edit titles and subtitles
- Use shift+enter to insert new lines in subtitles
- Change node colors from a sidebar
- Add tags and view them in both the node and sidebar
- Modern, clean UI with pastel themes and a grid background
✅ Double-click to edit node titles and subtitles ✅ Shift+Enter to add new lines in subtitles ✅ Auto-resizing subtitle textarea ✅ Sidebar for managing node colors and tags ✅ Predefined pastel color palette ✅ Tags appear on the node and in the sidebar ✅ Modern grid background and monospaced font ✅ Simple, clean React Flow canvas
- React
- React Flow (
react-flow-renderer) - CSS (with optional glassmorphism-style sidebar)
git clone https://github.com/yourusername/mindmap-editor.git
cd mindmap-editor
npm install
npm startThe app will start at http://localhost:3000.
- Double-click a node title or subtitle to edit.
- Press Enter to finish editing title.
- Shift+Enter to add new lines in subtitle.
- Add Node button or double-click empty canvas to add a new node.
- Change node colors using sidebar color palette.
- Add/remove tags by clicking
+Tagbutton or smallxnext to each tag.
- Export mind map as JSON or image
- Search and filter nodes
- Add node icons
- Support for collapsing/expanding branches
- Dark mode
MIT License