Skip to Content
Reagraph npm tag

WebGL-Powered

Open-Source Network Graph Visualization

Layout Engines

Commits

Stars

Awesome Product

Fully Customizable
Built on D3 with full control over visuals, interactions, and behavior.
2D & 3D Support
Supports 2D and 3D views with smooth Motion animations.
Large Data Handling
Handles high-volume datasets with fast rendering and simple setup.
Hyper Intelligent
Smart defaults make charts look great with zero configuration.
Complex Clustering
Built for advanced use cases with support for complex data patterns.
So much more
Free to use, easy to extend, and ready for any project size.

Custom Graphs At Your Finger Tips.

Reagraph enables users to create stunning graphs quickly. Its intuitive interface allows anyone to turn complex data into appealing visualizations without extensive coding.

React-Ready.
WebGL-Powered.

Reagraph is designed for React, using WebGL to create stunning 2D and 3D graphs. This allows developers to build striking and interactive data visualizations easily.

Getting started 🚀

Integrating Reagraph them in your application

To get started with Reagraph just need to install the package and import the component.

Learn more
$ npm install reagraph -S
 
import { GraphCanvas } from 'reagraph';

Let's build something amazing

Let's define some nodes and edges. Nodes are the blocks and edges are the relationships between the blocks.

The data shapes require one property of id but you can pass label or icon to them to show some sort of indication what it represents.

Learn more
<GraphCanvas
  nodes={[
    { id: '1', label: 'Node 1'},
    { id: '2', label: 'Node 2' }
  ]}
  edges={[
    { id: '1-2', source: '1', target: '2', label: 'Edge 1-2' },
    { id: '2-1', source: '2', target: '1', label: 'Edge 2-1' }
  ]}
/>

Customizing the graph

By default, the graph supports 2 themes: light and dark modes. You can also define your own theme using the theme interface.

You can also customize the graph by passing props to the component.

Learn more
<GraphCanvas
    theme={{
      ...lightTheme,
      node: { ...lightTheme.node, color: '#000' }
    }}
    renderNode={({ size, color }) => (
      <group>
        <mesh>
          <torusKnotGeometry attach="geometry" args={[size, 1.25, 50, 8]} />
          <meshBasicMaterial attach="material" color={color} />
        </mesh>
      </group>
    )}
  />

Start building with Reagraph today

Reagraph
Made with ❤️ by Good Code