We've put together this template to serve as a starting point for folks interested in React Flow. You can use this both as a base for your own React Flow applications, or for small experiments or bug reports.

TypeScript not your thing? We also have a vanilla JavaScript starter template, just for you!

You can get this template without forking/cloning the repo using degit:

npx degit xyflow/vite-react-flow-template your-app-name

The template contains mostly the minimum dependencies to get up and running, but also includes eslint and some additional rules to help you write React code that is less likely to run into issues:

npm install # or `pnpm install` or `yarn install`

Vite is a great development server and build tool that we recommend our users to use. You can start a development server with:

npm run dev

While the development server is running, changes you make to the code will be automatically reflected in the browser!

• Create a new custom node inside src/nodes/ (don't forget to export it from src/nodes/index.ts).
• Change how things look by overriding some of the built-in classes.
• Add a layouting library to position your nodes automatically

Links:

• React Flow - Docs
• React Flow - Discord

Learn:

• React Flow – Custom Nodes
• React Flow – Layouting