Skip to content
VTK.wasm v3.0.5

See your scientific data on the web using the Visualization ToolKit.

VTK.wasm gives you VTK C++ compiled for the browser, so you can move the data processing and rendering pipelines you are already familiar with from desktop VTK to the browser through WebAssembly, WebGL, and WebGPU

Demos

Volume rendering
Volume rendering531k voxels ray cast on the GPU, change transfer function preset
Dynamic mesh
Dynamic meshProcedural wave surface, rebuilt every frame
A thousand actors and more
A thousand actors and moreEvery object its own vtkActor, add more to test performance

Get it

npm i @kitware/vtk-wasm && npx vtk-wasm gen-types --url https://raw.githack.com/Kitware/vtk-wasm/dist/latest/vtk-wasm32-emscripten.tar.gz
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.vtkWebAssemblyRenderWindowInteractor({ canvasSelector });
const window = vtk.vtkWebAssemblyOpenGLRenderWindow({ interactor, canvasSelector });
window.addRenderer(renderer);
await window.render();
interactor.start();
Read the TypeScript guide →viewer.ts · Types match the bundle you load.

Architecture

  1. Loadthree entry points
    • <script src="…">Global vtkwasm on window
    • import { loadAsync }Bundler import from the npm package
    • Annotation script tagLoads the runtime and opens a standalone session in one step
    loadAsync({ url, rendering }) Fetches and instantiates the bundle, in webgl or webgpu.
    returnsVtkWasmRuntime
  2. Runtime & sessionsone session, cached per url + config
    • StandaloneSessionlocalsession.vtk creates objects, builds the pipeline and renders.vtkConeSource()vtkActor()registerCanvas()
    • RemoteSessiondrivenState arrives from elsewhere. Bind a transport and a canvas, then apply updates.bindNetwork()bindCanvas()update()
    teardownsession.dispose()thenruntime.dispose()
  3. The WASM boundaryObjectManager
    • SerializerC++ objects → state
    • Deserializerstate → C++ objects
    Marshal contextone registry per session
    • Weak objectsBorrowed handles
    • Strong objectsOwned, ref-counted
    • StatesJSON per object
    • BlobsBinary arrays
  4. Real VTK, compiledthe desktop pipeline, unchanged
    • Sources & filtersReaders, geometry, algorithms
    • Mappers & actorsScene graph and properties
    • Render windowRenderers, cameras, lights
    • InteractorEvent loop, trackball styles
    <canvas>WebGLWebGPU Drawn on the client GPU, at interactive frame rates.

Status

9.7.20260920
released
September 20, 2026
Support vtkLODProp3D in webgl2 backend
released
September 19, 2026
Enable marshalling for IOXML readers and writers
released
September 19, 2026
next
planned
Build VTK.wasm with shared library support