JS Playground for VS Code

An interactive JavaScript learning environment — a mini editor + live preview + console, built as a VS Code extension for teaching basic JavaScript to students.

Features

• 🖊️ Code editor with line numbers, Tab-to-indent, monospace font
• ▶️ Live preview in a sandboxed iframe
• 🖥️ DevTools-style console capturing console.log, console.warn, console.error, console.info and runtime errors
• 🎨 Adapts to your VS Code theme — uses VS Code's own color variables
• 💾 State persistence — your code survives panel close/reopen
• ↔️ Resizable panels — drag the divider between editor and preview

Usage

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type JS Playground: Open and press Enter
3. Or press Ctrl+Shift+J (Cmd+Shift+J on macOS)

The playground opens as a panel beside your current editor.

Keyboard Shortcuts

Development

cd js-playground-vscode
npm install
npm run compile    # or: npx tsc -p ./

Then press F5 in VS Code to launch the Extension Development Host.