diff --git a/biome.json b/biome.json
index c4eb66c3..f98946cc 100644
--- a/biome.json
+++ b/biome.json
@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist/**", "node_modules/**", "*.d.ts"]
+    "ignore": ["dist/**", "node_modules/**", "*.d.ts", "playground/**/*.js"]
   },
   "formatter": {
     "enabled": true,
diff --git a/docs/playground.md b/docs/playground.md
new file mode 100644
index 00000000..2fa3fed0
--- /dev/null
+++ b/docs/playground.md
@@ -0,0 +1,127 @@
+# Playground Pages — Design & Requirements
+
+Every feature in **tsb** ships with an interactive playground page hosted on
+GitHub Pages. This document describes the required properties that every
+playground page must satisfy.
+
+## Required Properties
+
+### 1. Executable Code Blocks
+
+Each code example on a playground page **must** be executable in the browser.
+Users can edit the code, click **▶ Run** (or press **Ctrl+Enter**), and see
+real output rendered below the editor.
+
+- Use `<textarea class="playground-editor">` for the editable code area.
+- Wrap each example in a `<div class="playground-block">` container.
+- Provide **▶ Run** and **↺ Reset** buttons in a `.playground-header`.
+- Display results in a `<div class="playground-output">`.
+
+### 2. Full TypeScript Support
+
+Code blocks accept TypeScript. The playground runtime loads the TypeScript
+compiler from CDN and transpiles user code to JavaScript before execution.
+Users can write type annotations, interfaces, and generics — the compiler
+strips them automatically.
+
+- TypeScript compiler: loaded from `https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.js`
+- No WASM required — the compiler runs natively in JavaScript.
+
+### 3. Live tsb Library Access
+
+The full tsb API is available in every code block. Users import from `"tsb"`
+exactly as they would in a real project:
+
+```typescript
+import { Index, Series, Dtype } from "tsb";
+```
+
+The playground runtime transforms these imports to reference the browser
+bundle built by CI (`playground/dist/index.js`).
+
+### 4. Output Capture
+
+All `console.log()`, `console.error()`, and `console.warn()` output is
+intercepted and rendered in the output area. tsb objects (Index, Series, etc.)
+display their human-readable `toString()` representation.
+
+### 5. Dark Theme
+
+Pages use the project's standard dark GitHub-inspired theme (CSS variables
+`--bg`, `--surface`, `--border`, `--text`, `--accent`, `--green`). See
+`playground/index-playground.html` for the canonical style definitions.
+
+### 6. Loading State
+
+A loading overlay with a spinner is shown while the TypeScript compiler and
+tsb bundle are fetched. All Run buttons are disabled until initialization
+completes, preventing premature execution.
+
+### 7. Keyboard Shortcuts
+
+- **Ctrl+Enter** (or **Cmd+Enter** on macOS): Run the current code block.
+- **Tab**: Insert two spaces (does not move focus).
+
+### 8. Reset Support
+
+Every code block has a **↺ Reset** button that restores the original example
+code and clears the output.
+
+### 9. Free-form Scratch Pad
+
+Each playground page should include a final "Try It Yourself" section with an
+empty (or lightly seeded) code block where users can experiment freely.
+
+## Architecture
+
+```
+playground/
+  index.html                 ← Landing page / feature roadmap
+  index-playground.html      ← Index & RangeIndex interactive tutorial
+  playground-runtime.js      ← Shared runtime (TS transpilation + execution)
+  dist/                      ← Built by CI (bun build, not committed)
+    index.js                 ← tsb browser bundle (ESM)
+```
+
+### Runtime Flow
+
+1. The HTML page loads `playground-runtime.js` as an ES module.
+2. The runtime imports the tsb bundle from `./dist/index.js` and stores it
+   on `window.__tsb`.
+3. The TypeScript compiler is loaded from CDN via a dynamic `<script>` tag.
+4. Each `.playground-block` is initialized with event listeners for Run,
+   Reset, Tab, and Ctrl+Enter.
+5. On **Run**:
+   - `import { … } from "tsb"` is rewritten to `const { … } = window.__tsb;`
+   - The TypeScript compiler transpiles the code to JavaScript.
+   - The JavaScript is executed via `new Function()` with console output
+     captured and displayed.
+
+### Adding a New Playground Page
+
+1. Create `playground/{feature}.html` following the template in
+   `index-playground.html`.
+2. Include the runtime: `<script type="module" src="playground-runtime.js"></script>`
+3. Add the loading overlay (`#playground-loading`).
+4. Structure examples as `.playground-block` containers with `.playground-editor`,
+   `.playground-run`, `.playground-reset`, and `.playground-output` elements.
+5. End with a "Try It Yourself" scratch pad.
+6. Link the page from `playground/index.html`.
+
+### Building the Bundle Locally
+
+```bash
+bun build ./src/index.ts --outdir ./playground/dist --target browser --minify
+```
+
+The CI pipeline (`pages.yml`) runs this automatically during deployment.
+
+## Non-Goals (Current Scope)
+
+- **Syntax highlighting** in the editor: the current implementation uses a
+  plain `<textarea>`. A future enhancement could integrate CodeMirror or
+  Monaco for richer editing.
+- **Infinite loop protection**: long-running or infinite loops will hang the
+  browser tab. A Web Worker–based sandbox could be added later.
+- **Type checking**: the playground transpiles but does not type-check.
+  Adding diagnostics display is a potential future enhancement.
diff --git a/playground/index-playground.html b/playground/index-playground.html
index 3f1e5345..308e694b 100644
--- a/playground/index-playground.html
+++ b/playground/index-playground.html
@@ -13,6 +13,7 @@
       --accent: #58a6ff;
       --green: #3fb950;
       --orange: #d29922;
