Online Code Playground in JavaScript, Free with Live Demo

What this project does

• Three editors with tab indent and line numbers
• Live preview that updates as you type, or on Ctrl+Enter
• Console panel that shows logs, warnings and errors from the preview
• Starter templates: counter, canvas animation, fetch demo
• Share link: the project is gzipped and stored in the URL hash

How it works

1. Build the pageThe three editors are joined into one HTML document with a small console bridge script at the top.
2. Run it safelyThe document goes into an iframe with sandbox="allow-scripts", so it cannot touch this page, its storage or cookies.
3. ShareThe project JSON is gzipped with CompressionStream, base64url encoded and placed after the # in the link.

The key JavaScript

This is the heart of the project. The full file has the rest, including the screen layout and error handling.

const bridge = `<script>
  for (const k of ["log", "warn", "error", "info"]) {
    const orig = console[k];
    console[k] = (...a) => { parent.postMessage({ k, a: a.map(String) }, "*"); orig(...a); };
  }
  onerror = (m, s, line) => parent.postMessage({ k: "error", a: [m + " (line " + line + ")"] }, "*");
<\/script>`;
iframe.srcdoc = bridge + html + `<style>${css}</style><script>${js}<\/script>`;
addEventListener("message", (e) => { if (e.source === iframe.contentWindow) showInConsole(e.data); });

How to use it

1. Click Download HTML file above.
2. Open the file in a code editor, like VS Code.
3. Run it from a local server with npx serve . so the camera, microphone and AI features are allowed.
4. Change the text and colors, then upload it to GitHub Pages, Netlify or your own site. It is one file with no build step.

More Media and Real Time projects

032. Video Call App

A peer to peer video call between two browsers

033. Screen Recorder

Record your screen with your voice and your face in the corner

034. Browser Video Editor

Trim a clip, add a filter and a title, and export an MP4

035. Collaborative Whiteboard

A shared drawing board with live cursors

036. Music Visualizer

Turn music into moving bars, waves and a glowing ring

037. WebGPU Particle Playground

Up to a million glowing particles that follow your mouse