Cytoscape.js v4
WebGPU demo

Network

Style:

Generated size (gen/compound):

Background:

View

Animated:
Rendered bounding box:

Pan: 0

Zoom: 1

Layout

Animate (force: hands the integrator to the GPU)

Seed: Time taken: —

Selection

v4 has no selector strings — this takes a query object:

Examples:

Toggles on selected

Core toggles

panningEnabled

userPanningEnabled

zoomingEnabled

userZoomingEnabled

boxSelectionEnabled

autolock

autoungrabify

autounselectify

boxSelectionIncludesLabels (v4)

selectionType:

boxSelectionMode (v4):

wheelSensitivity:

zoom min: max:

Add & remove

nodes: edges:

—

Events

LOD

Edge width floor (px):

Node plain-disc below (px):

Size floor (px):

Zoom-based edge dimming

Target arrowheads (triangle)

Render scale min:

Render scale max:

Labels

SDF labels (the sheet's own mapping)

Min label size (px, 0 = off):

Loading

Columnar load (toColumnarElements)

Binary wire round trip (serializeElements)

Wheel: zoom about cursor. Drag background: pan. Drag node: move (edges follow on-GPU). Click: select (shift = additive). Shift-drag background: box select.

Open the debug console for timings and errors.

Cytoscape.js v4WebGPU demo