This site mirrors the complete official example set of vis-network, the dynamic network visualisation library from the Vis.js family. Every demo below is live: drag nodes, zoom in, change the physics, then view the page source to see exactly how it is built.
Browse Examples Getting Started GuideThe standalone build bundles everything, including the DataSet. One script tag is enough.
Add the standalone script hosted on this site. No build step, no bundler.
Wrap two arrays in vis.DataSet — nodes with id and label, edges with from and to.
Call new vis.Network(container, data, options) and the physics engine lays the graph out for you.
<script src="https://vis.rapporteur.online/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork" style="height: 420px; border: 1px solid #D9E0E4;"></div>
<script>
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" }, { id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" }, { id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" }
]);
var edges = new vis.DataSet([
{ from: 1, to: 3 }, { from: 1, to: 2 },
{ from: 2, to: 4 }, { from: 2, to: 5 }
]);
var network = new vis.Network(
document.getElementById("mynetwork"),
{ nodes: nodes, edges: edges }, {});
</script>Prefer modules or the peer build that shares a DataSet with other Vis libraries? The getting started guide covers all three builds, or open the standalone, peer and legacy basic-usage demos side by side.
Basic Usage · Basic Usage · Data · Data — DOT Language · Edge Styles · Events · Example Applications · Node Styles — Image Selection · Labels · Layout · Node Styles · Other · Physics · Tests · Version Migration · Version Migration — 5.4.1 to 6.0.0
1 interactive example — open one, drag the nodes, and read its source.
4 interactive examples — open one, drag the nodes, and read its source.
7 interactive examples — open one, drag the nodes, and read its source.
3 interactive examples — open one, drag the nodes, and read its source.
11 interactive examples — open one, drag the nodes, and read its source.
3 interactive examples — open one, drag the nodes, and read its source.
6 interactive examples — open one, drag the nodes, and read its source.
1 interactive example — open one, drag the nodes, and read its source.
7 interactive examples — open one, drag the nodes, and read its source.
8 interactive examples — open one, drag the nodes, and read its source.
16 interactive examples — open one, drag the nodes, and read its source.
17 interactive examples — open one, drag the nodes, and read its source.
3 interactive examples — open one, drag the nodes, and read its source.
1 interactive example — open one, drag the nodes, and read its source.
1 interactive example — open one, drag the nodes, and read its source.
1 interactive example — open one, drag the nodes, and read its source.
An open-source JavaScript library for visualising networks and graphs in the browser. You give it nodes and edges; it renders an interactive canvas graph with zooming, dragging, selection, clustering and a built-in physics simulation. It is part of the Vis.js family and is maintained by the visjs community.
Each demo is a static page that runs entirely in your browser. The graphs you see are drawn from data bundled with the page itself. A few demos load helper libraries (such as Alea or vis-data) from public CDNs, exactly as the upstream examples do.
Start with the standalone build — one file, everything bundled. Use the peer build when you combine vis-network with other Vis packages and want to share one DataSet, and the ESNext build when a bundler handles your dependencies. The guide walks through each option.
Yes. vis-network is dual-licensed under Apache-2.0 OR MIT, so the library and its examples can be used in open-source and commercial projects under either licence. Keep the licence notice with your copies, as both licences require.