Flexible data model visualization with Hubql and React Flow

Tobias Meixner

Co-Founder of Hubql

Can you briefly describe Hubql?

Hubql is a collaboration platform for building and visualizing data schemas together.

Why did you decide to use React Flow?

We were seeking a React library that helps us to turn data models into visualizations without spending too much time building abstractions and interactive elements. To save time in development we opted for a stable, mature and feature-rich library that we can extend with custom rendering options.

How are you currently using the library?

We use React Flow to transform data models such as JSON or Prisma into diagrams or graphs. We pass AST (abstract syntax tree) data to React Flow to generate nodes and edges based on data relationships. These are then rendered with custom nodes in a table-like UI for easier understanding.

What's something in React Flow that has been particularly useful?

Mainly the events to control drag and click behaviours of nodes are very useful to extend functionality. Also the rendering of custom nodes gives very high flexibility in the user interface for rich user experiences and branding.

Have you had any issues along the way?

We have actually not faced any issues other than performance problems from our side that could be solved by optimizing our React code. React Flow itself is very stable and gives great performance out of the box.

How have the features of your React Flow subscription helped you so far?

There was a Pro example that matched our use case. This saved us implementation time on the auto-layout and grouping features, which were key to us. It is also great to get direct support from the React Flow team and to give back to the maintainers directly.