The React Flow Playground  was created to be able to play around with props and to share a flow with its nodes and edges and its configuration. On the left, you can find a sidebar to adjust the props that get passed to the <ReactFlow /> component and each node. On the right, can see the resulting flow. You can pan and zoom the flow, select nodes and interactively adjust them. You can create a unique link of your configuration to share it with others.

Interactively tweak <ReactFlow /> props

The React Flow Playground allows you to interactively adjust the props that get passed to the main <ReactFlow /> component. When you hover a prop, you will see a tooltip with an explanation, and when you tweak its value, the flow gets updated. You can experiment with every configuration option related to the appearance and interactive behavior of the flow: color themes, keyboard shortcuts, selection mode, zooming, panning and much more.

Node and edges Editor

When you select a node in the React Flow playground, you will be able to interactively inspect it. You’ll be able to change a node’s position, size, number and position of its handles, and much more. You can also load and save custom node datasets, play with nested nodes hierarchies, and modify the interactive behaviors of nodes.

Layout algorithms

The React Flow Playground allows you to try out different graph layouting libraries in the browser before you use them in your project. You can try out Dagre, ElkJS and D3 Hierarchy: when you select a layout library, you will be able to configure the parameters of the layout algorithm in the sidebar, such as direction, alignment and spacing of nodes in the flow. Just as the props editor in the playground, when you hover a parameter, you will see a tooltip with an explanation, and when you tweak any parameter, you will see the flow updated in real time.

Sharing a flow

So you’ve found the perfect configuration for your React Flow application, and you’d like to share it with others? You will be able to create a shareable link to your flow, and share it with your friends and colleagues.