elefcode

React Flow Playground

Loading the canvas…
Background
Colour mode
Zoom out to

In the generated React code

Zoom in to

The cards here show the structure; the code draws React Flow’s own default nodes at the same positions. Install it with npm install @xyflow/react (Vue: @vue-flow/core; Svelte: @xyflow/svelte).

Advertisement

Guide

About the React Flow Playground

Writing node positions by hand is the slowest part of starting with React Flow. Place the nodes where you want them, connect them, and copy the arrays and the component around them — positions included.

The output uses @xyflow/react, the current React Flow package. Install it with npm install @xyflow/react, and keep the stylesheet import: without it, nodes and edges do not show.

How to use it

  1. 1Pick a template, or add nodes with + Add node.
  2. 2Drag from a node’s bottom dot to another node to add an edge.
  3. 3Click an edge to change its type, label, arrow and animation; click the background for component options.
  4. 4Copy the TSX, JSX or JSON from the Code tab.

Frequently asked questions

Why is nothing visible when I paste the component?

React Flow fills its parent, so the parent needs a height. The component wraps it in a div with the height you set (100vh by default).

Does it work with the old reactflow package?

The code targets @xyflow/react (React Flow 12). For reactflow 11, change the import to reactflow and the stylesheet to reactflow/dist/style.css.

Can I make custom nodes?

Start from this output, then add a nodeTypes object with your own components. The DB Designer on this site is built that way.