Graphty3D/2D Graph Visualization Web Component

Build interactive graph visualizations with a powerful Web Component library built on Lit and Babylon.js

Get Started

API Reference

Live Examples

3D Rendering

Multiple Layouts

Choose from force-directed, hierarchical, circular, grid, and more layout algorithms for optimal graph presentation.

Extensible Architecture

Plugin system for custom layouts, algorithms, and data sources. Build exactly what you need.

VR/AR Support

WebXR-ready for immersive graph exploration in virtual and augmented reality environments.

Quick Start

Install via npm:

bash

npm install @graphty/graphty-element

Create your first graph:

html

<script type="module">
  import '@graphty/graphty-element';
</script>

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