React Flow Documentation

React Flow Documentation

[!IMPORTANT]

If you are using Tailwind CSS 4, you need to import the main React Flow CSS stylesheet after you import the tailwindcss stylesheet. To ensure the styles are loaded in the correct order, you should always import the styles in your global.css file (or index.css file), after you import tailwindcss. Avoid importing the styles in your App.tsx file or any other file that is imported by your App.tsx file. Read more.

[!IMPORTANT]

If you are using Tailwind CSS 4, you need to import the main React Flow CSS stylesheet after you import the tailwindcss stylesheet. To ensure the styles are loaded in the correct order, you should always import the styles in your global.css file (or index.css file), after you import tailwindcss. Avoid importing the styles in your App.tsx file or any other file that is imported by your App.tsx file. Read more.

Available Resources

Learn

• autoPanOnNodeFocus

  • URL: /api-reference/react-flow#autopanonnodefocus

• ariaLabelConfig

  • URL: /api-reference/react-flow#arialabelconfig

• updateNodeData

  • URL: /api-reference/types/react-flow-instance#update-node-data

• useNodeConnections

  • URL: /api-reference/hooks/use-node-connections

• updateNodeData

  • URL: /api-reference/types/react-flow-instance#update-node-data

• useNodeConnections

  • URL: /api-reference/hooks/use-node-connections

• hooks

  • URL: /api-reference/hooks

• Guide to Optimize React Flow Project Performance

  • URL: https://www.synergycodes.com/blog/guide-to-optimize-react-flow-project-performance

• Tuning Edge Animations ReactFlow Optimal Performance

  • URL: https://liambx.com/blog/tuning-edge-animations-reactflow-optimal-performance

• 5 Ways to Optimize React Flow in 10 minutes

  • URL: https://www.youtube.com/watch?v=8M2qZ69iM20

• selectionKeyCode

  • URL: /api-reference/react-flow#selectionkeycode

• multiSelectionKeyCode

  • URL: /api-reference/react-flow#multiselectionkeycode

• deleteKeyCode

  • URL: /api-reference/react-flow#deletekeycode

• getBezierPath

  • URL: /api-reference/utils/get-bezier-path

• getSimpleBezierPath

  • URL: /api-reference/utils/get-simple-bezier-path

• getSmoothStepPath

  • URL: /api-reference/utils/get-smooth-step-path

• getStraightPath

  • URL: /api-reference/utils/get-straight-path

• <Handle />

  • URL: /api-reference/components/handle

• <Handle />

  • URL: /api-reference/components/handle

• <Handle />

  • URL: /api-reference/components/handle

• <Handle />

  • URL: /api-reference/components/handle

• Link: Repo: <

  • URL: https://github.com/dagrejs/dagre>

• Link: Docs: <

  • URL: https://github.com/dagrejs/dagre/wiki#configuring-the-layout>

• Link: Repo: <

  • URL: https://github.com/d3/d3-hierarchy>

• Link: Docs: <

  • URL: https://d3js.org/d3-hierarchy>

• Link: Repo: <

  • URL: https://github.com/d3/d3-force>

• Link: Docs: <

  • URL: https://d3js.org/d3-force>

• Link: Repo: <

  • URL: https://github.com/kieler/elkjs>

• Link: Docs: < (good luck!)

  • URL: https://eclipse.dev/elk/reference.html>

• d3-flextree

  • URL: https://github.com/klortho/d3-flextree

• Cola.js

  • URL: https://github.com/tgdwyer/WebCola

• react-flow-smart-edge

  • URL: https://github.com/tisoap/react-flow-smart-edge

• Routing Orthogonal Diagram Connectors in JavaScript

  • URL: https://medium.com/swlh/routing-orthogonal-diagram-connectors-in-javascript-191dc2c5ff70

• useUpdateNodeInternal

  • URL: /api-reference/hooks/use-update-node-internals

• useUpdateNodeInternals

  • URL: /api-reference/hooks/use-update-node-internals

• getBezierPath

  • URL: /api-reference/utils/get-bezier-path

• getBezierPath

  • URL: /api-reference/utils/get-bezier-path

• Sub Flows: You can now add nodes to a parent node and create groups and nested flows

  • URL: /learn/layouting/sub-flows

• useKeyPress hook: A util hook for handling keyboard events

  • URL: /api-reference/hooks/use-key-press

• useReactFlow hook: Returns a React Flow instance that exposes functions to manipulate the flow

  • URL: /api-reference/hooks/use-react-flow

• useNodes

  • URL: /api-reference/hooks/use-nodes

• core concepts section

  • URL: /learn/concepts/core-concepts

• Accessibility

  • URL: /learn/advanced-use/accessibility

• Link: Better routing for smoothstep and step edges: <

  • URL: https://twitter.com/reactflowdev/status/1567535405284614145>

• Link: Nicer edge updating behavior: <

  • URL: https://twitter.com/reactflowdev/status/1564966917517021184>

• useOnViewportChange

  • URL: /api-reference/hooks/use-on-viewport-change

• use-on-selection-change

  • URL: /api-reference/hooks/use-on-selection-change

• useNodesInitialized

  • URL: /api-reference/hooks/use-nodes-initialized

• <BaseEdge />

  • URL: /api-reference/components/base-edge

• Separately installable packages

  • URL: /learn/concepts/built-in-components

• useConnection hook: ** With this hook you can

  • URL: /api-reference/hooks/use-connection

• viewport

  • URL: /api-reference/react-flow#viewport

• ViewportPortal

  • URL: /api-reference/components/viewport-portal

• onDelete

  • URL: /api-reference/react-flow#on-delete

• onBeforeDelete

  • URL: /api-reference/react-flow#on-before-delete

• isValidConnection

  • URL: /api-reference/react-flow#isvalidconnection

• autoPanSpeed

  • URL: /api-reference/react-flow#autoPanSpeed

• paneClickDistance

  • URL: /api-reference/react-flow#paneClickDistance

• patternClassName

  • URL: /api-reference/components/background#pattern-class-name

• the xyflow team

  • URL: https://xyflow.com/about

• vite

  • URL: https://vite.dev

• shadcn/ui

  • URL: https://ui.shadcn.com/

• UI components registry

  • URL: /ui

• <BaseNodeHeader />

  • URL: /ui/components/base-node

• <DataEdge />

  • URL: /ui/components/data-edge

• OscillatorNode

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode

• AudioContext

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext

• AnalyserNode

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode

• useReactFlow

  • URL: /api-reference/hooks/use-react-flow

• onNodeClick

  • URL: /api-reference/react-flow#on-node-click

• onKeyPress

  • URL: /api-reference/react-flow#on-key-press

UI

• React Flow UI

  • URL: /ui

• shadcn CLI

  • URL: https://ui.shadcn.com/docs/cli

• AI SDK

  • URL: https://ai-sdk.dev/

• React Flow UI

  • URL: /ui

• shadcn CLI

  • URL: https://ui.shadcn.com/docs/cli

• ELKjs

  • URL: https://github.com/kieler/elkjs

How to Use This Skill

Reference these resources when working with React Flow Documentation.