-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a54bb39
commit e02ac57
Showing
1 changed file
with
41 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,54 @@ | ||
# Vite React Flow Template | ||
 | ||
|
||
This template creates a very basic [React Flow](https://reactflow.dev) app with [Vite](https://vite.dev). | ||
# React Flow starter (Vite + TS) | ||
|
||
## Get it! | ||
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. | ||
|
||
```sh | ||
npx degit xyflow/vite-react-flow-template app-name | ||
**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 | ||
``` | ||
|
||
## Installation | ||
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: | ||
|
||
```sh | ||
npm run install | ||
```bash | ||
npm install # or `pnpm install` or `yarn install` | ||
``` | ||
|
||
## Development | ||
Vite is a great development server and build tool that we recommend our users to | ||
use. You can start a development server with: | ||
|
||
```sh | ||
```bash | ||
npm run dev | ||
``` | ||
|
||
## Build | ||
While the development server is running, changes you make to the code will be | ||
automatically reflected in the browser! | ||
|
||
```sh | ||
npm run build | ||
``` | ||
## 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) |