@socketscope/visualizer

The Topology canvas for SocketScope — React Flow + animated SVG packet overlay.

Already included when you install @socketscope/ui. Install standalone only if you want to embed the canvas elsewhere.

Install

pnpm add @socketscope/visualizer @socketscope/core @xyflow/react

Usage

import { Topology } from '@socketscope/visualizer';

<div style={{ width: 800, height: 600 }}>
  <Topology />
</div>

The canvas reads nodes / edges from the SocketScope store. Either:

• Live mode — call initSocketScope() and mount useDerivedTopology(true) from @socketscope/ui. Nodes + edges populate from observed WebSocket traffic.
• Manual mode — write your own nodes/edges via useSocketScope.setState({ nodes, edges }).

License

MIT