English | 简体中文

G6Lite

Lightweight graph visualization, built for large-scale relationship data

Flexible layouts and interactions, paired with lightweight, efficient WebGL rendering, bring large-scale relationships into focus and make data exploration feel fluid.

Website · Quick Start · API · Examples

Why G6Lite

• Lightweight loading — Keep the core separate from layouts and load algorithms on demand to reduce initial loading overhead.
• Efficient rendering — Combine batched WebGL rendering with incremental updates to display and explore large-scale relationship graphs.
• Flexible layouts and interactions — Choose from multiple graph layouts and add zoom, pan, drag, selection, and highlighting.
• Customization and extensions — Map business data to visual styles and extend graph elements, layouts, and interactions as needed.
• AI-assisted development — Use the G6Lite Skill to help an agent create graphs, refine styles, and configure interactions.

Install

npm install @antv/g6-lite

Quick Start

Create a container with an explicit size:

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

Then create and render an interactive graph:

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

const graph = new Graph({
  container: '#container',
  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.

CDN / UMD

Use the UMD build directly in a browser without a bundler. It exposes window.G6Lite and includes the runtime dependencies, layouts, and an inline layout Worker:

<div id="container" style="width: 100%; height: 500px"></div>
<script src="https://cdn.jsdelivr.net/npm/@antv/g6-lite@beta/dist/g6-lite.min.js"></script>
<script>
  const graph = new G6Lite.Graph({
    container: '#container',
    data: {
      nodes: [{ id: 'gateway' }, { id: 'orders' }, { id: 'inventory' }],
      edges: [
        { source: 'gateway', target: 'orders' },
        { source: 'gateway', target: 'inventory' },
      ],
    },
    layout: { type: 'circular', radius: 140 },
    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
  });
  graph.render().catch(console.error);
</script>

• jsDelivr
• UNPKG

Pin beta to an exact published version in production. The UMD badge measures the complete CDN download; the Bundlephobia badge measures the npm entry bundled by that service.

Learn More

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

Local Development

npm install
npm run dev

Verify your change with npm run lint, npm run typecheck, npm test, npm run build and npm run size, and build the documentation site with npm --prefix site run build.

npm run build generates the ESM output, type declarations, and dist/g6-lite.min.js (with a source map).

Contributing

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

License

MIT © AntV