Mind Map

Interactive SVG node graph with drag, branch, and rename. Built with vibecoding in ~15 minutes.

Click a node to select · Drag to reposition · Double-click to rename

Built with this prompt

Build a Mind Map in React with:
- SVG-based canvas with a root node and branching children
- Nodes are draggable via mousedown/mousemove with the svg's coordinate system, clamped to the canvas bounds
- Click a node to select it; buttons appear to add a child or delete the node (except root)
- Double-click to rename a node inline; Enter or blur commits, Escape cancels
- Curved SVG paths connect each node to its parent
- Selection highlights the node with a purple ring
- Persist the node tree to localStorage on every change
- Export the tree as a pretty-printed JSON file via a Blob download
- Reset button restores a default starter tree
- Dark theme with purple accents