JavaScript Playground

Edit HTML, CSS and JavaScript with a live preview and console.

Result
CONSOLE
Console output appears here.

JavaScript Playground – HTML, CSS and JS with Live Preview

The JavaScript Playground is a lightweight online code editor in the spirit of CodePen and JSFiddle. Write markup in the HTML tab, styles in CSS and behavior in JavaScript; the result pane re-renders automatically a moment after you stop typing, and everything the page logs appears in the console underneath.

Features

  • Three editors with tab indentation and Ctrl/Cmd + Enter to run.
  • Auto-run that rebuilds the preview as you type, or manual runs when you prefer control (useful for code with timers or animations).
  • Console panel for console.log, warnings, errors, uncaught exceptions and unhandled promise rejections, with line numbers.
  • ES module mode for top-level await and import statements from CDNs such as esm.sh or jsDelivr.
  • Copy page / Download .html – export a complete, standalone HTML document that combines your three files, ready to open locally or upload to a host.

Sandboxed preview

The preview is an iframe with sandbox="allow-scripts allow-modals". Your code can use alert, DOM APIs, fetch, canvas and timers, but it has no access to this site's cookies, storage or page content. Each run starts from a fresh document, so state from the previous run never leaks into the next one.

Ideas to try

  • Prototype a UI component – a modal, a tab bar or a dropdown – before moving it into your framework.
  • Learn DOM events by logging event objects as you click and type.
  • Build a small canvas animation or a CSS transition and tweak values live.
  • Create a minimal reproduction of a bug and download it as a single file to attach to an issue.

Load the Sample to see a working click counter. For unit tests and pure logic, the JavaScript Tester is a better fit, and the HTML Viewer previews static markup.

Frequently Asked Questions

No account and no server storage are involved. Use Download .html or Copy page to keep your work; the downloaded file contains all three parts and runs on its own.

Auto-run rebuilds the page about 0.7 seconds after the last keystroke. Turn Auto-run off if your code keeps state, plays sound or starts long animations, and press Run when you are ready.

Yes, enable ES module mode and import them from an ESM CDN (for example https://esm.sh/react). JSX needs a compiler, so use React.createElement or a library such as htm.

No. The preview iframe has no same-origin permission, so it runs with an isolated opaque origin and cannot read cookies, storage or the surrounding page.