+      --red: #f85149;
       --font-mono: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -27,177 +28,439 @@
     }
     a { color: var(--accent); }
     h1 { color: var(--accent); margin-bottom: 0.5rem; }
-    h2 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.25rem; }
+    h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; }
     p { color: #8b949e; margin-bottom: 1rem; }
-    pre {
+    code {
+      font-family: var(--font-mono);
+      font-size: 0.875em;
       background: var(--surface);
       border: 1px solid var(--border);
-      border-radius: 0.5rem;
+      border-radius: 0.3rem;
+      padding: 0.1rem 0.4rem;
+    }
+    .back { margin-bottom: 2rem; display: inline-block; }
+
+    /* ── Loading overlay ──────────────────────────────── */
+    #playground-loading {
+      position: fixed;
+      inset: 0;
+      background: rgba(13, 17, 23, 0.92);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      gap: 1rem;
+    }
+    .spinner {
+      width: 40px; height: 40px;
+      border: 3px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    #playground-status { color: #8b949e; font-size: 0.95rem; }
+
+    /* ── Section cards ────────────────────────────────── */
+    .section {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+    .section p { margin-bottom: 0.75rem; }
+
+    /* ── Playground block ─────────────────────────────── */
+    .playground-block {
+      margin-top: 0.75rem;
+    }
+    .playground-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #1c2128;
+      border: 1px solid var(--border);
+      border-bottom: none;
+      border-radius: 0.5rem 0.5rem 0 0;
+      padding: 0.4rem 0.75rem;
+    }
+    .playground-label {
+      font-size: 0.75rem;
+      color: #8b949e;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .playground-actions {
+      display: flex;
+      gap: 0.5rem;
+    }
+    .playground-actions button {
+      background: transparent;
+      color: var(--accent);
+      border: 1px solid var(--border);
+      border-radius: 0.35rem;
+      padding: 0.25rem 0.7rem;
+      font-size: 0.8rem;
+      cursor: pointer;
+      font-family: system-ui, sans-serif;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .playground-actions button:hover:not(:disabled) {
+      background: rgba(88, 166, 255, 0.1);
+      border-color: var(--accent);
+    }
+    .playground-actions button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .playground-run { font-weight: 600; }
+
+    /* ── Editor textarea ──────────────────────────────── */
+    .playground-editor {
+      display: block;
+      width: 100%;
+      min-height: 80px;
+      background: #0d1117;
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-top: none;
+      border-bottom: none;
       padding: 1rem;
       font-family: var(--font-mono);
       font-size: 0.875rem;
+      line-height: 1.55;
+      resize: vertical;
+      outline: none;
+      tab-size: 2;
+      white-space: pre;
       overflow-x: auto;
-      margin-bottom: 1rem;
     }
-    code {
-      font-family: var(--font-mono);
-      font-size: 0.875em;
+    .playground-editor:focus {
+      border-color: var(--accent);
+      box-shadow: inset 0 0 0 1px var(--accent);
     }
-    .output {
+
+    /* ── Output area ──────────────────────────────────── */
+    .playground-output {
       background: #1c2333;
-      border: 1px solid var(--green);
-      border-radius: 0.5rem;
-      padding: 1rem;
+      border: 1px solid var(--border);
+      border-radius: 0 0 0.5rem 0.5rem;
+      padding: 0.75rem 1rem;
       font-family: var(--font-mono);
-      font-size: 0.875rem;
-      color: var(--green);
-      margin-bottom: 1.5rem;
+      font-size: 0.85rem;
+      color: #8b949e;
       white-space: pre-wrap;
+      min-height: 2rem;
+      word-break: break-word;
     }
-    .back { margin-bottom: 2rem; display: inline-block; }
-    .section {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 0.75rem;
-      padding: 1.5rem;
-      margin-bottom: 1.5rem;
+    .playground-output.active {
+      color: var(--green);
+      border-color: var(--green);
+    }
+    .playground-output.error {
+      color: var(--red);
+      border-color: var(--red);
+    }
+    .playground-hint {
+      font-size: 0.75rem;
+      color: #484f58;
+      margin-top: 0.35rem;
+      text-align: right;
+    }
+
+    /* ── Footer ───────────────────────────────────────── */
+    footer {
+      text-align: center;
+      padding: 2rem 0;
+      color: #8b949e;
+      font-size: 0.85rem;
+      border-top: 1px solid var(--border);
+      margin-top: 2rem;
     }
   </style>
 </head>
 <body>
+
+  <!-- Loading overlay (hidden once TS compiler + tsb are ready) -->
+  <div id="playground-loading">
+    <div class="spinner"></div>
+    <div id="playground-status">Initializing playground…</div>
+  </div>
+
   <a class="back" href="index.html">← Back to roadmap</a>
-  <h1>🏷️ Index &amp; RangeIndex</h1>
+  <h1>🏷️ Index &amp; RangeIndex — Interactive Playground</h1>
   <p>
     The <code>Index</code> type is the immutable, ordered sequence of labels
-    that underpins both <code>Series</code> (row axis) and <code>DataFrame</code>
-    (row + column axes). <code>RangeIndex</code> is a memory-efficient subclass
-    for integer ranges.
+    that underpins both <code>Series</code> and <code>DataFrame</code>.
+    <code>RangeIndex</code> is a memory-efficient subclass for integer ranges.<br>
+    <strong style="color: var(--text);">Edit any code block below and press ▶ Run
+    (or Ctrl+Enter) to execute it live in your browser.</strong>
   </p>
 
+  <!-- ── 1. Creating an Index ─────────────────────────── -->
   <div class="section">
     <h2>Creating an Index</h2>
-    <pre>
-import { Index, RangeIndex } from "tsb";
+    <p>Construct indexes from arrays of labels, or use <code>RangeIndex</code> for efficient integer sequences.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index, RangeIndex } from "tsb";
 
 // String labels
 const labels = new Index(["a", "b", "c", "d"], "letters");
-// → Index([a, b, c, d], name='letters')
+console.log(labels.toString());
 
 // Numeric labels
 const nums = new Index([10, 20, 30]);
-// → Index([10, 20, 30])
+console.log(nums.toString());
 
-// RangeIndex (memory-efficient integer range)
+// RangeIndex — memory-efficient integer range
 const range = new RangeIndex(5);
-// → RangeIndex(start=0, stop=5, step=1)  →  [0, 1, 2, 3, 4]
+console.log(range.toString());
 
 const stepped = new RangeIndex(0, 10, 2);
-// → RangeIndex(start=0, stop=10, step=2)  →  [0, 2, 4, 6, 8]
-    </pre>
+console.log(stepped.toString());
+console.log("Values:", stepped.toArray());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 2. Properties ────────────────────────────────── -->
   <div class="section">
     <h2>Properties</h2>
-    <pre>
+    <p>Inspect size, shape, uniqueness, and monotonicity of an index.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index } from "tsb";
+
 const idx = new Index(["x", "y", "z"], "axis");
 
-idx.size            // 3
-idx.shape           // [3]
-idx.ndim            // 1
-idx.empty           // false
-idx.name            // "axis"
-idx.isUnique        // true
-idx.hasDuplicates   // false
-idx.isMonotonicIncreasing  // true (x &lt; y &lt; z)
-    </pre>
+console.log("size:", idx.size);
+console.log("shape:", idx.shape);
+console.log("ndim:", idx.ndim);
+console.log("empty:", idx.empty);
+console.log("name:", idx.name);
+console.log("isUnique:", idx.isUnique);
+console.log("hasDuplicates:", idx.hasDuplicates);
+console.log("isMonotonicIncreasing:", idx.isMonotonicIncreasing);</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 3. Label Look-up ─────────────────────────────── -->
   <div class="section">
     <h2>Label Look-up</h2>
-    <pre>
+    <p>Find positions of labels, check membership, and test inclusion.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index } from "tsb";
+
 const idx = new Index(["a", "b", "c", "a"]);
 
-idx.getLoc("b")     // 1         (unique → single int)
-idx.getLoc("a")     // [0, 3]    (duplicated → array)
-idx.contains("c")   // true
-idx.isin(["a", "c"]) // [true, false, true, true]
-    </pre>
+console.log("getLoc('b'):", idx.getLoc("b"));     // unique → single int
+console.log("getLoc('a'):", idx.getLoc("a"));     // duplicated → array
+console.log("contains('c'):", idx.contains("c"));
+console.log("isin(['a', 'c']):", idx.isin(["a", "c"]));</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 4. Set Operations ────────────────────────────── -->
   <div class="section">
     <h2>Set Operations</h2>
-    <pre>
+    <p>Combine indexes with union, intersection, difference, and symmetric difference.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index } from "tsb";
+
 const a = new Index([1, 2, 3]);
 const b = new Index([2, 3, 4]);
 
-a.union(b)                // Index([1, 2, 3, 4])
-a.intersection(b)         // Index([2, 3])
-a.difference(b)           // Index([1])
-a.symmetricDifference(b)  // Index([1, 4])
-    </pre>
+console.log("union:       ", a.union(b).toString());
+console.log("intersection:", a.intersection(b).toString());
+console.log("difference:  ", a.difference(b).toString());
+console.log("symm. diff.: ", a.symmetricDifference(b).toString());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 5. Sorting & Aggregation ─────────────────────── -->
   <div class="section">
     <h2>Sorting &amp; Aggregation</h2>
-    <pre>
+    <p>Sort labels and compute aggregates like min, max, and argsort.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index } from "tsb";
+
 const idx = new Index([30, 10, 20]);
 
-idx.sortValues()     // Index([10, 20, 30])
-idx.argsort()        // [1, 2, 0]
-idx.min()            // 10
-idx.max()            // 30
-idx.argmin()         // 1
-idx.argmax()         // 0
-    </pre>
+console.log("sortValues:", idx.sortValues().toString());
+console.log("argsort:   ", idx.argsort());
+console.log("min:", idx.min());
+console.log("max:", idx.max());
+console.log("argmin:", idx.argmin());
+console.log("argmax:", idx.argmax());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 6. Manipulation ──────────────────────────────── -->
   <div class="section">
     <h2>Manipulation (immutable — always returns new Index)</h2>
-    <pre>
+    <p>Append, insert, delete, drop, and rename — each returns a new Index.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index } from "tsb";
+
 const idx = new Index(["a", "b", "c"]);
 
