# React Flow Documentation

> React Flow Documentation

- Skill: `hk-vk/react-flow-documentation` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add hk-vk/react-flow-documentation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/react-flow-documentation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: hk-vk (https://skillmd.com/u/hk-vk)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/hk-vk/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](/ui).

\[!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](/ui).

## 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.