DevTools

A debugging tool that provides data on the viewport, the state of each node, and logs change events. This component is based on DevTools and Debugging under Advanced Use.

You can import the entire <DevTools /> component, or optionally, import individual components for greater flexibility. These components include:

• A <ViewportLogger /> component that shows the current position and zoom level of the viewport.
• A <NodeInspector /> component that reveals the state of each node.
• A <ChangeLogger /> that wraps your flows onNodesChange handler and logs each change as it is dispatched.

You can read more about the individual components at DevTools and Debugging. While we find these tools useful for making sure React Flow is working properly, you might also find them useful for debugging your applications as your flows and their interactions become more complex.

npx shadcn@latest add https://ui.reactflow.dev/devtools

pnpm dlx shadcn@latest add https://ui.reactflow.dev/devtools

yarn dlx shadcn@latest add https://ui.reactflow.dev/devtools

bun x shadcn@latest add https://ui.reactflow.dev/devtools

import { Background, ReactFlow } from "@xyflow/react";
 
import { DevTools } from "@/registry/components/devtools/";
 
const defaultNodes = [
  {
    id: "1a",
    type: "input",
    data: { label: "Node 1" },
    position: { x: 250, y: 5 },
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} fitView>
        <Background />
        <DevTools position="top-left" />
      </ReactFlow>
    </div>
  );
}