Wiizworks

Case Study: 3D Version of React Flow by xyflow

The Challenge

The client needed a 3D flow-diagram library that could mirror the experience of React Flow by xyflow. The goal was to preserve the same UI patterns, accept the same data structure, and let teams move from 2D node graphs to immersive 3D flow diagrams without rethinking their existing setup.

Same Interface, New Dimension

A big part of the project was making the 3D library feel immediately recognizable to teams already using React Flow by xyflow. The API stayed intentionally close to the original, so the same mental model could carry over with minimal friction.

Same UI, same data shape
// React Flow by xyflow
<ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange}>
  <Controls />
</ReactFlow>

// React Three Flow
<ReactThreeFlowCanvas
  onNodesChange={onNodesChange}
  enableControls
  nodes={nodes}
  edges={edges}
/>

Nodes and 3D Objects in One Canvas

The canvas was not limited to nodes and edges alone. Because the library lived in a 3D rendering environment, I could place 3D objects alongside nodes in the same scene, which made it possible to mix diagram logic with richer spatial content inside a single workflow.

3D Edge Visualization Logic

A key technical challenge was writing the edge logic that translated a traditional 2D flow structure into something that could be rendered clearly in 3D space. The system had to preserve source and target relationships while calculating paths that made the edges readable, spatially meaningful, and visually consistent inside a three-dimensional canvas.

The Outcome

Compatibility
Same Data
The library was designed to work with the same style of graph data used by **React Flow by xyflow**, making adoption much more straightforward.
User Experience
Same UI
The interaction model intentionally mirrored **React Flow** so existing users could understand the 3D version quickly and intuitively.
Visualization
3D Graphs
The result was a working 3D flow-diagram library that extended a familiar diagramming pattern into a more immersive spatial format.
Client Value
Low Friction
By keeping the API and experience close to **React Flow by xyflow**, the solution reduced the cost of switching to a new visualization approach.

Technology Stack

npm

React

TypeScript

Next.js

Three.js

Conclusion

This project reflects my ability to take an existing developer workflow and reimagine it in a new medium without losing usability. By building a 3D equivalent of React Flow by xyflow that could accept the same data and interaction patterns, I delivered a solution that felt both innovative and immediately usable.

Let's build something amazing

Check out the project:

Visit Wiizworks