DEV3 Free Mind Map Maker — Source Code (React + Tailwind)

Source code of the DEV3 Mind Map Maker, a keyboard-first mind map editor with a balanced two-sided layout, colour per branch, undo and redo, and Markdown outline, JSON, PNG and SVG import and export.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/mind-map-maker shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Tab, Enter, Delete, F2, arrow and Space shortcuts with typing-to-edit and an inline text box
• Two-sided automatic layout that balances branches by height, with collapse and expand
• Markdown outline import (nested bullets, numbered lists and # headings) and export
• Undo and redo history built on a small reusable hook
• Pan, zoom and fit, with PNG and SVG export of the whole map

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jspdf.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• Up to 1000 ideas per map; text is a single line per idea and the map is stored in one browser only.