Graphty

Appearance

Getting Started ​

Get from zero to a working graph visualization in 5 minutes.

What is Graphty? ​

Graphty is a Web Component library for creating interactive 3D and 2D graph visualizations. Built with Lit and Babylon.js, it provides:

  • High-performance 3D rendering with WebGL/WebGPU
  • Multiple layout algorithms (force-directed, hierarchical, circular, etc.)
  • Rich styling system with CSS-like selectors
  • Graph algorithms (centrality, community detection, shortest path, etc.)
  • VR/AR support via WebXR
  • Extensible plugin architecture

Quick Start ​

The fastest way to see Graphty in action:

html
<!DOCTYPE html>
<html>
<head>
  <title>My First Graph</title>
  <style>
    graphty-element {
      width: 800px;
      height: 600px;
      display: block;
    }
  </style>
</head>
<body>
  <script type="module">
    import '@graphty/graphty-element';
  </script>

  <graphty-element
    node-data='[{"id": "a"}, {"id": "b"}]'
    edge-data='[{"source": "a", "target": "b"}]'>
  </graphty-element>
</body>
</html>

Your First Graph ​

Let's build a simple social network visualization step by step.

Step 1: Set Up the Component ​

First, include the Graphty element and give it dimensions:

html
<graphty-element style="width: 100%; height: 500px; display: block;">
</graphty-element>

Step 2: Add Nodes ​

Define the people in your network:

html
<graphty-element
  node-data='[
    {"id": "alice", "name": "Alice"},
    {"id": "bob", "name": "Bob"},
    {"id": "charlie", "name": "Charlie"}
  ]'>
</graphty-element>

Step 3: Add Edges ​

Connect them with relationships:

html
<graphty-element
  node-data='[
    {"id": "alice", "name": "Alice"},
    {"id": "bob", "name": "Bob"},
    {"id": "charlie", "name": "Charlie"}
  ]'
  edge-data='[
    {"source": "alice", "target": "bob"},
    {"source": "bob", "target": "charlie"},
    {"source": "charlie", "target": "alice"}
  ]'>
</graphty-element>

Step 4: Choose a Layout ​

Select how nodes are positioned:

html
<graphty-element
  layout="ngraph"
  node-data='[...]'
  edge-data='[...]'>
</graphty-element>

Available layouts include:

  • ngraph - Force-directed (default, works in 2D and 3D)
  • d3-force - D3's force simulation (2D)
  • circular - Nodes in a circle
  • hierarchical - Tree-like structure
  • grid - Regular grid pattern

Step 5: Apply Styling ​

Use a style template for a polished look:

html
<graphty-element
  layout="ngraph"
  style-template="dark"
  node-data='[...]'
  edge-data='[...]'>
</graphty-element>

Interactive Examples ​

See these concepts in action:

What's Next? ​

Now that you have a basic graph working, explore:

  • Installation - Detailed installation options for different environments
  • Styling - Customize colors, shapes, and labels
  • Layouts - Configure layout algorithms
  • Algorithms - Run graph algorithms and visualize results