-idx.append(new Index(["d", "e"]))  // Index([a, b, c, d, e])
-idx.insert(1, "x")                 // Index([a, x, b, c])
-idx.delete(0)                      // Index([b, c])
-idx.drop(["b"])                    // Index([a, c])
-idx.rename("new_name")             // Index([a, b, c], name='new_name')
-    </pre>
+console.log("append: ", idx.append(new Index(["d", "e"])).toString());
+console.log("insert: ", idx.insert(1, "x").toString());
+console.log("delete: ", idx.delete(0).toString());
+console.log("drop:   ", idx.drop(["b"]).toString());
+console.log("rename: ", idx.rename("new_name").toString());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 7. Missing Values ────────────────────────────── -->
   <div class="section">
     <h2>Missing Values</h2>
-    <pre>
+    <p>Detect, drop, and fill <code>null</code> values in an index.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Index } from "tsb";
+
 const idx = new Index([1, null, 3]);
 
-idx.isna()    // [false, true, false]
-idx.notna()   // [true, false, true]
-idx.dropna()  // Index([1, 3])
-idx.fillna(0) // Index([1, 0, 3])
-    </pre>
+console.log("isna: ", idx.isna());
+console.log("notna:", idx.notna());
+console.log("dropna:", idx.dropna().toString());
+console.log("fillna(0):", idx.fillna(0).toString());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
+  <!-- ── 8. RangeIndex ────────────────────────────────── -->
   <div class="section">
     <h2>RangeIndex — Memory Efficient</h2>
