Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xyflow/vite-react-flow-template
A vite template to get started with React Flow
https://github.com/xyflow/vite-react-flow-template
react-flow vite
Last synced: 1 day ago
JSON representation
A vite template to get started with React Flow
- Host: GitHub
- URL: https://github.com/xyflow/vite-react-flow-template
- Owner: xyflow
- License: mit
- Created: 2023-11-08T10:41:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-12T20:43:26.000Z (about 2 months ago)
- Last Synced: 2024-09-13T10:26:17.750Z (about 2 months ago)
- Topics: react-flow, vite
- Language: TypeScript
- Homepage: https://reactflow.dev
- Size: 166 KB
- Stars: 35
- Watchers: 5
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-react-flow-template - React Flow starter template. (Get Started / Templates)
- awesome-vite - vite-react-flow-template - React Flow starter template. (Get Started / Templates)
README
# React Flow starter (Vite + TS)
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!
## Getting up and running
You can get this template without forking/cloning the repo using `degit`:
```bash
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:
```bash
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:
```bash
npm run dev
```
While the development server is running, changes you make to the code will be
automatically reflected in the browser!
## Things to try:
- 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](https://reactflow.dev/learn/customization/theming#overriding-built-in-classes).
- Add a layouting library to [position your nodes automatically](https://reactflow.dev/learn/layouting/layouting)
## Resources
Links:
- [React Flow - Docs](https://reactflow.dev)
- [React Flow - Discord](https://discord.com/invite/Bqt6xrs)
Learn:
- [React Flow – Custom Nodes](https://reactflow.dev/learn/customization/custom-nodes)
- [React Flow – Layouting](https://reactflow.dev/learn/layouting/layouting)