Add interactive playground with live TypeScript execution#17
Merged
Conversation
- 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
Contributor
|
@copilot reference the playground doc in the readme |
Copilot stopped work on behalf of
mrjf due to an error
April 4, 2026 05:07
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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@5from CDN) transpiles user code to JS in-browser, andnew Function()executes it against the tsb bundle (already built by CI intoplayground/dist/).Changes
playground/playground-runtime.js— Shared runtime: loads TS compiler + tsb bundle, transformsimport { X } from "tsb"→ bundle reference, capturesconsole.logoutput, supports Ctrl+Enter / Tab / Resetplayground/index-playground.html— Rewritten: 9 editable code blocks with ▶ Run / ↺ Reset, loading overlay, auto-resizing editors, free-form scratch paddocs/playground.md— Documents required properties for all playground pages and how to add new onesbiome.json— Ignoresplayground/**/*.js(browser code, not library source)Usage
Each code block is a live editor:
Press ▶ Run or Ctrl+Enter to execute. Output renders below the editor.
Screenshot