gedsys/react-flow-usage
Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.
95
95%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
setup-imports-css.mdrules/
- title:
- Import CSS Stylesheet
- impact:
- CRITICAL
- impactDescription:
- React Flow won't render correctly without the CSS import - nodes and controls will be invisible or unstyled
- tags:
- react-flow, setup, css
Import CSS Stylesheet
Always import the React Flow stylesheet to ensure proper styling of nodes, edges, controls, and other components.
Incorrect (missing CSS import):
import { ReactFlow } from '@xyflow/react';
function Flow() {
return <ReactFlow nodes={nodes} edges={edges} />;
// Nodes, edges, and controls will be invisible or broken
}Correct (CSS imported):
import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css'; // Essential!
function Flow() {
return <ReactFlow nodes={nodes} edges={edges} />;
}Additional Context:
The stylesheet includes essential styles for:
- Node positioning and rendering
- Edge paths and connection lines
- Controls (zoom, pan, fit view buttons)
- MiniMap visualization
- Selection boxes
- Handle hit areas
Import the stylesheet once at your app's entry point or in the component that renders ReactFlow.
Reference: React Flow Installation