Installation

The three packages

Package	What it is	When you need it
@casoon/castwright	Parser, compiler, the castwright CLI, and the Vite plugin	Always
@casoon/castwright-player	<castwright-demo>, the web component	Whenever a demo appears in a browser
@casoon/astro-castwright	Astro integration and <TerminalDemo />	Astro projects only

shiki is an optional extra: add it only if your demos use the show step. Likewise node-pty, a native module, only for the exec step.

Astro

pnpm add -D @casoon/castwright @casoon/astro-castwright @casoon/castwright-player

// astro.config.mjs
import castwright from '@casoon/astro-castwright';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [castwright()],
});

Any other Vite framework

SvelteKit, Nuxt, Remix, SolidStart, Qwik, VitePress, plain Vite — the plugin is the whole integration, and the Astro package is unnecessary:

pnpm add -D @casoon/castwright @casoon/castwright-player

// vite.config.ts
import { castwright } from '@casoon/castwright/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [castwright()],
});

For TypeScript, add the types for *.terminal.yaml imports:

{ "compilerOptions": { "types": ["@casoon/castwright/vite/client"] } }

No bundler at all

Build the cast ahead of time with the CLI and load the player as one module script. It registers the custom element on import and carries xterm.js’s stylesheet with it, so there is no second file to remember:

castwright build demo.terminal.yaml -o public

<script type="module" src="/castwright-player.js"></script>

<castwright-demo src="/demo.cast" autoplay loop>
  <pre>$ npm install
added 42 packages</pre>
</castwright-demo>

Caution: The <pre> is not decoration. It is what a screen reader and a visitor without JavaScript get — see Accessibility.