https://github.com/xyflow/react-flow-mindmap-app
A quick and organized mind map app built with React Flow. Follow the tutorial to learn how to build it yourself.
https://github.com/xyflow/react-flow-mindmap-app
mindmap react react-flow
Last synced: 12 months ago
JSON representation
A quick and organized mind map app built with React Flow. Follow the tutorial to learn how to build it yourself.
- Host: GitHub
- URL: https://github.com/xyflow/react-flow-mindmap-app
- Owner: xyflow
- Created: 2023-01-03T16:35:29.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-19T11:28:05.000Z (about 1 year ago)
- Last Synced: 2025-03-30T10:08:56.403Z (12 months ago)
- Topics: mindmap, react, react-flow
- Language: TypeScript
- Homepage: https://react-flow-mindmap.netlify.app/
- Size: 21.5 KB
- Stars: 97
- Watchers: 4
- Forks: 23
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Flow Mind Map App
This mind map app was created as an example for the blog post ["Tutorial: Build a Mind Map App with React Flow"](https://reactflow.dev/blog/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](https://reactflow.dev) is a library for creating node-based UIs.
### Features of the mindmap include
- Quickly create new nodes on drag + mouse-release
- Organize nodes by moving child notes with their parent
- Edit text in nodes
### The tutorial covers React Flow topics including
- 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
## Development
We are using [Vite](https://vitejs.dev/) for the development.
### Installation
Before you start, you need to install the dependencies:
```sh
npm install
```
### Dev Server
```sh
npm run dev
```
### Build
```sh
npm run build
```