├── reactflow-create-react-app-react17 ├── .npmrc ├── src │ ├── react-app-env.d.ts │ ├── App │ │ ├── App.css │ │ ├── App.test.tsx │ │ └── index.tsx │ ├── index.tsx │ ├── index.css │ ├── Flow │ │ ├── edges │ │ │ ├── index.ts │ │ │ └── ButtonEdge.tsx │ │ ├── nodes │ │ │ ├── PositionLoggerNode.tsx │ │ │ └── index.ts │ │ └── index.tsx │ └── setupTests.ts ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .gitignore ├── tsconfig.json ├── README.md └── package.json ├── reactflow-astro ├── src │ ├── env.d.ts │ ├── pages │ │ └── index.astro │ ├── components │ │ ├── edges │ │ │ ├── index.ts │ │ │ └── ButtonEdge.tsx │ │ ├── nodes │ │ │ ├── PositionLoggerNode.tsx │ │ │ └── index.ts │ │ └── Flow.tsx │ └── styles │ │ └── global.css ├── public │ └── favicon.ico ├── .vscode │ ├── extensions.json │ └── launch.json ├── tsconfig.json ├── astro.config.mjs ├── .gitignore ├── package.json └── README.md ├── reactflow-vite ├── src │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── edges │ │ ├── index.ts │ │ └── ButtonEdge.tsx │ ├── nodes │ │ ├── PositionLoggerNode.tsx │ │ └── index.ts │ └── App.tsx ├── public │ └── favicon.ico ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── tsconfig.json ├── package.json ├── LICENSE └── README.md ├── reactflow-nextjs ├── .eslintrc.json ├── public │ ├── favicon.ico │ └── vercel.svg ├── next.config.js ├── src │ ├── pages │ │ ├── _app.tsx │ │ └── index.tsx │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ └── components │ │ ├── edges │ │ ├── index.ts │ │ └── ButtonEdge.tsx │ │ ├── nodes │ │ ├── PositionLoggerNode.tsx │ │ └── index.ts │ │ └── Flow.tsx ├── .gitignore ├── README.md ├── tsconfig.json └── package.json ├── reactflow-remix ├── .gitignore ├── app │ ├── styles │ │ └── index.css │ ├── entry.client.tsx │ ├── root.tsx │ ├── routes │ │ └── _index.tsx │ ├── components │ │ ├── edges │ │ │ ├── index.ts │ │ │ └── ButtonEdge.tsx │ │ ├── nodes │ │ │ ├── PositionLoggerNode.tsx │ │ │ └── index.ts │ │ └── Flow.tsx │ └── entry.server.tsx ├── public │ └── favicon.ico ├── vite.config.ts ├── README.md ├── tsconfig.json ├── package.json └── .eslintrc.cjs ├── .github ├── FUNDING.yml └── dependabot.yml ├── reactflow-create-react-app ├── src │ ├── react-app-env.d.ts │ ├── App │ │ ├── App.css │ │ ├── App.test.tsx │ │ └── index.tsx │ ├── index.tsx │ ├── index.css │ ├── Flow │ │ ├── edges │ │ │ ├── index.ts │ │ │ └── ButtonEdge.tsx │ │ ├── nodes │ │ │ ├── PositionLoggerNode.tsx │ │ │ └── index.ts │ │ └── index.tsx │ └── setupTests.ts ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .gitignore ├── tsconfig.json ├── README.md └── package.json ├── reactflow-nextjs-app-router ├── .eslintrc.json ├── next.config.js ├── src │ ├── app │ │ ├── page.tsx │ │ ├── globals.css │ │ └── layout.tsx │ └── components │ │ ├── edges │ │ ├── index.ts │ │ └── ButtonEdge.tsx │ │ ├── nodes │ │ ├── PositionLoggerNode.tsx │ │ └── index.ts │ │ └── Flow.tsx ├── .gitignore ├── public │ ├── vercel.svg │ └── next.svg ├── package.json ├── tsconfig.json └── README.md ├── .gitignore ├── README.md └── LICENSE /reactflow-create-react-app-react17/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /reactflow-astro/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /reactflow-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /reactflow-nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /reactflow-remix/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | .env 6 | -------------------------------------------------------------------------------- /reactflow-remix/app/styles/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [wbkd] 4 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /reactflow-create-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reactflow-vite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-vite/public/favicon.ico -------------------------------------------------------------------------------- /reactflow-astro/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-astro/public/favicon.ico -------------------------------------------------------------------------------- /reactflow-nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-nextjs/public/favicon.ico -------------------------------------------------------------------------------- /reactflow-remix/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-remix/public/favicon.ico -------------------------------------------------------------------------------- /reactflow-astro/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /reactflow-create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /reactflow-create-react-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-create-react-app/public/logo192.png -------------------------------------------------------------------------------- /reactflow-create-react-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-create-react-app/public/logo512.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .cache 3 | node_modules 4 | dist 5 | .env 6 | .eslintcache 7 | .idea 8 | .log 9 | 10 | .rollup.cache 11 | 12 | .yalc 13 | yalc.lock -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-create-react-app-react17/public/favicon.ico -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-create-react-app-react17/public/logo192.png -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appleseed619/react_flow_sample/HEAD/reactflow-create-react-app-react17/public/logo512.png -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Flow from "../components/Flow"; 4 | 5 | export default async function App() { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /reactflow-nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /reactflow-astro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "compilerOptions": { 4 | "strictNullChecks": true, 5 | "jsx": "react-jsx", 6 | "jsxImportSource": "react" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /reactflow-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /reactflow-astro/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import react from '@astrojs/react'; 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | integrations: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /reactflow-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | } 6 | 7 | html, 8 | body, 9 | #root { 10 | height: 100%; 11 | margin: 0; 12 | } 13 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import type { AppProps } from "next/app"; 2 | 3 | import "../styles/globals.css"; 4 | 5 | function MyApp({ Component, pageProps }: AppProps) { 6 | return ; 7 | } 8 | 9 | export default MyApp; 10 | -------------------------------------------------------------------------------- /reactflow-astro/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /reactflow-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/App/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .App-header { 8 | height: 40px; 9 | display: flex; 10 | align-items: center; 11 | border-bottom: 1px solid #eee; 12 | padding: 0 1rem; 13 | } 14 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .header { 8 | height: 40px; 9 | display: flex; 10 | align-items: center; 11 | border-bottom: 1px solid #eee; 12 | padding: 0 1rem; 13 | } 14 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/App/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .App-header { 8 | height: 40px; 9 | display: flex; 10 | align-items: center; 11 | border-bottom: 1px solid #eee; 12 | padding: 0 1rem; 13 | } 14 | -------------------------------------------------------------------------------- /reactflow-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | import './index.css'; 7 | 8 | ReactDOM.createRoot(document.getElementById('root')!).render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/App/App.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | 3 | import App from '.'; 4 | 5 | test('renders header', () => { 6 | render(); 7 | const headerElement = screen.getByText(/React Flow - CRA Example/i); 8 | expect(headerElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | import "./index.css"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") as HTMLElement 13 | ); 14 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/App/index.tsx: -------------------------------------------------------------------------------- 1 | import Flow from '../Flow'; 2 | 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
React Flow - CRA Example
9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/App/App.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | 3 | import App from '.'; 4 | 5 | test('renders header', () => { 6 | render(); 7 | const headerElement = screen.getByText(/React Flow - CRA Example/i); 8 | expect(headerElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/App/index.tsx: -------------------------------------------------------------------------------- 1 | import Flow from '../Flow'; 2 | 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
React Flow - CRA Example
9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /reactflow-astro/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /reactflow-remix/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { vitePlugin as remix } from "@remix-run/dev"; 2 | import { installGlobals } from "@remix-run/node"; 3 | import { defineConfig } from "vite"; 4 | import tsconfigPaths from "vite-tsconfig-paths"; 5 | 6 | installGlobals(); 7 | 8 | export default defineConfig({ 9 | plugins: [remix(), tsconfigPaths()], 10 | }); 11 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | import './index.css'; 7 | 8 | const root = createRoot(document.getElementById('root') as HTMLElement); 9 | 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /reactflow-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | body, 11 | html, 12 | #root { 13 | height: 100%; 14 | } 15 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | body, 11 | html, 12 | #root { 13 | height: 100%; 14 | } 15 | -------------------------------------------------------------------------------- /reactflow-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Flow starter (Vite + TS) 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /reactflow-create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | html, 10 | body, 11 | #__next { 12 | height: 100%; 13 | } 14 | 15 | a { 16 | color: inherit; 17 | text-decoration: none; 18 | } 19 | 20 | * { 21 | box-sizing: border-box; 22 | } 23 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/app/globals.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --max-width: 1100px; 3 | --font-mono: ui-monospace, Menlo, Monaco; 4 | 5 | --foreground-rgb: 0, 0, 0; 6 | --background-start-rgb: 214, 219, 220; 7 | --background-end-rgb: 255, 255, 255; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | html, 17 | body { 18 | height: 100%; 19 | max-width: 100vw; 20 | overflow-x: hidden; 21 | } 22 | 23 | a { 24 | color: inherit; 25 | text-decoration: none; 26 | } 27 | -------------------------------------------------------------------------------- /reactflow-vite/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only) 2 | 3 | # React Flow Example Apps 4 | 5 | This repo contains starting points / references for projects that use [React Flow](https://reactflow.dev). 6 | 7 | - [Create React App Example](/reactflow-create-react-app) 8 | - [Next.js Example](/reactflow-nextjs) 9 | - [Remix Example](/reactflow-remix) 10 | 11 | Please refer to the [React Flow Docs](https://reactflow.dev/learn) for more information about how to use React Flow. 12 | -------------------------------------------------------------------------------- /reactflow-nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css' 2 | import type { Metadata } from 'next' 3 | import { Inter } from 'next/font/google' 4 | 5 | const inter = Inter({ subsets: ['latin'] }) 6 | 7 | export const metadata: Metadata = { 8 | title: 'Create Next App', 9 | description: 'Generated by create next app', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /reactflow-astro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactflow-astro", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@xyflow/react": "^12.0.0", 14 | "astro": "^4.5.3", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@astrojs/react": "^3.1.0", 20 | "@types/react": "^18.2.65", 21 | "@types/react-dom": "^18.2.22" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /reactflow-astro/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Flow from "../components/Flow.tsx"; 3 | 4 | import "../styles/global.css"; 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Astro 14 | 15 | 16 |
17 |
React Flow - Astro Example
18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /reactflow-create-react-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /reactflow-nextjs/README.md: -------------------------------------------------------------------------------- 1 | # React Flow Example App - Next.js 2 | 3 | This app was bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | ### Start Dev Server 12 | 13 | ```sh 14 | npm run dev 15 | ``` 16 | 17 | Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 18 | 19 | ### Build 20 | 21 | ```sh 22 | npm run build 23 | ``` 24 | 25 | ## Next.js Docs 26 | 27 | Please refer to the [Next.js docs](https://nextjs.org/docs) for more information. 28 | -------------------------------------------------------------------------------- /reactflow-create-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /reactflow-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "baseUrl": "./src" 18 | }, 19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactflow-next-app-router", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@xyflow/react": "^12.0.0", 13 | "next": "14.1.3", 14 | "react": "^18", 15 | "react-dom": "^18" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "eslint": "^8", 22 | "eslint-config-next": "14.1.3", 23 | "typescript": "^5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /reactflow-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactflow-next", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@xyflow/react": "^12.0.0", 13 | "next": "^14.1.3", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "20.11.27", 19 | "@types/react": "18.2.65", 20 | "@types/react-dom": "18.2.22", 21 | "eslint": "8.57.0", 22 | "eslint-config-next": "14.1.3", 23 | "typescript": "5.4.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /reactflow-remix/app/entry.client.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * By default, Remix will handle hydrating your app on the client for you. 3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ 4 | * For more information, see https://remix.run/file-conventions/entry.client 5 | */ 6 | 7 | import { RemixBrowser } from "@remix-run/react"; 8 | import { startTransition, StrictMode } from "react"; 9 | import { hydrateRoot } from "react-dom/client"; 10 | 11 | startTransition(() => { 12 | hydrateRoot( 13 | document, 14 | 15 | 16 | 17 | ); 18 | }); 19 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # configuration options: 2 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file 3 | 4 | version: 2 5 | updates: 6 | - package-ecosystem: 'npm' 7 | directories: 8 | - '/reactflow-astro' 9 | - '/reactflow-create-react-app' 10 | - '/reactflow-create-react-app-react17' 11 | - '/reactflow-nextjs' 12 | - '/reactflow-nextjs-app-router' 13 | - '/reactflow-remix' 14 | - '/reactflow-vite' 15 | schedule: 16 | interval: 'weekly' 17 | allow: 18 | - dependency-name: '@xyflow/react' 19 | - dependency-name: 'reactflow' 20 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from 'next'; 2 | import Head from 'next/head'; 3 | 4 | import Flow from 'components/Flow'; 5 | 6 | import styles from '../styles/Home.module.css'; 7 | 8 | const Home: NextPage = () => { 9 | return ( 10 |
11 | 12 | Create Next App 13 | 14 | 15 | 16 | 17 |
React Flow - Next.js Example
18 | 19 |
20 | ); 21 | }; 22 | 23 | export default Home; 24 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /reactflow-remix/app/root.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Links, 3 | Meta, 4 | Outlet, 5 | Scripts, 6 | ScrollRestoration, 7 | } from "@remix-run/react"; 8 | 9 | export function Layout({ children }: { children: React.ReactNode }) { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {children} 20 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default function App() { 28 | return ; 29 | } 30 | -------------------------------------------------------------------------------- /reactflow-remix/app/routes/_index.tsx: -------------------------------------------------------------------------------- 1 | import type { MetaFunction } from "@remix-run/node"; 2 | 3 | import Flow from "../components/Flow"; 4 | 5 | import reactFlowStyles from "@xyflow/react/dist/style.css?url"; 6 | import style from "../styles/index.css?url"; 7 | 8 | export const meta: MetaFunction = () => { 9 | return [ 10 | { title: "React Flow - Remix Example" }, 11 | { name: "description", content: "Welcome to Remix & React Flow!" }, 12 | ]; 13 | }; 14 | 15 | export default function Index() { 16 | return ; 17 | } 18 | 19 | export function links() { 20 | return [ 21 | { rel: "stylesheet", href: reactFlowStyles }, 22 | { rel: "stylesheet", href: style }, 23 | ]; 24 | } 25 | -------------------------------------------------------------------------------- /reactflow-vite/src/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-astro/src/components/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/components/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-remix/app/components/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/Flow/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/Flow/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/components/edges/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInEdge, Edge, EdgeTypes } from "@xyflow/react"; 2 | 3 | import ButtonEdge, { type ButtonEdge as ButtonEdgeType } from "./ButtonEdge"; 4 | 5 | export const initialEdges = [ 6 | { id: "a->c", source: "a", target: "c", animated: true }, 7 | { id: "b->d", source: "b", target: "d", type: "button-edge" }, 8 | { id: "c->d", source: "c", target: "d", animated: true }, 9 | ] satisfies Edge[]; 10 | 11 | export const edgeTypes = { 12 | // Add your custom edge types here! 13 | "button-edge": ButtonEdge, 14 | } satisfies EdgeTypes; 15 | 16 | // Append the types of you custom edges to the BuiltInEdge type 17 | export type CustomEdgeType = BuiltInEdge | ButtonEdgeType; 18 | -------------------------------------------------------------------------------- /reactflow-create-react-app/README.md: -------------------------------------------------------------------------------- 1 | # React Flow Example App - Create React App 2 | 3 | This app was bootstrapped with [`create-react-app`](https://github.com/facebook/create-react-app). 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | ### Start Dev Server 12 | 13 | ```sh 14 | npm start 15 | ``` 16 | 17 | Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 18 | 19 | ### Run Tests 20 | 21 | ```sh 22 | npm test 23 | ``` 24 | 25 | ### Build 26 | 27 | ```sh 28 | npm run build 29 | ``` 30 | 31 | ## Create React App Docs 32 | 33 | Please refer to the [Create React App docs](https://facebook.github.io/create-react-app/docs/getting-started) for more information. 34 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /reactflow-astro/src/styles/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | } 7 | 8 | html, 9 | body { 10 | height: 100%; 11 | } 12 | 13 | .app { 14 | height: 100%; 15 | display: flex; 16 | flex-direction: column; 17 | } 18 | 19 | .app-header { 20 | height: 40px; 21 | display: flex; 22 | align-items: center; 23 | border-bottom: 1px solid #eee; 24 | padding: 0 1rem; 25 | } 26 | 27 | .react-flow { 28 | font-size: 12px; 29 | } 30 | 31 | .react-flow__node-custom { 32 | border: 1px solid #555; 33 | padding: 10px; 34 | width: 200px; 35 | border-radius: 5px; 36 | } 37 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/README.md: -------------------------------------------------------------------------------- 1 | # React Flow Example App - Create React App 2 | 3 | This app was bootstrapped with [`create-react-app`](https://github.com/facebook/create-react-app). 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | ### Start Dev Server 12 | 13 | ```sh 14 | npm start 15 | ``` 16 | 17 | Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 18 | 19 | ### Run Tests 20 | 21 | ```sh 22 | npm test 23 | ``` 24 | 25 | ### Build 26 | 27 | ```sh 28 | npm run build 29 | ``` 30 | 31 | ## Create React App Docs 32 | 33 | Please refer to the [Create React App docs](https://facebook.github.io/create-react-app/docs/getting-started) for more information. 34 | -------------------------------------------------------------------------------- /reactflow-remix/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Remix + Vite! 2 | 3 | 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features. 4 | 5 | ## Development 6 | 7 | Run the Vite dev server: 8 | 9 | ```shellscript 10 | npm run dev 11 | ``` 12 | 13 | ## Deployment 14 | 15 | First, build your app for production: 16 | 17 | ```sh 18 | npm run build 19 | ``` 20 | 21 | Then run the app in production mode: 22 | 23 | ```sh 24 | npm start 25 | ``` 26 | 27 | Now you'll need to pick a host to deploy it to. 28 | 29 | ### DIY 30 | 31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready. 32 | 33 | Make sure to deploy the output of `npm run build` 34 | 35 | - `build/server` 36 | - `build/client` 37 | -------------------------------------------------------------------------------- /reactflow-remix/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "**/*.ts", 4 | "**/*.tsx", 5 | "**/.server/**/*.ts", 6 | "**/.server/**/*.tsx", 7 | "**/.client/**/*.ts", 8 | "**/.client/**/*.tsx" 9 | ], 10 | "compilerOptions": { 11 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 12 | "types": ["@remix-run/node", "vite/client"], 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "jsx": "react-jsx", 16 | "module": "ESNext", 17 | "moduleResolution": "Bundler", 18 | "resolveJsonModule": true, 19 | "target": "ES2022", 20 | "strict": true, 21 | "allowJs": true, 22 | "skipLibCheck": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "baseUrl": ".", 25 | "paths": { 26 | "~/*": ["./app/*"] 27 | }, 28 | 29 | // Vite takes care of building everything, not tsc. 30 | "noEmit": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /reactflow-vite/src/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-flow-template", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@xyflow/react": "^12.0.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "license": "MIT", 17 | "devDependencies": { 18 | "@types/react": "^18.2.65", 19 | "@types/react-dom": "^18.2.22", 20 | "@typescript-eslint/eslint-plugin": "^7.2.0", 21 | "@typescript-eslint/parser": "^7.2.0", 22 | "@vitejs/plugin-react": "^4.2.1", 23 | "eslint": "^8.57.0", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.6", 26 | "typescript": "^5.4.2", 27 | "vite": "^5.1.6" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /reactflow-astro/src/components/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/components/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-remix/app/components/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/Flow/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/Flow/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/components/nodes/PositionLoggerNode.tsx: -------------------------------------------------------------------------------- 1 | import type { Node, NodeProps } from "@xyflow/react"; 2 | import { Handle, Position } from "@xyflow/react"; 3 | 4 | export type PositionLoggerNodeData = { 5 | label?: string; 6 | }; 7 | 8 | export type PositionLoggerNode = Node; 9 | 10 | export default function PositionLoggerNode({ 11 | positionAbsoluteX, 12 | positionAbsoluteY, 13 | data, 14 | }: NodeProps) { 15 | const x = `${Math.round(positionAbsoluteX)}px`; 16 | const y = `${Math.round(positionAbsoluteY)}px`; 17 | 18 | return ( 19 | // We add this class to use the same styles as React Flow's default nodes. 20 |
21 | {data.label &&
{data.label}
} 22 | 23 |
24 | {x} {y} 25 |
26 | 27 | 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /reactflow-vite/src/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from "@xyflow/react"; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from "./PositionLoggerNode"; 5 | 6 | export const initialNodes = [ 7 | { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } }, 8 | { 9 | id: "b", 10 | type: "position-logger", 11 | position: { x: -100, y: 100 }, 12 | data: { label: "drag me!" }, 13 | }, 14 | { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } }, 15 | { 16 | id: "d", 17 | type: "output", 18 | position: { x: 0, y: 200 }, 19 | data: { label: "with React Flow" }, 20 | }, 21 | ] satisfies Node[]; 22 | 23 | export const nodeTypes = { 24 | "position-logger": PositionLoggerNode, 25 | // Add any of your custom nodes here! 26 | } satisfies NodeTypes; 27 | 28 | // Append the types of you custom edges to the BuiltInNode type 29 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 30 | -------------------------------------------------------------------------------- /reactflow-astro/src/components/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from "@xyflow/react"; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from "./PositionLoggerNode"; 5 | 6 | export const initialNodes = [ 7 | { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } }, 8 | { 9 | id: "b", 10 | type: "position-logger", 11 | position: { x: -100, y: 100 }, 12 | data: { label: "drag me!" }, 13 | }, 14 | { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } }, 15 | { 16 | id: "d", 17 | type: "output", 18 | position: { x: 0, y: 200 }, 19 | data: { label: "with React Flow" }, 20 | }, 21 | ] satisfies Node[]; 22 | 23 | export const nodeTypes = { 24 | "position-logger": PositionLoggerNode, 25 | // Add any of your custom nodes here! 26 | } satisfies NodeTypes; 27 | 28 | // Append the types of you custom edges to the BuiltInNode type 29 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 30 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/components/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from "@xyflow/react"; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from "./PositionLoggerNode"; 5 | 6 | export const initialNodes = [ 7 | { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } }, 8 | { 9 | id: "b", 10 | type: "position-logger", 11 | position: { x: -100, y: 100 }, 12 | data: { label: "drag me!" }, 13 | }, 14 | { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } }, 15 | { 16 | id: "d", 17 | type: "output", 18 | position: { x: 0, y: 200 }, 19 | data: { label: "with React Flow" }, 20 | }, 21 | ] satisfies Node[]; 22 | 23 | export const nodeTypes = { 24 | "position-logger": PositionLoggerNode, 25 | // Add any of your custom nodes here! 26 | } satisfies NodeTypes; 27 | 28 | // Append the types of you custom edges to the BuiltInNode type 29 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 30 | -------------------------------------------------------------------------------- /reactflow-remix/app/components/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from "@xyflow/react"; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from "./PositionLoggerNode"; 5 | 6 | export const initialNodes = [ 7 | { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } }, 8 | { 9 | id: "b", 10 | type: "position-logger", 11 | position: { x: -100, y: 100 }, 12 | data: { label: "drag me!" }, 13 | }, 14 | { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } }, 15 | { 16 | id: "d", 17 | type: "output", 18 | position: { x: 0, y: 200 }, 19 | data: { label: "with React Flow" }, 20 | }, 21 | ] satisfies Node[]; 22 | 23 | export const nodeTypes = { 24 | "position-logger": PositionLoggerNode, 25 | // Add any of your custom nodes here! 26 | } satisfies NodeTypes; 27 | 28 | // Append the types of you custom edges to the BuiltInNode type 29 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 30 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/Flow/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from "@xyflow/react"; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from "./PositionLoggerNode"; 5 | 6 | export const initialNodes = [ 7 | { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } }, 8 | { 9 | id: "b", 10 | type: "position-logger", 11 | position: { x: -100, y: 100 }, 12 | data: { label: "drag me!" }, 13 | }, 14 | { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } }, 15 | { 16 | id: "d", 17 | type: "output", 18 | position: { x: 0, y: 200 }, 19 | data: { label: "with React Flow" }, 20 | }, 21 | ] satisfies Node[]; 22 | 23 | export const nodeTypes = { 24 | "position-logger": PositionLoggerNode, 25 | // Add any of your custom nodes here! 26 | } satisfies NodeTypes; 27 | 28 | // Append the types of you custom edges to the BuiltInNode type 29 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 30 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/Flow/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from "@xyflow/react"; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from "./PositionLoggerNode"; 5 | 6 | export const initialNodes = [ 7 | { id: "a", type: "input", position: { x: 0, y: 0 }, data: { label: "wire" } }, 8 | { 9 | id: "b", 10 | type: "position-logger", 11 | position: { x: -100, y: 100 }, 12 | data: { label: "drag me!" }, 13 | }, 14 | { id: "c", position: { x: 100, y: 100 }, data: { label: "your ideas" } }, 15 | { 16 | id: "d", 17 | type: "output", 18 | position: { x: 0, y: 200 }, 19 | data: { label: "with React Flow" }, 20 | }, 21 | ] satisfies Node[]; 22 | 23 | export const nodeTypes = { 24 | "position-logger": PositionLoggerNode, 25 | // Add any of your custom nodes here! 26 | } satisfies NodeTypes; 27 | 28 | // Append the types of you custom edges to the BuiltInNode type 29 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 30 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/components/nodes/index.ts: -------------------------------------------------------------------------------- 1 | import type { BuiltInNode, Node, NodeTypes } from '@xyflow/react'; 2 | import PositionLoggerNode, { 3 | type PositionLoggerNode as PositionLoggerNodeType, 4 | } from './PositionLoggerNode'; 5 | 6 | export const initialNodes = [ 7 | { 8 | id: 'a', 9 | type: 'input', 10 | position: { x: 0, y: 0 }, 11 | data: { label: 'wire' }, 12 | }, 13 | { 14 | id: 'b', 15 | type: 'position-logger', 16 | position: { x: -100, y: 100 }, 17 | data: { label: 'drag me!' }, 18 | }, 19 | { id: 'c', position: { x: 100, y: 100 }, data: { label: 'your ideas' } }, 20 | { 21 | id: 'd', 22 | type: 'output', 23 | position: { x: 0, y: 200 }, 24 | data: { label: 'with React Flow' }, 25 | }, 26 | ] satisfies Node[]; 27 | 28 | export const nodeTypes = { 29 | 'position-logger': PositionLoggerNode, 30 | // Add any of your custom nodes here! 31 | } satisfies NodeTypes; 32 | 33 | // Append the types of you custom edges to the BuiltInNode type 34 | export type CustomNodeType = BuiltInNode | PositionLoggerNodeType; 35 | -------------------------------------------------------------------------------- /reactflow-nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 webkid 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /reactflow-vite/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 webkid GmbH 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /reactflow-remix/app/components/Flow.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 14 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 15 | 16 | export default function App() { 17 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 18 | const [edges, setEdges, onEdgesChange] = 19 | useEdgesState(initialEdges); 20 | const onConnect: OnConnect = useCallback( 21 | (connection) => setEdges((edges) => addEdge(connection, edges)), 22 | [setEdges] 23 | ); 24 | 25 | return ( 26 | 27 | nodes={nodes} 28 | nodeTypes={nodeTypes} 29 | onNodesChange={onNodesChange} 30 | edges={edges} 31 | edgeTypes={edgeTypes} 32 | onEdgesChange={onEdgesChange} 33 | onConnect={onConnect} 34 | fitView 35 | > 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /reactflow-vite/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import "@xyflow/react/dist/style.css"; 14 | 15 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 16 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 17 | 18 | export default function App() { 19 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 20 | const [edges, setEdges, onEdgesChange] = 21 | useEdgesState(initialEdges); 22 | const onConnect: OnConnect = useCallback( 23 | (connection) => setEdges((edges) => addEdge(connection, edges)), 24 | [setEdges] 25 | ); 26 | 27 | return ( 28 | 29 | nodes={nodes} 30 | nodeTypes={nodeTypes} 31 | onNodesChange={onNodesChange} 32 | edges={edges} 33 | edgeTypes={edgeTypes} 34 | onEdgesChange={onEdgesChange} 35 | onConnect={onConnect} 36 | fitView 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /reactflow-astro/src/components/Flow.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import "@xyflow/react/dist/style.css"; 14 | 15 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 16 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 17 | 18 | export default function App() { 19 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 20 | const [edges, setEdges, onEdgesChange] = 21 | useEdgesState(initialEdges); 22 | const onConnect: OnConnect = useCallback( 23 | (connection) => setEdges((edges) => addEdge(connection, edges)), 24 | [setEdges] 25 | ); 26 | 27 | return ( 28 | 29 | nodes={nodes} 30 | nodeTypes={nodeTypes} 31 | onNodesChange={onNodesChange} 32 | edges={edges} 33 | edgeTypes={edgeTypes} 34 | onEdgesChange={onEdgesChange} 35 | onConnect={onConnect} 36 | fitView 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/components/Flow.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import "@xyflow/react/dist/style.css"; 14 | 15 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 16 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 17 | 18 | export default function App() { 19 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 20 | const [edges, setEdges, onEdgesChange] = 21 | useEdgesState(initialEdges); 22 | const onConnect: OnConnect = useCallback( 23 | (connection) => setEdges((edges) => addEdge(connection, edges)), 24 | [setEdges] 25 | ); 26 | 27 | return ( 28 | 29 | nodes={nodes} 30 | nodeTypes={nodeTypes} 31 | onNodesChange={onNodesChange} 32 | edges={edges} 33 | edgeTypes={edgeTypes} 34 | onEdgesChange={onEdgesChange} 35 | onConnect={onConnect} 36 | fitView 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/Flow/index.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import "@xyflow/react/dist/style.css"; 14 | 15 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 16 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 17 | 18 | export default function App() { 19 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 20 | const [edges, setEdges, onEdgesChange] = 21 | useEdgesState(initialEdges); 22 | const onConnect: OnConnect = useCallback( 23 | (connection) => setEdges((edges) => addEdge(connection, edges)), 24 | [setEdges] 25 | ); 26 | 27 | return ( 28 | 29 | nodes={nodes} 30 | nodeTypes={nodeTypes} 31 | onNodesChange={onNodesChange} 32 | edges={edges} 33 | edgeTypes={edgeTypes} 34 | onEdgesChange={onEdgesChange} 35 | onConnect={onConnect} 36 | fitView 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/Flow/index.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import "@xyflow/react/dist/style.css"; 14 | 15 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 16 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 17 | 18 | export default function App() { 19 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 20 | const [edges, setEdges, onEdgesChange] = 21 | useEdgesState(initialEdges); 22 | const onConnect: OnConnect = useCallback( 23 | (connection) => setEdges((edges) => addEdge(connection, edges)), 24 | [setEdges] 25 | ); 26 | 27 | return ( 28 | 29 | nodes={nodes} 30 | nodeTypes={nodeTypes} 31 | onNodesChange={onNodesChange} 32 | edges={edges} 33 | edgeTypes={edgeTypes} 34 | onEdgesChange={onEdgesChange} 35 | onConnect={onConnect} 36 | fitView 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/components/Flow.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react"; 2 | import { 3 | Background, 4 | Controls, 5 | MiniMap, 6 | ReactFlow, 7 | addEdge, 8 | useNodesState, 9 | useEdgesState, 10 | type OnConnect, 11 | } from "@xyflow/react"; 12 | 13 | import "@xyflow/react/dist/style.css"; 14 | 15 | import { initialNodes, nodeTypes, type CustomNodeType } from "./nodes"; 16 | import { initialEdges, edgeTypes, type CustomEdgeType } from "./edges"; 17 | 18 | export default function App() { 19 | const [nodes, , onNodesChange] = useNodesState(initialNodes); 20 | const [edges, setEdges, onEdgesChange] = 21 | useEdgesState(initialEdges); 22 | const onConnect: OnConnect = useCallback( 23 | (connection) => setEdges((edges) => addEdge(connection, edges)), 24 | [setEdges] 25 | ); 26 | 27 | return ( 28 | 29 | nodes={nodes} 30 | nodeTypes={nodeTypes} 31 | onNodesChange={onNodesChange} 32 | edges={edges} 33 | edgeTypes={edgeTypes} 34 | onEdgesChange={onEdgesChange} 35 | onConnect={onConnect} 36 | fitView 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /reactflow-create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactflow-cra", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^6.4.2", 7 | "@testing-library/react": "^14.2.1", 8 | "@testing-library/user-event": "^14.5.2", 9 | "@types/jest": "^29.5.12", 10 | "@types/node": "^20.11.27", 11 | "@types/react": "^18.2.65", 12 | "@types/react-dom": "^18.2.22", 13 | "@xyflow/react": "^12.0.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-scripts": "5.0.1", 17 | "typescript": "^5.4.2", 18 | "web-vitals": "^3.5.2" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "@juggle/resize-observer": "^3.4.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactflow-cra-17", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reactflow/core": "^11.10.4", 7 | "@testing-library/jest-dom": "^6.4.2", 8 | "@testing-library/react": "^14.2.1", 9 | "@testing-library/user-event": "^14.5.2", 10 | "@types/jest": "^29.5.12", 11 | "@types/node": "^20.11.27", 12 | "@types/react": "^17.0.0", 13 | "@types/react-dom": "^17.0.0", 14 | "@xyflow/react": "^12.0.0", 15 | "react": "^17.0.0", 16 | "react-dom": "^17.0.0", 17 | "react-scripts": "5.0.1", 18 | "typescript": "^5.4.2", 19 | "web-vitals": "^3.5.2" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "@juggle/resize-observer": "^3.4.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /reactflow-remix/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "remix", 3 | "private": true, 4 | "sideEffects": false, 5 | "type": "module", 6 | "scripts": { 7 | "build": "remix vite:build", 8 | "dev": "remix vite:dev", 9 | "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", 10 | "start": "remix-serve ./build/server/index.js", 11 | "typecheck": "tsc" 12 | }, 13 | "dependencies": { 14 | "@remix-run/node": "^2.8.1", 15 | "@remix-run/react": "^2.8.1", 16 | "@remix-run/serve": "^2.8.1", 17 | "@xyflow/react": "^12.0.0", 18 | "isbot": "^4.1.0", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0" 21 | }, 22 | "devDependencies": { 23 | "@remix-run/dev": "^2.8.1", 24 | "@types/react": "^18.2.20", 25 | "@types/react-dom": "^18.2.7", 26 | "@typescript-eslint/eslint-plugin": "^6.7.4", 27 | "@typescript-eslint/parser": "^6.7.4", 28 | "eslint": "^8.38.0", 29 | "eslint-import-resolver-typescript": "^3.6.1", 30 | "eslint-plugin-import": "^2.28.1", 31 | "eslint-plugin-jsx-a11y": "^6.7.1", 32 | "eslint-plugin-react": "^7.33.2", 33 | "eslint-plugin-react-hooks": "^4.6.0", 34 | "typescript": "^5.1.6", 35 | "vite": "^5.1.0", 36 | "vite-tsconfig-paths": "^4.2.1" 37 | }, 38 | "engines": { 39 | "node": ">=18.0.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | 7 | // To make sure that the tests are working, it's important that you are using 8 | // this implementation of ResizeObserver and DOMMatrixReadOnly 9 | class ResizeObserver { 10 | callback: globalThis.ResizeObserverCallback; 11 | 12 | constructor(callback: globalThis.ResizeObserverCallback) { 13 | this.callback = callback; 14 | } 15 | 16 | observe(target: Element) { 17 | this.callback([{ target } as globalThis.ResizeObserverEntry], this); 18 | } 19 | 20 | unobserve() {} 21 | 22 | disconnect() {} 23 | } 24 | 25 | global.ResizeObserver = ResizeObserver; 26 | 27 | // we only use the scale of the matrix (`m22`), that's why we can use this simple mock 28 | class DOMMatrixReadOnly { 29 | m22: number; 30 | constructor(transform: string) { 31 | const scale = transform?.match(/scale\(([1-9.])\)/)?.[1]; 32 | this.m22 = scale !== undefined ? +scale : 1; 33 | } 34 | } 35 | // @ts-ignore 36 | global.DOMMatrixReadOnly = DOMMatrixReadOnly; 37 | 38 | // used for measuring nodes 39 | Object.defineProperties(global.HTMLElement.prototype, { 40 | offsetHeight: { 41 | get() { 42 | return parseFloat(this.style.height) || 1; 43 | }, 44 | }, 45 | offsetWidth: { 46 | get() { 47 | return parseFloat(this.style.width) || 1; 48 | }, 49 | }, 50 | }); 51 | 52 | (global.SVGElement as any).prototype.getBBox = () => ({ 53 | x: 0, 54 | y: 0, 55 | width: 0, 56 | height: 0, 57 | }); 58 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | 7 | // To make sure that the tests are working, it's important that you are using 8 | // this implementation of ResizeObserver and DOMMatrixReadOnly 9 | class ResizeObserver { 10 | callback: globalThis.ResizeObserverCallback; 11 | 12 | constructor(callback: globalThis.ResizeObserverCallback) { 13 | this.callback = callback; 14 | } 15 | 16 | observe(target: Element) { 17 | this.callback([{ target } as globalThis.ResizeObserverEntry], this); 18 | } 19 | 20 | unobserve() {} 21 | 22 | disconnect() {} 23 | } 24 | 25 | global.ResizeObserver = ResizeObserver; 26 | 27 | // we only use the scale of the matrix (`m22`), that's why we can use this simple mock 28 | class DOMMatrixReadOnly { 29 | m22: number; 30 | constructor(transform: string) { 31 | const scale = transform?.match(/scale\(([1-9.])\)/)?.[1]; 32 | this.m22 = scale !== undefined ? +scale : 1; 33 | } 34 | } 35 | // @ts-ignore 36 | global.DOMMatrixReadOnly = DOMMatrixReadOnly; 37 | 38 | // used for measuring nodes 39 | Object.defineProperties(global.HTMLElement.prototype, { 40 | offsetHeight: { 41 | get() { 42 | return parseFloat(this.style.height) || 1; 43 | }, 44 | }, 45 | offsetWidth: { 46 | get() { 47 | return parseFloat(this.style.width) || 1; 48 | }, 49 | }, 50 | }); 51 | 52 | (global.SVGElement as any).prototype.getBBox = () => ({ 53 | x: 0, 54 | y: 0, 55 | width: 0, 56 | height: 0, 57 | }); 58 | -------------------------------------------------------------------------------- /reactflow-vite/src/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | Edge, 4 | EdgeLabelRenderer, 5 | EdgeProps, 6 | getBezierPath, 7 | useReactFlow, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-astro/src/components/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | EdgeLabelRenderer, 4 | getBezierPath, 5 | useReactFlow, 6 | type EdgeProps, 7 | type Edge, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-nextjs/src/components/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | EdgeLabelRenderer, 4 | getBezierPath, 5 | useReactFlow, 6 | type EdgeProps, 7 | type Edge, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-remix/app/components/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | EdgeLabelRenderer, 4 | getBezierPath, 5 | useReactFlow, 6 | type EdgeProps, 7 | type Edge, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-create-react-app/src/Flow/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | EdgeLabelRenderer, 4 | getBezierPath, 5 | useReactFlow, 6 | type EdgeProps, 7 | type Edge, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/src/Flow/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | EdgeLabelRenderer, 4 | getBezierPath, 5 | useReactFlow, 6 | type EdgeProps, 7 | type Edge, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-nextjs-app-router/src/components/edges/ButtonEdge.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BaseEdge, 3 | EdgeLabelRenderer, 4 | getBezierPath, 5 | useReactFlow, 6 | type EdgeProps, 7 | type Edge, 8 | } from "@xyflow/react"; 9 | 10 | const buttonStyle = { 11 | width: 20, 12 | height: 20, 13 | background: "#eee", 14 | border: "1px solid #fff", 15 | cursor: "pointer", 16 | borderRadius: "50%", 17 | fontSize: "12px", 18 | lineHeight: 1, 19 | }; 20 | 21 | type ButtonEdgeData = {}; 22 | 23 | export type ButtonEdge = Edge; 24 | 25 | export default function ButtonEdge({ 26 | id, 27 | sourceX, 28 | sourceY, 29 | targetX, 30 | targetY, 31 | sourcePosition, 32 | targetPosition, 33 | style = {}, 34 | markerEnd, 35 | }: EdgeProps) { 36 | const { setEdges } = useReactFlow(); 37 | const [edgePath, labelX, labelY] = getBezierPath({ 38 | sourceX, 39 | sourceY, 40 | sourcePosition, 41 | targetX, 42 | targetY, 43 | targetPosition, 44 | }); 45 | 46 | const onEdgeClick = () => { 47 | setEdges((edges) => edges.filter((edge) => edge.id !== id)); 48 | }; 49 | 50 | return ( 51 | <> 52 | 53 | 54 |
65 | 68 |
69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /reactflow-create-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /reactflow-create-react-app-react17/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /reactflow-vite/README.md: -------------------------------------------------------------------------------- 1 | ![](https://github.com/xyflow/web/blob/main/assets/codesandbox-header-ts.png?raw=true) 2 | 3 | # React Flow starter (Vite + TS) 4 | 5 | We've put together this template to serve as a starting point for folks 6 | interested in React Flow. You can use this both as a base for your own React 7 | Flow applications, or for small experiments or bug reports. 8 | 9 | **TypeScript not your thing?** We also have a vanilla JavaScript starter template, 10 | just for you! 11 | 12 | ## Getting up and running 13 | 14 | You can get this template without forking/cloning the repo using `degit`: 15 | 16 | ```bash 17 | npx degit xyflow/vite-react-flow-template your-app-name 18 | ``` 19 | 20 | The template contains mostly the minimum dependencies to get up and running, but 21 | also includes eslint and some additional rules to help you write React code that 22 | is less likely to run into issues: 23 | 24 | ```bash 25 | npm install # or `pnpm install` or `yarn install` 26 | ``` 27 | 28 | Vite is a great development server and build tool that we recommend our users to 29 | use. You can start a development server with: 30 | 31 | ```bash 32 | npm run dev 33 | ``` 34 | 35 | While the development server is running, changes you make to the code will be 36 | automatically reflected in the browser! 37 | 38 | ## Things to try: 39 | 40 | - Create a new custom node inside `src/nodes/` (don't forget to export it from `src/nodes/index.ts`). 41 | - Change how things look by [overriding some of the built-in classes](https://reactflow.dev/learn/customization/theming#overriding-built-in-classes). 42 | - Add a layouting library to [position your nodes automatically](https://reactflow.dev/learn/layouting/layouting) 43 | 44 | ## Resources 45 | 46 | Links: 47 | 48 | - [React Flow - Docs](https://reactflow.dev) 49 | - [React Flow - Discord](https://discord.com/invite/Bqt6xrs) 50 | 51 | Learn: 52 | 53 | - [React Flow – Custom Nodes](https://reactflow.dev/learn/customization/custom-nodes) 54 | - [React Flow – Layouting](https://reactflow.dev/learn/layouting/layouting) 55 | -------------------------------------------------------------------------------- /reactflow-remix/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** 2 | * This is intended to be a basic starting point for linting in your app. 3 | * It relies on recommended configs out of the box for simplicity, but you can 4 | * and should modify this configuration to best suit your team's needs. 5 | */ 6 | 7 | /** @type {import('eslint').Linter.Config} */ 8 | module.exports = { 9 | root: true, 10 | parserOptions: { 11 | ecmaVersion: "latest", 12 | sourceType: "module", 13 | ecmaFeatures: { 14 | jsx: true, 15 | }, 16 | }, 17 | env: { 18 | browser: true, 19 | commonjs: true, 20 | es6: true, 21 | }, 22 | 23 | // Base config 24 | extends: ["eslint:recommended"], 25 | 26 | overrides: [ 27 | // React 28 | { 29 | files: ["**/*.{js,jsx,ts,tsx}"], 30 | plugins: ["react", "jsx-a11y"], 31 | extends: [ 32 | "plugin:react/recommended", 33 | "plugin:react/jsx-runtime", 34 | "plugin:react-hooks/recommended", 35 | "plugin:jsx-a11y/recommended", 36 | ], 37 | settings: { 38 | react: { 39 | version: "detect", 40 | }, 41 | formComponents: ["Form"], 42 | linkComponents: [ 43 | { name: "Link", linkAttribute: "to" }, 44 | { name: "NavLink", linkAttribute: "to" }, 45 | ], 46 | "import/resolver": { 47 | typescript: {}, 48 | }, 49 | }, 50 | }, 51 | 52 | // Typescript 53 | { 54 | files: ["**/*.{ts,tsx}"], 55 | plugins: ["@typescript-eslint", "import"], 56 | parser: "@typescript-eslint/parser", 57 | settings: { 58 | "import/internal-regex": "^~/", 59 | "import/resolver": { 60 | node: { 61 | extensions: [".ts", ".tsx"], 62 | }, 63 | typescript: { 64 | alwaysTryTypes: true, 65 | }, 66 | }, 67 | }, 68 | extends: [ 69 | "plugin:@typescript-eslint/recommended", 70 | "plugin:import/recommended", 71 | "plugin:import/typescript", 72 | ], 73 | }, 74 | 75 | // Node 76 | { 77 | files: [".eslintrc.cjs"], 78 | env: { 79 | node: true, 80 | }, 81 | }, 82 | ], 83 | }; 84 | -------------------------------------------------------------------------------- /reactflow-astro/README.md: -------------------------------------------------------------------------------- 1 | # Astro Starter Kit: Minimal 2 | 3 | ```sh 4 | npm create astro@latest -- --template minimal 5 | ``` 6 | 7 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal) 8 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal) 9 | [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json) 10 | 11 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! 12 | 13 | ## 🚀 Project Structure 14 | 15 | Inside of your Astro project, you'll see the following folders and files: 16 | 17 | ```text 18 | / 19 | ├── public/ 20 | ├── src/ 21 | │ └── pages/ 22 | │ └── index.astro 23 | └── package.json 24 | ``` 25 | 26 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 27 | 28 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. 29 | 30 | Any static assets, like images, can be placed in the `public/` directory. 31 | 32 | ## 🧞 Commands 33 | 34 | All commands are run from the root of the project, from a terminal: 35 | 36 | | Command | Action | 37 | | :------------------------ | :----------------------------------------------- | 38 | | `npm install` | Installs dependencies | 39 | | `npm run dev` | Starts local dev server at `localhost:4321` | 40 | | `npm run build` | Build your production site to `./dist/` | 41 | | `npm run preview` | Preview your build locally, before deploying | 42 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | 43 | | `npm run astro -- --help` | Get help using the Astro CLI | 44 | 45 | ## 👀 Want to learn more? 46 | 47 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). 48 | -------------------------------------------------------------------------------- /reactflow-remix/app/entry.server.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * By default, Remix will handle generating the HTTP Response for you. 3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ 4 | * For more information, see https://remix.run/file-conventions/entry.server 5 | */ 6 | 7 | import { PassThrough } from "node:stream"; 8 | 9 | import type { AppLoadContext, EntryContext } from "@remix-run/node"; 10 | import { createReadableStreamFromReadable } from "@remix-run/node"; 11 | import { RemixServer } from "@remix-run/react"; 12 | import { isbot } from "isbot"; 13 | import { renderToPipeableStream } from "react-dom/server"; 14 | 15 | const ABORT_DELAY = 5_000; 16 | 17 | export default function handleRequest( 18 | request: Request, 19 | responseStatusCode: number, 20 | responseHeaders: Headers, 21 | remixContext: EntryContext, 22 | // This is ignored so we can keep it in the template for visibility. Feel 23 | // free to delete this parameter in your app if you're not using it! 24 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 25 | loadContext: AppLoadContext 26 | ) { 27 | return isbot(request.headers.get("user-agent") || "") 28 | ? handleBotRequest( 29 | request, 30 | responseStatusCode, 31 | responseHeaders, 32 | remixContext 33 | ) 34 | : handleBrowserRequest( 35 | request, 36 | responseStatusCode, 37 | responseHeaders, 38 | remixContext 39 | ); 40 | } 41 | 42 | function handleBotRequest( 43 | request: Request, 44 | responseStatusCode: number, 45 | responseHeaders: Headers, 46 | remixContext: EntryContext 47 | ) { 48 | return new Promise((resolve, reject) => { 49 | let shellRendered = false; 50 | const { pipe, abort } = renderToPipeableStream( 51 | , 56 | { 57 | onAllReady() { 58 | shellRendered = true; 59 | const body = new PassThrough(); 60 | const stream = createReadableStreamFromReadable(body); 61 | 62 | responseHeaders.set("Content-Type", "text/html"); 63 | 64 | resolve( 65 | new Response(stream, { 66 | headers: responseHeaders, 67 | status: responseStatusCode, 68 | }) 69 | ); 70 | 71 | pipe(body); 72 | }, 73 | onShellError(error: unknown) { 74 | reject(error); 75 | }, 76 | onError(error: unknown) { 77 | responseStatusCode = 500; 78 | // Log streaming rendering errors from inside the shell. Don't log 79 | // errors encountered during initial shell rendering since they'll 80 | // reject and get logged in handleDocumentRequest. 81 | if (shellRendered) { 82 | console.error(error); 83 | } 84 | }, 85 | } 86 | ); 87 | 88 | setTimeout(abort, ABORT_DELAY); 89 | }); 90 | } 91 | 92 | function handleBrowserRequest( 93 | request: Request, 94 | responseStatusCode: number, 95 | responseHeaders: Headers, 96 | remixContext: EntryContext 97 | ) { 98 | return new Promise((resolve, reject) => { 99 | let shellRendered = false; 100 | const { pipe, abort } = renderToPipeableStream( 101 | , 106 | { 107 | onShellReady() { 108 | shellRendered = true; 109 | const body = new PassThrough(); 110 | const stream = createReadableStreamFromReadable(body); 111 | 112 | responseHeaders.set("Content-Type", "text/html"); 113 | 114 | resolve( 115 | new Response(stream, { 116 | headers: responseHeaders, 117 | status: responseStatusCode, 118 | }) 119 | ); 120 | 121 | pipe(body); 122 | }, 123 | onShellError(error: unknown) { 124 | reject(error); 125 | }, 126 | onError(error: unknown) { 127 | responseStatusCode = 500; 128 | // Log streaming rendering errors from inside the shell. Don't log 129 | // errors encountered during initial shell rendering since they'll 130 | // reject and get logged in handleDocumentRequest. 131 | if (shellRendered) { 132 | console.error(error); 133 | } 134 | }, 135 | } 136 | ); 137 | 138 | setTimeout(abort, ABORT_DELAY); 139 | }); 140 | } 141 | --------------------------------------------------------------------------------