JSON to React Flow Diagram — Convert JSON Online Free
Transform JSON data into a React Flow nodes-and-edges structure using AI. Instantly generate flow diagram data from any JSON object. Free, no sign-up.
JSON to React Flow Diagram — Convert JSON Online Free
About JSON to React Flow Diagram — Convert JSON Online Free
JSON to React Flow converts any JSON object or array into the nodes and edges data structure required by the React Flow library, mapping each key-value pair and nested object into positioned node elements with connecting edges. Developers use it to instantly visualize API responses, configuration schemas, and data models as interactive node graphs without writing boilerplate transformation code.
JSON Type to React Flow Node Mapping
| JSON Type | React Flow Node type | node.data fields | Edge created |
|---|---|---|---|
| Object (root) | input | label: key name, value: {} | No (root node) |
| Object (nested) | default | label: key name, value: {} | Yes, from parent |
| Array | default | label: key name, value: [] | Yes, from parent |
| String | output | label: key name, value: string | Yes, from parent |
| Number | output | label: key name, value: number | Yes, from parent |
| Boolean | output | label: key name, value: true/false | Yes, from parent |
| null | output | label: key name, value: null | Yes, from parent |
React Flow Nodes vs Edges Structure Reference
| Property | Nodes object | Edges object |
|---|---|---|
| Required id field | id: string (auto-generated) | id: string (auto-generated) |
| Position | position: { x: number, y: number } | Not applicable |
| Data payload | data: { label: string } | Not applicable |
| Source/Target | Not applicable | source: string, target: string |
| Type field | type: 'input' | 'default' | 'output' | type: 'default' | 'smoothstep' | 'step' |
| Animated | Not applicable | animated: boolean (optional) |
| Style | style: CSSProperties (optional) | style: CSSProperties (optional) |
| Class | className: string (optional) | className: string (optional) |
Frequently Asked Questions
How do I convert a JSON object to React Flow nodes and edges?
You need to recursively traverse your JSON and create a node for each key, then an edge connecting the parent node id to the child node id. Each node requires a unique id, a position (x/y coordinates for layout), and a data object with at least a label. The JSON to React Flow tool automates this traversal and outputs a ready-to-use { nodes, edges } structure you can pass directly to the ReactFlow component.
What format does React Flow expect for initialNodes and initialEdges?
React Flow expects initialNodes as an array of objects each with id (string), position ({ x, y }), and data ({ label }) fields, plus an optional type ('input', 'default', or 'output'). initialEdges is an array of objects with id, source (node id), and target (node id). Both arrays are passed as props to the <ReactFlow> component: <ReactFlow nodes={initialNodes} edges={initialEdges} />.
How are nested JSON objects handled in React Flow node conversion?
Each nested object becomes its own default-type node, and an edge is created from the parent node's id to the child node's id. The depth of nesting determines the x-axis position, while sibling index determines y-axis spacing, producing a tree layout. Arrays are treated as nodes with each element becoming a child node connected by an indexed edge.
Can I use the generated React Flow JSON with @xyflow/react v12?
Yes. The @xyflow/react v12 package (the renamed React Flow) uses the same nodes and edges array format. The key change in v12 is that node position is now relative to the parent when using subflows, and the useNodesState/useEdgesState hooks are still the recommended way to manage the generated arrays. The output from a JSON-to-Flow converter is directly compatible with both the legacy reactflow v11 and @xyflow/react v12.
How do I auto-layout the nodes generated from JSON so they don't overlap?
The most common approach is to use the Dagre library (dagre npm package) with React Flow's layouting examples to run a directed graph layout algorithm on the generated nodes and edges. After conversion, pass your nodes and edges through a dagre.layout() call which computes non-overlapping x/y positions. Alternatively, React Flow's built-in elkjs integration supports more advanced hierarchical layouts suited to deeply nested JSON trees.
If jsondecode.com saved you time, share it with your team
Free forever. No ads. No sign-up. Help other developers find it.