diff --git a/.gitignore b/.gitignore
index 6240da8..48cfc27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 dist/
 # generated types
 .astro/
+public/snapshot
 
 # dependencies
 node_modules/
diff --git a/astro.config.mjs b/astro.config.mjs
index 4605f7a..b7e7ab3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -12,6 +12,12 @@ export default defineConfig({
 	site: "https://bomb.sh/",
 	base: "/docs",
 	outDir: "./dist/docs/",
+	server: {
+		headers: {
+			'Cross-Origin-Embedder-Policy': 'require-corp',
+			'Cross-Origin-Opener-Policy': 'same-origin'
+		}
+	},
 	integrations: [
 		starlight({
 			title: "Bombshell",
diff --git a/package.json b/package.json
index be532aa..2ab6054 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,13 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
+    "dev:snapshot": "",
     "start": "astro dev",
+    "prebuild": "node run snapshot",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "snapshot": "node ./scripts/snapshot.ts"
   },
   "dependencies": {
     "@astrojs/starlight": "^0.37.1",
@@ -17,9 +20,17 @@
     "@types/node": "^22.19.3",
     "astro": "^5.16.6",
     "expressive-code-twoslash": "^0.5.3",
+    "@webcontainer/api": "^1.6.1",
+    "@webcontainer/snapshot": "^0.1.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "sharp": "^0.33.5",
     "starlight-sidebar-topics": "^0.6.2"
   },
+  "devDependencies": {
+    "tinyexec": "^1.0.2"
+  },
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93c4054..73e0129 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,21 @@ importers:
       '@types/node':
         specifier: ^22.19.3
         version: 22.19.3
+      '@webcontainer/api':
+        specifier: ^1.6.1
+        version: 1.6.1
+      '@webcontainer/snapshot':
+        specifier: ^0.1.0
+        version: 0.1.0
+      '@xterm/addon-fit':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@xterm/addon-web-links':
+        specifier: ^0.12.0
+        version: 0.12.0
+      '@xterm/xterm':
+        specifier: ^6.0.0
+        version: 6.0.0
       astro:
         specifier: ^5.16.6
         version: 5.16.6(@types/node@22.19.3)(rollup@4.55.1)(typescript@5.8.2)
@@ -35,6 +50,10 @@ importers:
       starlight-sidebar-topics:
         specifier: ^0.6.2
         version: 0.6.2(@astrojs/starlight@0.37.1(astro@5.16.6(@types/node@22.19.3)(rollup@4.55.1)(typescript@5.8.2)))
+    devDependencies:
+      tinyexec:
+        specifier: ^1.0.2
+        version: 1.0.2
 
 packages:
 
@@ -526,6 +545,10 @@ packages:
   '@mdx-js/mdx@3.1.1':
     resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
 
+  '@msgpack/msgpack@3.1.3':
+    resolution: {integrity: sha512-47XIizs9XZXvuJgoaJUIE2lFoID8ugvc0jzSHP+Ptfk8nTbnR8g788wv48N03Kx0UkAv559HWRQ3yzOgzlRNUA==}
+    engines: {node: '>= 18'}
+
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
@@ -773,6 +796,22 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  '@webcontainer/api@1.6.1':
+    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
+
+  '@webcontainer/snapshot@0.1.0':
+    resolution: {integrity: sha512-PTIGQ3osUpTbK/dqB8RYbcZGv8IK+DJACx709z5sFbeIlngB3hUFpTEYFYs1SbUvr/AEQqvd0/bhc4ectrPRRw==}
+    engines: {node: '>=16'}
+
+  '@xterm/addon-fit@0.11.0':
+    resolution: {integrity: sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==}
+
+  '@xterm/addon-web-links@0.12.0':
+    resolution: {integrity: sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==}
+
+  '@xterm/xterm@6.0.0':
+    resolution: {integrity: sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2479,6 +2518,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@msgpack/msgpack@3.1.3': {}
+
   '@oslojs/encoding@1.1.0': {}
 
   '@pagefind/darwin-arm64@1.4.0':
@@ -2676,6 +2717,18 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
+  '@webcontainer/api@1.6.1': {}
+
+  '@webcontainer/snapshot@0.1.0':
+    dependencies:
+      '@msgpack/msgpack': 3.1.3
+
+  '@xterm/addon-fit@0.11.0': {}
+
+  '@xterm/addon-web-links@0.12.0': {}
+
+  '@xterm/xterm@6.0.0': {}
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
diff --git a/scripts/snapshot.ts b/scripts/snapshot.ts
new file mode 100644
index 0000000..7acb123
--- /dev/null
+++ b/scripts/snapshot.ts
@@ -0,0 +1,45 @@
+import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { snapshot } from '@webcontainer/snapshot';
+import {x} from 'tinyexec';
+import { createHash } from "node:crypto";
+
+const PACKAGE_JSON = {
+    name: 'example',
+    type: 'module',
+    version: '0.0.0',
+    dependencies: {
+        "@bomb.sh/args": "latest",
+        "@clack/core": "1.0.0-alpha.0",
+        "@clack/prompts": "1.0.0-alpha.0"
+    }
+}
+const IGNORE_FILES = ['*.md', '*.d.*', '*.map', 'LICENSE', 'license'];
+const rootDir = new URL('../', import.meta.url);
+const snapshotDir = new URL(`./snapshot-${hash()}/`, rootDir);
+const outFile = new URL('./public/snapshot', rootDir);
+
+async function run() {
+    await fs.mkdir(snapshotDir, { recursive: true });
+    await fs.writeFile(new URL('package.json', snapshotDir), JSON.stringify(PACKAGE_JSON));
+    await x('npm', ['install'], {
+        nodeOptions: {
+            cwd: fileURLToPath(snapshotDir),
+        }
+    })
+    for await (const file of fs.glob(IGNORE_FILES.map(file => `**/${file}`), { cwd: fileURLToPath(snapshotDir) })) {
+        await fs.rm(new URL(file, snapshotDir));
+    }
+    const output = await snapshot(fileURLToPath(snapshotDir));
+    await fs.writeFile(outFile, output);
+    await fs.rm(snapshotDir, { recursive: true, force: true });
+    console.log('snapshot generated');
+}
+
+run();
+
+function hash() {
+    return createHash("shake256", { outputLength: 8 })
+      .update(Date.now().toString())
+      .digest("hex");
+}
diff --git a/src/components/WebContainer/Terminal.astro b/src/components/WebContainer/Terminal.astro
new file mode 100644
index 0000000..8758b3c
--- /dev/null
+++ b/src/components/WebContainer/Terminal.astro
@@ -0,0 +1,69 @@
+<docs-terminal></docs-terminal>
+
+<script>
+  import type { Terminal } from "@xterm/xterm";
+  import { theme } from "./theme.ts";
+
+  customElements.define(
+    "docs-terminal",
+    class extends HTMLElement {
+      instance: Terminal | undefined;
+      ro: ResizeObserver | undefined;
+      updateSize = () => {};
+      
+      connectedCallback() {
+        this.boot();
+      }
+      disconnectedCallback() {
+        this.instance?.dispose();
+        this.ro?.disconnect();
+      }
+      handleResize() {
+        this.ro = new ResizeObserver(() => this.updateSize());
+        this.ro.observe(this);
+      }
+      async boot() {
+        if (this.instance) {
+          this.instance.options.theme = theme;
+          this.instance.open(this);
+          return;
+        }
+        this.innerHTML = "";
+        const [{ Terminal }, { FitAddon }, { WebLinksAddon }] =
+          await Promise.all([
+            import("@xterm/xterm"),
+            import("@xterm/addon-fit"),
+            import("@xterm/addon-web-links"),
+          ]);
+        this.instance = new Terminal({
+          convertEol: true,
+          cursorBlink: false,
+          disableStdin: false,
+          theme,
+          fontSize: 22,
+          fontFamily: "Menlo, courier-new, courier, monospace",
+        });
+
+        this.instance.open(this);
+
+        const fit = new FitAddon();
+        this.instance.loadAddon(fit);
+        this.instance.loadAddon(new WebLinksAddon());
+        this.updateSize = () => fit.fit();
+        this.updateSize();
+        this.handleResize();
+      }
+    }
+  );
+</script>
+
+<style is:global>
+  @import "@xterm/xterm/css/xterm.css" layer(xterm);
+
+  .xterm {
+    padding: 12px;
+  }
+  .xterm-viewport {
+    background: #16181D;
+  }
+</style>
diff --git a/src/components/WebContainer/WebContainer.astro b/src/components/WebContainer/WebContainer.astro
new file mode 100644
index 0000000..63cbc89
--- /dev/null
+++ b/src/components/WebContainer/WebContainer.astro
@@ -0,0 +1,103 @@
+---
+import Terminal from "./Terminal.astro";
+
+interface Props {
+  file: string;
+}
+const { file } = Astro.props;
+---
+
+<web-container name={file}>
+  <pre data-content><code><slot /></code></pre>
+  <Terminal />
+</web-container>
+
+<script>
+  import type { Terminal } from "@xterm/xterm";
+  import { WebContainer } from "@webcontainer/api";
+  let host: WebContainer;
+
+  host = await WebContainer.boot({ workdirName: 'demo' });
+  const snapshotResponse = await fetch(`/docs/snapshot`);
+  const snapshot = await snapshotResponse.arrayBuffer();
+  await host.mount(snapshot, { mountPoint: "/" });
+
+  customElements.define(
+    "web-container",
+    class extends HTMLElement {
+      get dir() {
+          return `${this.name}/`
+      }
+      get file() {
+        return `${this.dir}index.js`;
+      }
+      get fileContent() {
+        const text = this.querySelector("[data-content]")!.textContent;
+        return `import { intro, outro } from "@clack/prompts";console.clear();intro("\\x1b[46m\\x1b[30m ${this.name} \\x1b[0m");\n${text};process.on('exit', () => console.log('EOF'));`;
+      }
+      get name() {
+        return this.getAttribute("name")!;
+      }
+      get terminal(): Terminal | undefined {
+        return (this.querySelector("docs-terminal") as any)?.instance;
+      }
+      async connectedCallback() {
+        await host.fs.mkdir(this.dir, { recursive: true });
+        await host.fs.writeFile(
+          this.file,
+          this.fileContent,
+          { encoding: "utf-8" }
+        );
+        await this.render();
+      }
+
+      async render() {
+        const { terminal, name, render } = this;
+        terminal?.reset();
+        const main = async () => {
+          // we set an infinite loop so that when the user runs the `exit` command, we restart
+          while (true) {
+            const jsh = Promise.withResolvers();
+            let isJSHReady = false;
+            const process = await host.spawn("jsh", {
+              cwd: name,
+              terminal: { rows: terminal?.rows!, cols: terminal?.cols! },
+            });
+            process.output.pipeTo(
+              new WritableStream({
+                write(data) {
+                  if (data.includes("❯") && !isJSHReady) {
+                    isJSHReady = true;
+                    jsh.resolve(undefined);
+                  }
+                  if (data.includes("❯") || data.includes('~/demo')) {
+                    return;
+                  }
+                  if (data.includes("EOF")) {
+                    process.kill();
+                    render();
+                    return;
+                  }
+                  terminal?.write(data);
+                }
+              })
+            );
+            const shell = process.input.getWriter();
+            await jsh.promise;
+            await shell.write(`node index.js\n`);
+            // write the terminal input to the process
+            const terminalWriter = terminal?.onData((data) => {
+              shell.write(data);
+            });
+            // wait for the process to finish
+            await process.exit;
+            terminal?.clear();
+            terminalWriter?.dispose();
+          }
+        }
+
+        main();
+      }
+    }
+  );
+</script>
diff --git a/src/components/WebContainer/theme.ts b/src/components/WebContainer/theme.ts
new file mode 100644
index 0000000..eaae1e3
--- /dev/null
+++ b/src/components/WebContainer/theme.ts
@@ -0,0 +1,22 @@
+export const theme = {
+  cursor: '#eff0eb',
+  cursorAccent: '#00000000',
+  foreground: "#eff0eb",
+  background: "#16181D",
+  red: "#ff5c57",
+  green: "#5af78e",
+  yellow: "#f3f99d",
+  blue: "#57c7ff",
+  magenta: "#ff6ac1",
+  cyan: "#9aedfe",
+  white: "#f1f1f0",
+  brightBlack: "#686868",
+  brightRed: "#ff5c57",
+  brightGreen: "#5af78e",
+  brightYellow: "#f3f99d",
+  brightBlue: "#57c7ff",
+  brightMagenta: "#ff6ac1",
+  brightCyan: "#9aedfe",
+  brightWhite: "#f1f1f0",
+  selectionBackground: "#97979b33",
+};
diff --git a/src/content/docs/clack/guides/examples.mdx b/src/content/docs/clack/guides/examples.mdx
index 1deb6fa..2b31b68 100644
--- a/src/content/docs/clack/guides/examples.mdx
+++ b/src/content/docs/clack/guides/examples.mdx
@@ -3,12 +3,28 @@ title: Examples
 description: Learn through practical examples of using Clack
 ---
 
+import { WebContainer } from '../../../../components/WebContainer/WebContainer.astro';
+
 This guide provides practical examples of using Clack in different scenarios.
 
 ## Basic Examples
 
+### Container
+
+```ts
+import { text, isCancel } from '@clack/prompts';
+
+const name = await text({
+  message: "What is your name?",
+  placeholder: "Jane Doe"
+})
+```
+
 ### Simple Text Input
 
+<WebContainer name="simple-text">
+
+
 ```ts twoslash
 import { text, isCancel } from '@clack/prompts';
 
@@ -27,6 +43,9 @@ if (isCancel(name)) {
 console.log(`Hello, ${name}!`);
 ```
 
+
+</WebContainer>
+
 ### Selection Menu
 
 ```ts twoslash
@@ -931,4 +950,4 @@ async function racePrompts() {
 }
 ```
 
-For more examples and best practices, check out our [GitHub repository](https://github.com/bombshell-dev/clack/tree/main/examples/basic).
\ No newline at end of file
+For more examples and best practices, check out our [GitHub repository](https://github.com/bombshell-dev/clack/tree/main/examples/basic).
diff --git a/src/pages/test.astro b/src/pages/test.astro
new file mode 100644
index 0000000..26c92ba
--- /dev/null
+++ b/src/pages/test.astro
@@ -0,0 +1,15 @@
+---
+import WebContainer from '../components/WebContainer/WebContainer.astro';
+
+const code = `import { text } from "@clack/prompts";
+
+const name = await text({
+  message: "What is your name?",
+  placeholder: "Jane Doe"
+})
+`
+---
+
+<h1>Hello test!</h1>
+
+<WebContainer file="nice" set:text={code} />