Idea Tree

An idea-tree mindmap webapp built with React + TypeScript + Vite.

Run

npm install
npm run dev      # dev server
npm run build    # typecheck + production build to dist/

Use

Selecting a node shows a floating action bar next to it (add child/sibling, copy, reorder, delete). The top toolbar holds page-level actions (new tree, paste, undo/redo, fit, export/import, clear).

• Tab: add a child to the selected node
• Enter: add a sibling (a new tree when a root is selected)
• + Tree toolbar button: start another independent tree on the same page
• Drag a root node: move that whole tree anywhere on the canvas
• F2 or double-click: edit a node
• Delete / Backspace: remove the selected subtree
• Space: collapse/expand (or click the badge on a node's right edge)
• Arrow keys: navigate between nodes
• Alt+↑ / Alt+↓: reorder the selected node among its siblings (or use the ↑/↓ toolbar buttons)
• Ctrl+C / Ctrl+V: copy the selected node's subtree, then paste it as a new tree on the page
• Ctrl+Z / Ctrl+Shift+Z: undo / redo
• F: fit the tree to the window; drag to pan, scroll to zoom

The toolbar's Clear button resets the tree to a single "idea" node, after a confirmation dialog (and still undoable with Ctrl+Z).

Everything autosaves to localStorage. The toolbar exports the page as JSON (a { text, children[], collapsed } tree, or an array of them when the page has several trees) or as a 2x PNG image, and imports either JSON shape back.

Structure

• src/layout.ts: pure tidy-tree layout (positions, edges, bounds)
• src/tree.ts: immutable tree helpers
• src/useIdeaTree.ts: document state: reducer + undo history + persistence
• src/components/MindMap.tsx: SVG canvas, pan/zoom, inline node editor
• src/components/Toolbar.tsx: actions bar
• src/App.tsx: wires state, keyboard shortcuts, import/export

License

MIT