Keyboard-driven mind mapping. Tab for children, Enter for siblings. That's it.
Creates hierarchical node trees you can visualize two ways - center (mind map) or top (org chart). Navigate with arrow keys, pan with middle mouse, export to PNG. Positions are calculated every frame, never stored.
# Install dependencies
npm install
# Run it
npm run dev
# Build for production
npm run build
- Tab: Create child node
- Enter: Create sibling node
- Shift+Space: Edit selected node
- Delete/Backspace: Delete node
- Arrow keys: Navigate between nodes (kinda broken)
- Escape: Clear selection
- Middle mouse drag: Pan around
- H: Toggle help
The UI has:
- Layout switcher (center/top view)
- Export PNG button
- Home button (centers on root)
- Hand/Select mode toggle
src/components/MapCanvas.tsx
: Main canvas and renderingsrc/stores/map-store.ts
: Node data and state (Zustand)src/utils/layout-engines.ts
: Position calculation algorithmssrc/hooks/use-keyboard-navigation.ts
: Keyboard event handlingsrc/types/index.ts
: TypeScript interfaces
-
Nodes only store structure:
{ id: string, text: string, parent: string | null, children: string[] }
-
Every render frame:
- Layout engine calculates all positions
- Canvas renders nodes at calculated positions
- Draws connections between parent/child
-
No position storage = no position bugs = instant layout switching
- Arrow key navigation logic is wonky between tiers
- No undo/redo (Ctrl+Z does nothing)
- Performance tanks after ~200 nodes
- Text editing is single-line only
- Export quality could be better
No config file yet. Canvas size is hardcoded to 1600x800. Colors are in the components. Deal with it.
Saves your map to localStorage automatically. Clear your browser data to reset.
Why positions aren't stored: Every other mind mapping tool stores x,y coordinates with nodes. This creates sync bugs, makes layout changes hard, and generally sucks. We calculate positions from structure every frame instead. Slightly less efficient, way more reliable.
Why only two layouts: Because 47 layout options is how you end up with Visio. Center for brainstorming, top for hierarchies. Done.
Why Zustand over Redux: Because Redux for a tree of nodes is like bringing a tank to a knife fight.
- Undo/redo stack
- Better arrow key navigation
- Collapsible nodes
- Multi-line text editing
- SVG export option
- Search nodes
- Better colors/themes