-    <pre>
+    <p>Stores only <code>start</code>/<code>stop</code>/<code>step</code> — values are computed on the fly.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { RangeIndex } from "tsb";
+
 // Only stores start/stop/step — values computed on the fly
 const r = new RangeIndex(0, 1_000_000);
-r.size    // 1000000
-r.at(500) // 500
+console.log("size:", r.size);
+console.log("at(500):", r.at(500));
 
 // Negative step
 const desc = new RangeIndex(10, 0, -2);
-desc.toArray()  // [10, 8, 6, 4, 2]
+console.log("desc values:", desc.toArray());
 
 // Slicing preserves RangeIndex type
-r.slice(10, 20)  // RangeIndex(start=10, stop=20, step=1)
-    </pre>
+const sliced = r.slice(10, 20);
+console.log("sliced:", sliced.toString());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
+  </div>
+
+  <!-- ── 9. Try It Yourself ───────────────────────────── -->
+  <div class="section">
+    <h2>🧪 Try It Yourself</h2>
+    <p>Write your own tsb code below. All exports from <code>tsb</code> are available:
+      <code>Index</code>, <code>RangeIndex</code>, <code>Series</code>, <code>Dtype</code>, and more.</p>
+    <div class="playground-block">
+      <div class="playground-header">
+        <span class="playground-label">TypeScript — Scratch Pad</span>
+        <div class="playground-actions">
+          <button class="playground-run" disabled>▶ Run</button>
+          <button class="playground-reset">↺ Reset</button>
+        </div>
+      </div>
+      <textarea class="playground-editor" spellcheck="false">import { Series, Index } from "tsb";
+
+// Create a Series with a custom index
+const temps = new Series({
+  data: [72, 68, 75, 80, 77],
+  index: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+  name: "temperature",
+});
+
+console.log(temps.toString());
+console.log("\nMean:", temps.mean());
+console.log("Max:", temps.max());
+console.log("Min:", temps.min());</textarea>
+      <div class="playground-output">Click ▶ Run to execute</div>
+      <div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
+    </div>
   </div>
 
