webdevpuneet.com

Related Snippets

144 in Dashboards category
15–20 of 60

Konva Interactive Node Graph

Fabric.js Sticky Note Board

Interact.js Drag-Drop Kanban

AutoAnimate Kanban Column

AutoAnimate Todo List

CountUp.js Dashboard KPI Row

Konva Interactive Node Graph — Live-Updating Canvas Diagram Snippet

Konva Interactive Node Graph · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsDrag & DropData VisualizationDashboard UIJS Libraries

Copy & paste

Source Code

Requires
JS · konva.min.js
<div class="kng-stage">
  <div class="kng-head">
    <span class="kng-tag">Konva · live edges</span>
    <h2>Interactive Node Graph</h2>
    <p>Drag any node — every connected line updates its endpoint live.</p>
  </div>
  <div id="kngContainer" class="kng-container"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Live edge endpoints
Lines store direct references to their node groups, not coordinate snapshots.
Selective per-drag updates
Only edges touching the dragged node recompute on each dragmove tick.
Nodes as groups
A circle and label combine into one draggable unit with one authoritative position.
Layer-separated rendering
Edges and nodes live on separate Konva layers for clean z-order.
Z-order lift on drag
moveToTop() keeps the actively dragged node visually on top.
Data-driven graph
NODES and EDGES arrays fully describe the graph structure.
Cursor feedback
grab/grabbing cursor states track drag interaction.
batchDraw for efficient repaints
Redraws are scheduled and coalesced rather than forced per event.

About this UI Snippet

Konva Interactive Node Graph — Retained Shapes vs. Manual Redraw

Screenshot of the Konva Interactive Node Graph snippet rendered live

A node-link graph is the clearest possible demonstration of why Konva's retained-shape model is worth the abstraction over a raw <canvas> 2D context. In raw canvas, there is no persistent "node" or "edge" — only pixels. Moving one circle means clearing the entire canvas and redrawing every shape from scratch, every single frame, because the canvas has no memory of what was there before. Konva instead keeps every circle, group, and line as a real, addressable JavaScript object that persists between frames.

Nodes as groups, not just circles

Each node is a Konva.Group containing a Konva.Circle and a Konva.Text label, with draggable: true set on the *group*. Grouping means the circle and its label always move together under one drag gesture, and — critically for this snippet — the group's x()/y() accessors give you a single, authoritative position for "where is this node right now" without averaging or reconciling the positions of its children.

Edges reference nodes directly, not by coordinate snapshot

edgeLines is built by mapping each [fromId, toId] pair to { line, from: nodesById[fromId], to: nodesById[toId] } — storing the actual Konva.Group objects, not a copy of their coordinates at creation time. This is the pattern that makes live updates trivial: because from and to are live references, reading e.from.x() later always returns the node's *current* position, wherever it has since been dragged to.

Updating only what moved

function updateEdgesFor(node) { edgeLines.forEach(function (e) { if (e.from === node || e.to === node) { e.line.points([...]); } }); }

On every dragmove event (which fires continuously while the pointer moves, not just once at the end), this filters to only the edges touching the node currently being dragged and rewrites their points array with each endpoint's live coordinates. Konva's Line.points() setter accepts a flat [x1, y1, x2, y2] array and the line redraws using it — no need to manually clear and re-stroke a path.

Why edges and nodes live on separate layers

edgeLayer sits beneath nodeLayer, both as children of the stage, so edges always render under node circles without manual z-index bookkeeping. Because a Konva Layer is its own canvas, calling edgeLayer.batchDraw() during a drag only repaints the lines' canvas — the node layer's canvas (containing every circle and label) isn't touched unless a node's own layer is separately redrawn, which nodeLayer.batchDraw() in dragstart handles for the z-order change.

The contrast with raw canvas

Written against a bare <canvas>, this same interaction requires you to maintain your own array of node positions, your own hit-testing to determine which node was clicked (checking distance from the pointer to every node's center), and a full ctx.clearRect + redraw-everything cycle on every mousemove. Konva's retained shapes give you hit-testing, dragging, and selective redraws as built-in behavior — this snippet's entire interactive logic is under a dozen lines.

Step by step

How to Use

  1. 1
    Add the Konva CDNInclude konva.min.js from the CDN panel — it attaches a global Konva object.
  2. 2
    Paste HTML, CSS, and JSA 6-node graph renders with its edges pre-connected.
  3. 3
    Drag any nodeEvery line touching that node recomputes its endpoint on every dragmove tick.
  4. 4
    Watch z-order on dragThe dragged node moves to the top of its layer so it never renders behind another.
  5. 5
    Edit NODES and EDGESAdd or remove entries in the two arrays — the graph rebuilds from them.
  6. 6
    Adapt to real dataSwap the label/color per node for live metrics, and add a click handler for details.

Real-world uses

Common Use Cases

Service and infrastructure topology maps
Visualise how backend services connect, where each edge recomputes its endpoints live while a node is dragged.
Workflow and pipeline editors
Build node-based flow builders in which lines follow the nodes, since edges hold direct references to their node groups instead of fixed coordinates.
Teaching retained-mode canvas
Use it as a concrete contrast with raw canvas drawing, where there is no persistent node or edge, only pixels.
Mind maps and concept graphs
Create freeform idea graphs with draggable nodes, where a circle and a label are combined into one group with one authoritative position.
Dependency graph viewers
Show package or module dependencies, where only the edges touching the dragged node are recomputed on each drag frame.

Got questions?

Frequently Asked Questions

Each edge object stores direct references to its two Konva.Group node objects (from and to), not a copy of their coordinates. Reading e.from.x()/e.from.y() at draw time always returns wherever that node currently is, so the line endpoint is always live.

dragmove fires many times per second while a node is being dragged. Recomputing every edge in the graph on every tick wastes work on lines that are not connected to the node that moved; filtering to only edges where from or to matches the dragged node keeps the update proportional to that node\u2019s degree, not the whole graph.

Grouping the circle and its text label means both move together under a single draggable interaction and share one position \u2014 group.x()/group.y() \u2014 which is exactly the value the edges need to read.

Each layer is backed by its own canvas. Keeping edges on their own layer means dragging or moving a node only requires repainting the edges\u2019 canvas and the node layer separately, and it establishes z-order (edges beneath nodes) without manual stacking logic.

Run a simple force simulation (repulsion between all nodes, attraction along edges) in a Konva.Animation loop, updating each node\u2019s x/y every frame and calling updateEdgesFor after each node update, instead of relying on drag for positioning.

Attach a click listener to each group (group.on(\"click\", function() {...})) alongside the existing drag listeners \u2014 Konva shapes support multiple event types independently, so click and drag do not conflict.