Building with ReGraph

Build high performance React network visualization tools quickly

How does ReGraph work?

ReGraph is a toolkit for visualizing connected data in React. It provides a number of fully-reactive, customizable components that you can embed in your own applications.

It has two visualization components: a chart and a time bar. Use props to push your data into them and they’ll update automatically.

To update, filter, style or highlight items in the data, push an updated item’s object into the component on the next render. ReGraph will smoothly update the React network visualization to reflect the change.

Like other React components, ReGraph sits in the front end of your application – completely separate from the back end. Data is passed as a plain JavaScript object: it’s up to you how to deliver data to the client.

import React from 'react';
import { Chart } from 'regraph';

const FamilyTree = () => (
  <Chart items={{
    luke: {label: {text: 'Luke Skywalker'}},
    leia: {label: {text: 'Princess Leia'}},
    link: {
      id1: 'luke',
      id2: 'leia',
      label: {text: 'Siblings'},

A simple, familiar way to write React code

Try ReGraph for yourself

Why Build with ReGraph?

Designed for React, and only React

If you’re a React developer looking for a graph visualization toolkit, ReGraph is designed for you.

Enjoy all the benefits of React including component-based state and data flow management, efficient rendering, and JSX-coded elements with clear syntax. The data-driven API is intuitive and declarative: you describe what you want ReGraph to draw, not how to draw it.

Robust & advanced features

ReGraph comes loaded with high-performance features to analyze your biggest datasets.

ReGraph components allow you to visualize time-based and geospatial data, while advanced layouts and graph analysis functions help you make sense of it. There’s also powerful rendering of large data sets across all modern browsers.

It’s scaleable & flexible

ReGraph is completely separate from the back end. You can choose whatever system you want to integrate with, and whatever data source you want to visualize.

You can also take advantage of React’s complementary tools and features including Redux, Flux and Hooks.

High-quality developer experience

A fully-documented API and detailed developer guides provide expert first-line support.

There are dynamic demos for every feature with downloadable examples to save you coding from scratch. And if you contact support, our experienced React developers are here to help.

Want to know more?

Download the white paper

Lightweight, secure and scalable

ReGraph is a front-end application that works seamlessly in any environment. No need to change your existing setup: you choose where to host it.

Fully agnostic, ReGraph works with virtually any data repository. For added security between server and web browser, simply set up a secure channel using SSL. There’s no need for specialist visualization servers. ReGraph’s simple, data-driven API renders the graph every time your data changes.
Live demos and fully-documented code for every ReGraph object

Powerful, fast and easy to use

ReGraph components use WebGL rendering under-the-hood for fast performance. This offloads much of the heavy lifting to the device’s GPU.

The additional processing power means you can visualize large and complex networks easily. Can’t always use WebGL? As a fallback, there’s HTML5 Canvas. It uses the same API, so no need to worry about which platform you’re running on.

The ReGraph playground

ReGraph comes with its own live-coding environment designed for rapid prototyping and sharing code more easily.

With the playground you can create instant React network visualizations from any of the code examples on the ReGraph SDK site.

It makes collaboration much simpler too. Once you’re ready to show colleagues your ideas, just share the hyperlink.

React logo

Minimal dependencies

ReGraph works with React, and the core library has a third-party dependency on the lodash utility library.

If you’re using map mode, add Leaflet version 1.3.4 to your project and import it into your app. This’ll draw map tiles and handle user interactions.

If you’re using font icons, use the FontLoader component included in the ReGraph package and make sure fonts are loaded on the page before redrawing the chart.

Trusted by developers

Many high profile applications around the world use our visualization technology.

Meet our customers

Any browser, any device

ReGraph works in all major browsers on desktops, tablets or cell phones.

Supported browsers and devices

Integrate with your favorite database

ReGraph works with virtually any database. If your data can be parsed into JSON format, ReGraph can visualize it.

  • Visualizing the Neo4j graph database with KeyLines
  • Visualizing the DataStax graph database with KeyLines
  • Visualizing the Amazon Neptune database with KeyLines
  • Visualizing JanusGraph with KeyLines
  • Visualize graphs using ArangoDB
  • Visualizing Elasticsearch with KeyLines
  • Visualizing the OrientDB graph database with KeyLines
  • Visualizing the Cayley graph database with KeyLines
  • Microsoft Azure CosmosDB logo
  • Visualizing the Titan graph database with KeyLines
  • Visualizing the Stardog database with KeyLines
  • Visualizing the Memgraph database with KeyLines

Frequently asked questions

Is ReGraph open source?

No. ReGraph is a commercially-licensed React SDK. Having a dedicated team on the project means we can guarantee frequent releases, fixes and expert support.

How do I use ReGraph with my data?

Once your data is converted to the JSON format ReGraph needs, objects are sent to the client and passed to the chart’s items prop ready to be rendered to the chart.

What’s ReGraph’s performance like?

Performance rates depend on many factors including server hardware, browser and size of the React network visualization.

The ReGraph WebGL renderer can handle networks of 100,000 items, but in reality, the human brain can only interpret a few hundred nodes at most. Your users can rely on ReGraph’s advanced filtering, grouping and merging features to manage the data and find the insight they’re after.

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61 | 6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2021.