HTML & JS Playground
A front-end scratchpad: three editors for HTML, CSS and JavaScript, a live preview that re-renders as you type, and a console panel that captures console.log, warnings and uncaught errors from your code. The preview runs in a sandboxed frame, so experiments cannot touch the page around them. Your work autosaves to the browser, and you can download the result as a single self-contained HTML file or load one back in to keep going.
Runs 100% in your browser — nothing you paste leaves your device.
Read the full guide to this tool
Notes
- The preview iframe is sandboxed: scripts run, but the snippet cannot navigate the page, open popups or read this site's data.
- console.log, console.warn, console.error and uncaught exceptions are forwarded to the console panel with line numbers where available.
- The exported file inlines your CSS and JS, so it opens anywhere a browser does — no dependencies, no build step.
- Runs 100% in your browser — nothing you paste leaves your device.
Related tools
Flowchart & Diagram Editor
Draw flowcharts with shapes, arrows and labels; export SVG or PNG.
Python Playground
Run Python with numpy, pandas and matplotlib in your browser.
LaTeX Equation Editor
Type LaTeX, see the rendered formula live; export SVG or PNG.
Base64 / URL / HTML Encoder-Decoder
Encode and decode Base64, hex, URL percent-encoding and HTML entities — with auto-detect, bulk lines and file drop.
CSS Gradient, Shadow & Radius Generator
Visual generators for gradients, box-shadows and border radii.
Color Converter & Contrast Checker
HEX ↔ RGB ↔ HSL ↔ OKLCH, plus WCAG contrast ratios.