Skip to content

Add interactive playground with live TypeScript execution#17

Merged
mrjf merged 2 commits into
mainfrom
copilot/create-interactive-playground
Apr 4, 2026
Merged

Add interactive playground with live TypeScript execution#17
mrjf merged 2 commits into
mainfrom
copilot/create-interactive-playground

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 4, 2026

The playground pages were static code examples with no ability to edit or run code. This converts them into a full interactive TypeScript playground running entirely in the browser.

Approach

No WASM needed. The TypeScript compiler (typescript@5 from CDN) transpiles user code to JS in-browser, and new Function() executes it against the tsb bundle (already built by CI into playground/dist/).

Changes

  • playground/playground-runtime.js — Shared runtime: loads TS compiler + tsb bundle, transforms import { X } from "tsb" → bundle reference, captures console.log output, supports Ctrl+Enter / Tab / Reset
  • playground/index-playground.html — Rewritten: 9 editable code blocks with ▶ Run / ↺ Reset, loading overlay, auto-resizing editors, free-form scratch pad
  • docs/playground.md — Documents required properties for all playground pages and how to add new ones
  • biome.json — Ignores playground/**/*.js (browser code, not library source)

Usage

Each code block is a live editor:

import { Index } from "tsb";

const idx = new Index(["a", "b", "c"], "demo");
console.log(idx.toString());
// → Index([a, b, c], name='demo')

Press ▶ Run or Ctrl+Enter to execute. Output renders below the editor.

Screenshot

Playground

Copilot AI assigned Copilot and mrjf Apr 4, 2026
Copilot AI linked an issue Apr 4, 2026 that may be closed by this pull request
- Create playground/playground-runtime.js: loads TypeScript compiler from CDN
  and tsb browser bundle, provides editable code blocks with Run/Reset buttons,
  captures console output for display
- Rewrite playground/index-playground.html: convert static code examples to
  interactive playground blocks with live execution
- Add playground/index.html: update Index card to mention Interactive Playground
- Create docs/playground.md: document playground page requirements and architecture
- Update biome.json: ignore playground JS files from linting

Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/3b02a36b-9fe7-4b52-8dc5-311292fa9764

Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Copilot AI changed the title [WIP] Add interactive tutorial for playground site Add interactive playground with live TypeScript execution Apr 4, 2026
Copilot finished work on behalf of mrjf April 4, 2026 05:00
Copilot AI requested a review from mrjf April 4, 2026 05:00
@mrjf mrjf marked this pull request as ready for review April 4, 2026 05:05
@mrjf
Copy link
Copy Markdown
Contributor

mrjf commented Apr 4, 2026

@copilot reference the playground doc in the readme

@mrjf mrjf merged commit 94b22f9 into main Apr 4, 2026
16 of 17 checks passed
Copilot stopped work on behalf of mrjf due to an error April 4, 2026 05:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Playground site not interactive

2 participants