Vanilla JavaScript Projects

Project 40, Media and real-time

Online Code Playground

Type HTML, CSS and JavaScript and see the result as you type. Console logs appear underneath, and one click makes a link that holds the whole project.

<button> Click me</button>btn.onclick = () => n++ Clicked 3 > count: 3
Preview
Sandboxed iframe
Share links
CompressionStream
Dependencies
None
Your browser
Checking

Playground

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.
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); });