This mind map app was created as an example for the blog post "Tutorial: Build a Mind Map App with React Flow", which has a step-by-step guide on how to build a this mindmap (for intermediate or advanced React users). React Flow is a library for creating node-based UIs.
- Quickly create new nodes on drag + mouse-release
- Organize nodes by moving child notes with their parent
- Edit text in nodes
- Using Zustand for state management
- Custom node with an input field
- Using node area as a handle
- Dynamic width and auto focus
Demo: https://react-flow-mindmap.netlify.app
We are using Vite for the development.
Before you start, you need to install the dependencies:
npm installnpm run devnpm run build