Latkit is a TypeScript package family for interactive, browser-based WebGPU visualization of network topology and time-series data.
Documentation · Getting started · API reference · Examples
Install only the packages your application needs.
| Package | Description |
|---|---|
@latkit/network |
Interactive WebGPU network topology views |
@latkit/monitor |
WebGPU time-series and signal monitor views |
@latkit/gpu |
Core WebGPU device and canvas presentation primitives |
@latkit/colormaps |
Named colormaps, labels, and CSS gradient helpers |
@latkit/model |
Shared model primitives for the Latkit package family |
- A WebGPU-capable browser for
@latkit/networkand@latkit/monitor - An ESM-capable bundler or development server
- Node.js 22 or newer when developing Latkit locally
For network visualization:
npm install @latkit/gpu @latkit/network @latkit/colormapsFor monitor visualization:
npm install @latkit/gpu @latkit/monitor @latkit/colormapsimport { colormap } from '@latkit/colormaps';
import { requestDevice } from '@latkit/gpu';
import { createNetwork, type Topology } from '@latkit/network';
const canvas = document.querySelector<HTMLCanvasElement>('#network');
if (!canvas) {
throw new Error('Missing #network canvas.');
}
const topology: Topology = {
vertexCount: 3,
vertexCoords: new Float32Array([-96, 30, -95, 31, -94, 30]),
edges: new Uint32Array([0, 1, 1, 2]),
polylineStart: new Uint32Array([0, 0, 0]),
};
const device = await requestDevice();
const network = await createNetwork(device, canvas, {
colormap: colormap('viridis'),
graticule: true,
});
network.load(topology);
network.setChannel('vertexColor', new Float32Array([0.1, 0.8, 0.4]), [0, 1]);
network.fadeIn();See the network quickstart and monitor quickstart for complete usage and lifecycle guidance.
Install the workspace dependencies, then run either example in a WebGPU-capable browser:
pnpm install
pnpm --filter @latkit/network-example devpnpm --filter @latkit/monitor-example devThe network example runs at http://127.0.0.1:5188; the monitor example runs at http://127.0.0.1:5190.
The full guides and generated TypeScript API reference are published on Read the Docs. Documentation sources live in docs/ and use MyST Markdown with Sphinx.
Build the documentation locally with:
pnpm docs:buildpnpm install
pnpm qualityThe quality command checks formatting, linting, types, and tests across the workspace. See the release process for package publishing details.
Selected related projects include:
Latkit is developed by Luke Lowery and began during his PhD studies at Texas A&M University. See his Google Scholar profile for publications and the author page for more information.
Latkit packages are released under the MIT License.