Open-source graph visualization
Interactive network visualization with a WebAssembly graph store
Helios pairs a visual WebGPU/WebGL renderer with a data-first graph core. Use Helios Web when you need an interactive graph view for networks or embeddings. Use Helios Network when you need graph creation, attributes, selection, and serialization across JavaScript/WASM, Python, and native C. Use the CLI, Widget, Desktop, and agentic skills when you need automation, notebooks, native documents, or agent-driven workflows.
Helios Web
The browser visualization package: rendering, camera controls, behaviors, mappers, filters, labels, legends, layouts, persistence, and figure export. The hosted app and examples import the released `helios-web` package.
Helios Network
The graph data package: a native C core compiled to WebAssembly, with JavaScript, Python, and C surfaces for attributes, selectors, queries, embeddings, and import/export.
Source-first API docs
API pages are regenerated from public exports plus JSDoc, Python docstrings, and Doxygen comments. Declaration files are downstream compatibility artifacts, not the place where API documentation is authored.
Apps and integrations
Helios CLI, Helios Widget, Helios Desktop, and portable skills reuse the same Web and Network runtime with host-specific persistence and workflow surfaces.
How The Pieces Fit
Helios is not a single monolithic viewer. The graph store, renderer, behaviors, UI panels, persistence, and host applications are separate layers that can be used together or independently.
- Graph data lives in Helios Network. It owns topology, typed attributes, selectors, queries, measurements, and import/export.
- Visual state lives in Helios Web. Mappers translate attributes into colors, sizes, opacity, widths, outlines, labels, legends, and density overlays.
- Interaction behavior is modular. Selection, hover, labels, legends, filters, layouts, export, interface state, and persistence are behaviors that can be configured or replaced.
- Host state belongs to the app. Browser storage, CLI sessions, notebook widget state, and desktop documents reuse the same runtime but persist data differently.
That split is why the documentation has both visual examples and data/API examples. Start with the visual examples when you are building an interface; start with the data/API examples when you are converting files, writing Python, or manipulating graphs programmatically.
Install
Use the current 0.10 release packages for browser and data workflows.
For data-only JavaScript:
For Python:
See Getting Started and Installation And Bundling for Vite, package.json, CDN-style imports, and local checkout setup.
First Choices
| Goal | Start With |
|---|---|
| Render a graph in a browser | First visual graph |
| Build visual controls, mappers, filters, labels, or legends | Visual examples |
| Load/save graph files or manipulate attributes | Data/API examples |
| Choose a file format | Data formats |
| Understand sessions, autosave, and portable visualization state | Persistence guide |
| Inspect every public class and method | API reference |
Minimal App Shape
import HeliosNetwork from "helios-network";
import { Helios } from "helios-web";
const network = await HeliosNetwork.create({ directed: false });
network.addNodes(2);
network.addEdges([[0, 1]]);
const helios = new Helios(network, {
container: document.querySelector("#app"),
});
await helios.ready;
helios.frameNetwork({ animate: false });
Documentation Status
This preview build is source-first: API pages are generated from public exports and source annotations, while guides and examples are written around runnable code. When a guide says a behavior, format, option, or import path is supported, it should either link to the generated API reference or show a minimal working example.
The rendered examples import the same staged bundles that power the hosted docs and app routes.