Latkit

Latkit is a TypeScript package family for browser-based WebGPU visualization of network topology and monitor data.

Use it when you need to render large graph-like systems, stream many time-oriented readings, or share colormap behavior across those visualizations.

Start here

Goal	Read
Install packages and run an example	Get started
Render a small network	Create a network view
Render monitor traces	Create a monitor
Shape real data for the renderer	Topology and channels
Look up public types and methods	API reference

Requirements

Latkit packages are ESM modules for modern browser applications. The rendering packages require a browser with WebGPU support. The repository uses Node.js 22 or newer for local development.

Packages

Package	Use it for
@latkit/network	Interactive WebGPU network topology views
@latkit/monitor	WebGPU time-series and signal monitor views
@latkit/gpu	Core WebGPU device and presentation primitives
@latkit/colormaps	Named colormaps, labels, and CSS gradients
@latkit/model	Shared model primitives as the package family grows

Learn

• Getting started
  • Prerequisites
  • Install packages
  • Choose a package
  • Use public entrypoints
  • Run the examples
  • Next steps
• Create a network view
  • Create a canvas
  • Build a topology
  • Add interaction handlers
  • Run the full example
• Create a monitor
  • Create a canvas
  • Load a series
  • Inspect readings
  • Run the full example

How-to

• Topology and channels
  • Topology arrays
  • Projection support
  • Channel arrays
  • Validation failures
• Colormaps
  • Use a colormap
  • Build a legend
  • Choose sequential or diverging maps
• Lifecycle and failures
  • Handle WebGPU support
  • Listen for device loss
  • Pause and resume rendering
  • Release resources

Explanation

• Architecture
  • Runtime shape
  • Package boundaries
  • Documentation boundary
  • Public API boundary

Reference

• API reference
  • Common entrypoints

Project

• Release process
• About the author