C++ → WebAssembly → Browser

Run the real VTK in a browser tab.

The same C++ rendering and filtering pipeline that ships in desktop VTK, compiled to WebAssembly and drawn with WebGL/WebGPU. No server-side rendering, no pixel streaming, no rewrite.

Getting started See live demos

GPU servers required

languages, one runtime

main.ts

import { loadAsync } from "@kitware/vtk-wasm";
const BUNDLE_URL = "https://raw.githack.com/Kitware/vtk-wasm/dist/latest/vtk-wasm32-emscripten.tar.gz";
const runtime = await loadAsync({ url: BUNDLE_URL });
const session = runtime.createStandaloneSession();
const vtk = session.vtk;
// Generate a mesh
const shapes = vtk.vtkPartitionedDataSetCollectionSource({ numberOfShapes: 2 });
const mapper = vtk.vtkCompositePolyDataMapper();
const actor = vtk.vtkActor({ mapper});
actor.property.edgeVisibility = true;
actor.property.edgeColor = [0.2, 0.2, 0.2];
// Add actor a vtkRenderer
const renderer = vtk.vtkRenderer({ background: [0.384314, 0.364706, 0.352941] });
renderer.addActor(actor);
renderer.resetCamera();
// Create a vtkRenderWindow and bind it to a canvas in the DOM
const renderWindow = vtk.vtkWebAssemblyOpenGLRenderWindow({ canvasSelector });
renderWindow.addRenderer(renderer);
const interactor = vtk.vtkWebAssemblyRenderWindowInteractor({ canvasSelector, renderWindow });
interactor.interactorStyle.setCurrentStyleToTrackballCamera();
// Start event loop
interactor.start();

renders an interactive scene, client-side

Four entry points

Pick the language you already write

Each path ends at the same WASM module. Start where your codebase already is.

How it works

01
Install the package
The same package as the JavaScript path; types ship with it.
npm i @kitware/vtk-wasm
02
Generate declarations
A CLI reads the per-class manifests out of your VTK.wasm bundle.
npx vtk-wasm gen-types --url <bundle>
03
Include the output
Drop the .d.ts anywhere tsconfig already picks up, such as src/.
src/vtk-wasm.gen.d.ts
04
Write typed VTK
Per-class methods, properties, and class-typed arguments all check.
vtk.vtkConeSource({ resolution: 32 })

viewer.tsgenerated .d.ts

import { loadAsync, type StandaloneSession } from "@kitware/vtk-wasm";

const runtime = await loadAsync({
  url: "https://raw.githack.com/Kitware/vtk-wasm/dist/latest/vtk-wasm32-emscripten.tar.gz",
  rendering: "webgl", // or "webgpu"
});
const session: StandaloneSession = runtime.createStandaloneSession();
const vtk = session.vtk;

const cone = vtk.vtkConeSource({ resolution: 32 });
const mapper = vtk.vtkPolyDataMapper();
mapper.setInputConnection(cone.getOutputPort());

const actor = vtk.vtkActor({ mapper });
const renderer = vtk.vtkRenderer();
renderer.addActor(actor);

const canvasSelector = session.registerCanvas("!vtk-canvas", canvas);
const interactor = vtk.vtkRenderWindowInteractor({ canvasSelector });
const window = vtk.vtkRenderWindow({ interactor, canvasSelector });
window.addRenderer(renderer);
await window.render();
interactor.start();