First Visual Graph
This is the shortest path from graph data to a rendered Helios view. It creates a small WASM-backed graph, mounts Helios Web into the example render area, and lets the default renderer and GPU-force layout behavior produce the first view.
Render A Small Graph
The full Helios Web visual examples expand from this baseline into labels, mappers, legends, layouts, filters, persistence, exporter output, touch behavior, and custom behaviors.
{"importMap": {"helios-web": "../vendor/helios/helios-web.es.js", "helios-network": "../vendor/helios/helios-network.js"}, "examples": [{"id": "getting-started--interactive.md--example-1", "title": "Render A Small Graph", "render": true, "console": true, "autorun": true, "layout": "split", "width": null, "height": "420px", "headerName": null, "headerCode": "", "bodyName": "helios_web_first_visual_graph", "bodyCode": "import HeliosNetwork from \"helios-network\";\nimport { Helios } from \"helios-web\";\n\nconst network = await HeliosNetwork.create({ directed: false });\n\nconst nodes = network.addNodes(6);\nnetwork.addEdges([\n [nodes[0], nodes[1]],\n [nodes[1], nodes[2]],\n [nodes[2], nodes[3]],\n [nodes[3], nodes[4]],\n [nodes[4], nodes[5]],\n [nodes[5], nodes[0]],\n [nodes[0], nodes[3]],\n]);\n\nconst helios = new Helios(network, {\n container,\n mode: '2d',\n});\n\nawait helios.ready;\nawait new Promise((resolve) => setTimeout(resolve, 900));\nhelios.frameNetwork({ animate: false });", "headerRefs": [], "bodyRefs": []}]}