English | 简体中文

G6Lite

A lightweight, high-performance WebGL engine for interactive graph visualization.

Website · Quick Start · API · Examples

Why G6Lite

• GPU-first graph rendering — Nodes and edges share a batched WebGL pipeline designed for responsive relationship exploration.
• Incremental by design — State, position, and data changes are scheduled by refresh level, avoiding unrelated full rebuilds.
• Layouts and interactions included — Use @antv/layout algorithms together with configurable zoom, pan, drag, select, and highlight behaviors.
• An explicit extension surface — Import from the package root, map data to styles with functions, and add capabilities through the unified register() API.

Install

npm install @antv/g6-lite

Quick Start

Create a container with an explicit size:

<div id="graph" style="width: 800px; height: 500px"></div>

Then create and render an interactive graph:

import { Graph } from '@antv/g6-lite';

const graph = new Graph({
  container: 'graph',
  data: {
    nodes: [
      { id: 'gateway', data: { role: 'core' } },
      { id: 'orders', data: { role: 'service' } },
      { id: 'inventory', data: { role: 'service' } },
    ],
    edges: [
      { source: 'gateway', target: 'orders' },
      { source: 'gateway', target: 'inventory' },
    ],
  },
  node: {
    type: 'circle',
    style: {
      size: 18,
      fill: (node) => (node.data?.role === 'core' ? '#1677ff' : '#36cfc9'),
    },
  },
  edge: { type: 'line', style: { lineWidth: 2 } },
  layout: { type: 'circular', radius: 140 },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'hover-highlight'],
});

await graph.render();

Only package-root exports from @antv/g6-lite and package.json#exports are public API. Deep src/ paths are internal and may change without notice.

Learn More

• Website
• Quick Start
• Core Concepts
• Data and Configuration
• API Reference
• Examples
• Performance Metrics
• Browser Compatibility

Local Development

npm install
npm run dev

Run the project verification pipeline with npm run ci, and build the documentation site with npm run site.

Contributing

Before opening a pull request, read the contributing guide. Report bugs, feature requests, and usage questions through GitHub Issues.

License

MIT © AntV