diff --git a/.gitignore b/.gitignore
index 64440fb..104d01c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
node_modules
docs/.vitepress/dist
docs/.vitepress/cache
+docs/api
docs/public/demo/playground
docs/public/demo/simple-app
examples/cpp/vtk
diff --git a/README.md b/README.md
index 9751b62..19d5154 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,52 @@
-# vtk-wasm
+# @kitware/vtk-wasm
-## Project Structure and Build Scripts
+JavaScript bindings for loading and driving [VTK](https://www.vtk.org) compiled to WebAssembly — build 3D visualizations in the browser with no C++ required.
-This repository provides the infrastructure to bundle the pure JavaScript library for loading VTK.wasm.
+**Full documentation, guides, and API reference:** https://kitware.github.io/vtk-wasm/
-The full usage documentation of vtk-wasm can be found at: https://kitware.github.io/vtk-wasm/
+## Usage
-### File Structure
+Install the package:
-- `dist/` — Bundled output files.
-- `examples/` — Example applications demonstrating vtk-wasm usage.
-- `docs/` — Documentation and guide pages.
-- `src/` — Source code for the library.
-- `README.md` — Project documentation.
-- `package.json` — Project metadata and build scripts.
-
-### Build Scripts
-
-The following scripts are available in `package.json`:
+```bash
+npm install @kitware/vtk-wasm
+```
-- **`npm run docs:dev`** - Starts a local development server for the guide pages with live reloading
-- **`npm run docs:build`** - Builds the guide pages for VTK.wasm
-- **`npm run build`** — Builds the ESM and UMD bundles for both RemoteSession and StandaloneSession.
-- **`npm run build:esm`** — Builds only the ESM bundles.
-- **`npm run build:examples`** — Builds the example applications.
-- **`npm run build:vtk`** — Builds only the UMD bundle for StandaloneSession.
-- **`npm run build:viewer`** - Builds the vtkWASMViewer JavaScript library.
-- **`npm run clean`** — Cleans the `dist/` directory.
-- **`npm run lint`** — Runs code linting on the source files.
+Load the runtime, create a session, and use its `vtk` namespace:
-### Bundles
+```js
+import { loadVtkWasmAsync } from "@kitware/vtk-wasm";
-- **ESM Bundles:** For both RemoteSession and StandaloneSession.
-- **UMD Bundle:** For StandaloneSession, exposed as the `VTK` namespace for use in browser environments.
+const runtime = await loadVtkWasmAsync({ url: VTK_WASM_BUNDLE_URL });
+const session = runtime.createStandaloneSession();
+const vtk = session.vtk;
-Refer to the `package.json` for the full list of scripts and configuration details.
+const cone = vtk.vtkConeSource();
+// ... build and render your scene
+```
-### ESM imports
+No build step? Load the UMD bundle from a CDN and use the global `vtkWASM`:
-```js
-import { RemoteSession } from "@kitware/vtk-wasm/remote"
-import { createVtkObjectProxy, createNamespace } from "@kitware/vtk-wasm/vtk"
-import { ExportViewer, createViewer } from "@kitware/vtk-wasm/viewer"
+```html
+
```
-### RemoteSession progress
+See the [Loading VTK.wasm guide](https://kitware.github.io/vtk-wasm/guide/js/loading) to get started and the [API reference](https://kitware.github.io/vtk-wasm/api/) for every export.
-```js
-import { RemoteSession } from "@kitware/vtk-wasm/remote"
+## Contributing
-const session = new RemoteSession()
-const removeProgress = session.addProgressCallback(({ active, state, hash }) => {
- // state: { current, total }, hash: { current, total }
- // active is true while states/blobs are being fetched
-})
+Requires [Node.js](https://nodejs.org/) (LTS).
-// Later, to stop listening:
-removeProgress()
+```bash
+npm install # install dependencies
+npm run build # build the ESM + UMD bundles into dist/
+npm run docs:dev # run the documentation site locally
+npm run lint # lint the source
```
-### UMD imports
+### Repository layout
-```js
-import "@kitware/vtk-wasm/viewer.css";
-import "@kitware/vtk-wasm/viewer-umd.js";
-
-import "@kitware/vtk-wasm/vtk-umd.js";
-```
+- `src/` — library source.
+- `examples/` — example applications.
+- `docs/` — documentation site (VitePress); the API reference is generated from source JSDoc.
+- `dist/` — build output.
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index fbec974..40569c3 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -1,7 +1,28 @@
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
import { defineConfig } from "vitepress";
+import { withMermaid } from "vitepress-plugin-mermaid";
+
+// API reference sidebar generated by TypeDoc (npm run docs:api). Falls back to
+// an empty list so the docs still build before the API has been generated.
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const apiSidebarFile = resolve(__dirname, "../api/typedoc-sidebar.json");
+
+// TypeDoc marks every group `collapsed: true`; expand them by default.
+const expandSidebar = (items) =>
+ items.map((item) =>
+ item.items
+ ? { ...item, collapsed: false, items: expandSidebar(item.items) }
+ : item,
+ );
+
+const apiSidebar = existsSync(apiSidebarFile)
+ ? expandSidebar(JSON.parse(readFileSync(apiSidebarFile, "utf-8")))
+ : [];
// https://vitepress.dev/reference/site-config
-export default defineConfig({
+export default withMermaid(defineConfig({
base: "/vtk-wasm",
title: "VTK.wasm",
description: "Guides and documentation around VTK.wasm",
@@ -50,6 +71,7 @@ export default defineConfig({
nav: [
{ text: "Home", link: "/" },
{ text: "News", link: "/news" },
+ { text: "API", link: "/api/" },
{ text: "Guides", link: "/guide/" },
{ text: "Roadmap",
items: [
@@ -91,10 +113,11 @@ export default defineConfig({
{
text: "For JavaScript developers",
items: [
- { text: "Getting started", link: "/guide/js/" },
+ { text: "Loading VTK.wasm", link: "/guide/js/loading" },
+ { text: "Standalone Session", link: "/guide/js/standalone-session" },
{ text: "Primer on VTK.wasm", link: "/guide/js/primer" },
- { text: "HTML Script Tag", link: "/guide/js/plain" },
- { text: "Bundler Integration", link: "/guide/js/bundler" },
+ { text: "Remote Session", link: "/guide/js/remote-session" },
+ { text: "Adding VTK.wasm to a Project", link: "/guide/js/integration" },
],
},
{
@@ -113,6 +136,10 @@ export default defineConfig({
],
},
],
+ "/api/": [
+ { text: "API Reference", link: "/api/" },
+ ...apiSidebar,
+ ],
"/roadmap/": [
{ text: "Overview", link: "/roadmap/" },
{ text: "Module Availability", link: "/roadmap/modules" },
@@ -124,4 +151,4 @@ export default defineConfig({
{ icon: 'github', link: 'https://github.com/Kitware/vtk-wasm' }
]
},
-});
+}));
diff --git a/docs/guide/js/bundler.md b/docs/guide/js/bundler.md
deleted file mode 100644
index 0409b81..0000000
--- a/docs/guide/js/bundler.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Bundler Integration
-
-Modern web development rely on package manager to bring project dependencies. This section covers how published releases can be used within a JavaScript project.
-
-## Project setup
-
-In the simple example we are going to use [Vite](https://vite.dev/) with Vanilla JavaScript. The full code is available for reference [here](https://github.com/Kitware/vtk-wasm/tree/main/examples/js/simple-app). Please note that you should use a concrete version, or "latest" for the `@kitware/vtk-wasm` package. Here, the example uses a relative path to the `vtk-wasm` project root, so the in-repo documentation stays relevant.
-
-::: code-group
-<<< ../../../examples/js/simple-app/package.json
-<<< ../../../examples/js/simple-app/index.html
-<<< ../../../examples/js/simple-app/src/main.js [src/main.js]
-<<< ../../../examples/js/simple-app/src/example.js [src/example.js]
-<<< ../../../examples/js/simple-app/src/style.css [src/style.css]
-```bash [Install/Build]
-npm install
-npm run build
-```
-:::
-
-Here, the VTK.wasm bundle is downloaded in the browser directly from the Gitlab package registry. See the `src/main.js` file for the relevant code.
-
-
-## Result
-
-
-
-[Full Screen Viewer](../../demo/simple-app/index.html){target="_blank"}
diff --git a/docs/guide/js/index.md b/docs/guide/js/index.md
deleted file mode 100644
index 99f4a1b..0000000
--- a/docs/guide/js/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# VTK.wasm from JavaScript
-
-This guide focuses on using the VTK WASM bundle from plain JavaScript, requiring no prior C++ knowledge. VTK.wasm allows you to use [VTK](https://www.vtk.org) without needing to learn C++. This can be particularly beneficial for web developers who are already familiar with JavaScript and want to integrate advanced visualization capabilities into their web applications.
-
-## Overview
-Most C++ classes from the [VTK C++ Documentation](https://vtk.org/doc/nightly/html/) are available through a single JavaScript object, which we refer to as the **vtk** namespace.
-
-Once you have access to the **vtk** namespace (see [Bundler Integration](./bundler.md)), you can interact with VTK classes using standard JavaScript.
-
-
-
-const vtk = await window.vtkReady;
-
-
-
-The following sections will guide you through the essential aspects of using VTK.wasm with JavaScript:
-
-- [Primer on VTK.wasm](./primer.md)
-- [HTML Script Tag](./plain.md)
-- [Bundler Integration](./bundler.md)
diff --git a/docs/guide/js/integration.md b/docs/guide/js/integration.md
new file mode 100644
index 0000000..0a54ce6
--- /dev/null
+++ b/docs/guide/js/integration.md
@@ -0,0 +1,79 @@
+# Adding VTK.wasm to a Project
+
+There are two ways to get VTK.wasm into a web project:
+
+- **HTML Script Tag** — load a prebuilt bundle from a CDN, no build step required. Best for quick prototypes, demos, and embedding into existing pages.
+- **Bundler** — install the `@kitware/vtk-wasm` package and `import` it. Best for application development with a tool like Vite.
+
+Either way you end up calling [`loadVtkWasmAsync`](./loading.md); only how it reaches the page differs.
+
+## HTML Script Tag
+
+Use VTK.wasm directly in an HTML file using a `