G6Lite · WebGL Graph Engine

A lightweight engine
for large-scale graphs

Visualize complex relationships with flexible layouts, responsive interactions, and efficient WebGL rendering.

Quick start Build with AI Examples

Loading graph

Your data, made interactive

Define nodes and edges, choose a layout, and add the interactions your application needs. Explore the graph lifecycle

01

Add your data

Describe connections with nodes, edges, and groups.

nodes [ a, b, c ]
edges [ a → b, a → c ]
combos [ group ]
02

Choose a layout

Choose a layout that reflects the structure of your data.

03

Render your graph

Draw nodes and edges with WebGL and labels with Canvas 2D.

Canvas · Labels
WebGL · Nodes and edges
Canvas · Combo groups
04

Add interaction

Let users zoom, drag, and highlight connections with incremental updates.

A small core, responsive interactions

Load layouts only when needed, render elements in batches, and handle changes without unnecessary recomputation.

Lightweight loading

Layout algorithms load on demand, keeping the initial core bundle small.

Measured entry size83.8kBminify + Brotli · Layouts excluded
Core entryOn-demand layouts
v0.1.0-beta.27 · 2026-10-13
How we measure bundle size

Batch rendering

The engine groups similar nodes and edges into WebGL draw batches for efficient rendering.

Node data
Edge data
WebGLDraw batches
Illustration · Similar elements share draw batches
Explore the rendering architecture

Targeted updates

Respond to state, position, and viewport changes without recalculating the layout unnecessarily.

Update a node and its connections when its state changes

Illustration · Each change follows its own update path
Tune interaction performance

Actual bundle size and interaction performance vary with your build, data, and device.Explore performance testing

Examples

Explore networks, hierarchies, mind maps, and fishbone diagrams, each with a live demo and source code.

Developer integration

Fits your app,
adapts to your needs

Add G6Lite to your web app, then tailor layouts, interactions, and styles to your use case. Update the graph as your data changes.

Read the quick start
graph.ts
import { Graph } from '@antv/g6-lite';

const graph = new Graph({
  container: 'graph',
  data: {
    nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
    edges: [
      { source: 'a', target: 'b' },
      { source: 'a', target: 'c' },
    ],
  },
  layout: { type: 'circular', radius: 140 },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'hover-highlight'],
});

await graph.render();

Layers that work as one

Graph manages data, layouts, and interactions. WebGL renders nodes and edges, while Canvas 2D draws labels, icons, and group boundaries. A shared viewport and scheduler keep the layers aligned.

Explore the full architecture
Applications
Your applicationWeb · React · Vue
Public API
Graph APIData · Layout · State · Viewport · Extensions
Internals

Data model

Nodes, edges, groups, and states

Layout

Load algorithms and compute positions

Interaction

Canvas events, behaviors, and picking

Scheduling

Schedule updates by change type

Rendering
OverlayCanvas 2D

Labels and icons

MainWebGL

Nodes and edges · On-demand picking

UnderlayCanvas 2D

Combo group boundaries

Layers share a viewport and update scheduling. Internal modules are implementation details, not public APIs.

Get started with G6Lite

Get your first graph on screen with the quick-start guide, or explore the source on GitHub.

Quick start View on GitHub