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", 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.

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 for the development.

Installation

Before you start, you need to install the dependencies:

npm install

Dev Server

npm run dev

Build

npm run build