Interactive examples

CanvasGE docs use a shared <SandpackExample /> wrapper around Sandpack.

It is configured for engine docs by default:

• Uses template="vanilla-ts" for TypeScript examples.
• Injects a hidden, read-only /tsconfig.json with experimentalDecorators: true.
• Accepts a multi-file files object.
• Lets you hide boilerplate files with hiddenFiles or file-level hidden: true.

Component API

<SandpackExample
  files={{ "/index.ts": "console.log('hello')" }}
  hiddenFiles={["/package.json"]}
  visibleFiles={["/index.ts"]}
  activeFile="/index.ts"
  customSetup={{
    dependencies: {
      "sliver-engine": "latest",
    },
  }}
/>

Multi-file + hidden boilerplate

The example below keeps the decorator helper hidden from the reader while still compiling and running.

import { onSpawn } from "./decorators";

export class Player {
@onSpawn()
public spawn(): void {
	console.log("Player spawned");
}
}