JavaScript — hello canvas

@modkit/core ships the engine compiled to WebAssembly. Give it a canvas and you get a runtime — the same frame loop as the C API, driven from TypeScript.

This is running below. It is not a video.

@modkit/core · corePauseReset

The code

import { createModkit } from '@modkit/core';

const runtime = await createModkit({
  canvas: document.querySelector('canvas'),
  profile: 'core',
});

runtime.onFrame(() => {
  const pulse = 0.5 + 0.5 * Math.sin(runtime.time * 0.8);
  const grey = Math.round(17 + pulse * 34);
  const hex = `#${grey.toString(16).padStart(2, '0').repeat(3)}`;

  const pass = runtime.beginPass({ clearColor: hex });
  runtime.finishPass(pass);
});

runtime.start();

onFrame returns an unsubscribe function, and runtime.dispose() tears everything down — which matters on a docs page, where a demo has to release its GL context when you navigate away.

Profiles

The runtime comes in profiles, so you only download the engine you use:

Profile	Size	Contains
core	~1.8 MB	passes, 2D drawing, input, text
3d	~2.2 MB	the above plus meshes, materials, lighting, scenes

Both are single-threaded, so they need no SharedArrayBuffer and no cross-origin isolation headers — a plain static host serves them.

Loading the wasm

The package locates its own binary with new URL('./wasm/…', import.meta.url), which Vite, Rollup and esbuild all understand. There is nothing to copy into a public directory and no path to configure:

// This is all the setup there is.
import { createModkit } from '@modkit/core';

Next: a lit 3D scene.