-  <footer style="text-align: center; padding: 2rem 0; color: #8b949e; font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 2rem;">
+  <footer>
     <p>
       <a href="index.html">tsb playground</a> ·
       Built by <a href="https://github.com/githubnext/autoloop">Autoloop</a>
     </p>
   </footer>
+
+  <!-- Playground runtime: loads TypeScript compiler + tsb bundle, sets up editors -->
+  <script type="module" src="playground-runtime.js"></script>
 </body>
 </html>
diff --git a/playground/index.html b/playground/index.html
index 1be4bfdc..093b646a 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -146,7 +146,7 @@ <h3>🗃️ DataFrame</h3>
         </div>
         <div class="feature-card">
           <h3>🏷️ Index</h3>
-          <p>Immutable labeled axis — <a href="index-playground.html" style="color: var(--accent);">Index&lt;T&gt;</a>, RangeIndex.</p>
+          <p>Immutable labeled axis — <a href="index-playground.html" style="color: var(--accent);">Interactive Playground</a>, RangeIndex.</p>
           <div class="status done">✅ Complete</div>
         </div>
         <div class="feature-card">
diff --git a/playground/playground-runtime.js b/playground/playground-runtime.js
new file mode 100644
index 00000000..c0f25b63
--- /dev/null
+++ b/playground/playground-runtime.js
@@ -0,0 +1,239 @@
+/**
+ * tsb Playground Runtime
+ *
+ * Provides interactive TypeScript execution in the browser for tsb tutorials.
+ *
+ * Architecture:
+ *   1. Loads the tsb browser bundle (built by CI into playground/dist/)
+ *   2. Loads the TypeScript compiler from CDN for in-browser transpilation
+ *   3. Converts playground blocks into editable editors with Run/Reset buttons
+ *   4. Transforms imports, transpiles TS → JS, and executes with output capture
+ *
+ * No WASM needed — the TypeScript compiler runs natively in JavaScript.
+ */
+
+// ── Load TypeScript compiler from CDN ──────────────────────────────
+
+function loadTypeScript() {
+  return new Promise(function (resolve, reject) {
+    if (window.ts) {
+      resolve(window.ts);
+      return;
+    }
+    var script = document.createElement("script");
+    script.src =
+      "https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.js";
+    script.onload = function () {
+      resolve(window.ts);
+    };
+    script.onerror = function () {
+      reject(new Error("Failed to load TypeScript compiler from CDN"));
+    };
+    document.head.appendChild(script);
+  });
+}
+
+// ── Load tsb browser bundle ────────────────────────────────────────
+
+function loadTsb() {
+  return import("./dist/index.js").catch(function () {
+    throw new Error(
+      "tsb bundle not found. Build with: bun build ./src/index.ts --outdir ./playground/dist --target browser",
+    );
+  });
+}
+
+// ── Value formatting ───────────────────────────────────────────────
+
+function formatValue(val) {
+  if (val === null) return "null";
+  if (val === undefined) return "undefined";
+  if (Array.isArray(val)) {
+    return "[" + val.map(formatValue).join(", ") + "]";
+  }
+  if (typeof val === "object") {
+    var str = String(val);
+    if (str !== "[object Object]") return str;
+    try {
+      return JSON.stringify(val, null, 2);
+    } catch (_e) {
+      return str;
+    }
+  }
+  return String(val);
+}
+
+// ── Code transformation ────────────────────────────────────────────
+
+function transformCode(code, ts) {
+  // Replace:  import { X, Y } from "tsb";  →  const { X, Y } = window.__tsb;
+  var transformed = code.replace(
+    /import\s*\{([^}]+)\}\s*from\s*["']tsb["']\s*;?/g,
+    function (_match, names) {
+      return "const {" + names.trim() + "} = window.__tsb;";
+    },
+  );
+
+  var result = ts.transpileModule(transformed, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ES2022,
+      module: ts.ModuleKind.ES2022,
+      strict: false, // relaxed for playground ease-of-use
+      removeComments: false,
+    },
+    reportDiagnostics: true,
+  });
+
+  if (result.diagnostics && result.diagnostics.length > 0) {
+    var errors = result.diagnostics
+      .map(function (d) {
+        return ts.flattenDiagnosticMessageText(d.messageText, "\n");
+      })
+      .join("\n");
+    throw new Error("TypeScript error:\n" + errors);
+  }
+
+  return result.outputText;
+}
+
+// ── Code execution with output capture ─────────────────────────────
+
+function executeCode(jsCode) {
+  var outputs = [];
+  var origLog = console.log;
+  var origError = console.error;
+  var origWarn = console.warn;
+
+  console.log = function () {
+    var args = Array.prototype.slice.call(arguments);
+    outputs.push(args.map(formatValue).join(" "));
+  };
+  console.error = function () {
+    var args = Array.prototype.slice.call(arguments);
+    outputs.push("\u274c " + args.map(formatValue).join(" "));
+  };
+  console.warn = function () {
+    var args = Array.prototype.slice.call(arguments);
+    outputs.push("\u26a0\ufe0f " + args.map(formatValue).join(" "));
+  };
+
+  try {
+    new Function(jsCode)();
+  } catch (err) {
+    outputs.push("\u274c Runtime error: " + err.message);
+  } finally {
+    console.log = origLog;
+    console.error = origError;
+    console.warn = origWarn;
+  }
+
+  return outputs.join("\n");
+}
+
+// ── Playground block setup ─────────────────────────────────────────
+
+function setupBlock(block, ts) {
+  var editor = block.querySelector(".playground-editor");
+  var runBtn = block.querySelector(".playground-run");
+  var resetBtn = block.querySelector(".playground-reset");
+  var output = block.querySelector(".playground-output");
+  if (!editor || !runBtn || !output) return;
+
+  var originalCode = editor.value;
+
+  // Auto-resize textarea to fit content
+  function autoResize() {
+    editor.style.height = "auto";
+    editor.style.height = editor.scrollHeight + 2 + "px";
+  }
+  editor.addEventListener("input", autoResize);
+  autoResize();
+
+  // Tab inserts spaces (instead of moving focus)
+  editor.addEventListener("keydown", function (e) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      var start = editor.selectionStart;
+      var end = editor.selectionEnd;
+      editor.value =
+        editor.value.substring(0, start) + "  " + editor.value.substring(end);
+      editor.selectionStart = editor.selectionEnd = start + 2;
+    }
+    // Ctrl+Enter or Cmd+Enter runs the code
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      runBtn.click();
+    }
+  });
+
+  // Run button handler
+  runBtn.addEventListener("click", function () {
+    output.classList.remove("error");
+    output.classList.add("active");
+    try {
+      var code = editor.value;
+      var js = transformCode(code, ts);
+      var result = executeCode(js);
+      output.textContent =
+        result || "(no output \u2014 add console.log() to see results)";
+    } catch (err) {
+      output.textContent = "\u274c " + err.message;
+      output.classList.add("error");
+    }
+  });
+
+  // Reset button handler
+  if (resetBtn) {
+    resetBtn.addEventListener("click", function () {
+      editor.value = originalCode;
+      output.textContent = "";
+      output.classList.remove("error", "active");
+      autoResize();
+    });
+  }
+}
+
+// ── Initialization ─────────────────────────────────────────────────
+
+async function initPlayground() {
+  var loadingEl = document.getElementById("playground-loading");
+  var statusEl = document.getElementById("playground-status");
+
+  try {
+    if (statusEl)
+      statusEl.textContent = "Loading TypeScript compiler & tsb library\u2026";
+
+    // Load both dependencies in parallel
+    var results = await Promise.all([loadTypeScript(), loadTsb()]);
+    var ts = results[0];
+    var tsb = results[1];
+    window.__tsb = tsb;
+
+    // Initialize all playground blocks on the page
+    var blocks = document.querySelectorAll(".playground-block");
+    blocks.forEach(function (block) {
+      setupBlock(block, ts);
+    });
+
+    // Enable all Run buttons (disabled during loading)
+    document.querySelectorAll(".playground-run").forEach(function (btn) {
+      btn.disabled = false;
+    });
+
+    // Hide loading overlay
+    if (loadingEl) loadingEl.style.display = "none";
+  } catch (err) {
+    if (statusEl) {
+      statusEl.textContent = "\u26a0\ufe0f " + err.message;
+      statusEl.style.color = "#f85149";
+    }
+    console.error("Playground initialization failed:", err);
+  }
+}
+
+// Start when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initPlayground);
+} else {
+  initPlayground();
+}