Code Playground
Online HTML, CSS and JavaScript playground with live preview, editor with line numbers and a captured console. Test snippets instantly and download the result as a single HTML file - fully in your browser.
What is a code playground?
A code playground is a sandbox where you can write HTML, CSS and JavaScript and immediately see the rendered result. This one adds a captured console, line-numbered editors and the ability to download your work as a single HTML file.
How does the live preview work?
Your three code panes are combined into a complete HTML document and rendered inside a sandboxed iframe. With Auto run enabled the preview refreshes automatically about half a second after you stop typing; otherwise press Run.
What does the console panel show?
Everything the page writes with console.log, console.info, console.warn and console.error, plus runtime errors and unhandled promise rejections with their line numbers. It is cleared on every run.
Is my code saved if I reload the page?
Yes. A draft of all three panes is stored locally in your browser and restored on the next visit. Reset returns the original demo code, and clearing site data removes the draft.
Is the preview sandboxed and safe?
The preview runs inside a sandboxed iframe without same-origin access, so scripts you test cannot read this page or its cookies. Test only code you trust, as it still runs in your browser.
Can I download my experiment?
Yes. Download .html saves the current HTML, CSS and JavaScript combined into one self-contained file you can open in any browser or share with others.
What can I run in the JavaScript pane?
Standard browser JavaScript: DOM manipulation, events, canvas, fetch to public APIs (subject to their CORS rules) and any library you paste inline. Modules and npm packages are not resolved.
Does the playground need an internet connection?
Only to load the page itself. Editing, previewing and console capture all run locally afterwards, and no code you type is ever uploaded anywhere.
How to Use Code Playground
This playground combines your HTML, CSS and JavaScript into a sandboxed live preview entirely inside your browser, with a console panel that captures logs and errors. A draft is saved locally so you can continue where you left off.
- Edit the HTML, CSS and JavaScript panes - each editor has line numbers and syntax highlighting.
- With Auto run enabled the preview refreshes automatically as you type; otherwise press Run (or turn Auto run off and run manually).
- Watch the Console panel below the preview: console.log output, warnings, errors and uncaught exceptions appear there with line numbers.
- Press Reset to return to the built-in demo, or Download .html to save everything as one self-contained file.
- Use Open in new window to view the current document full-size in its own tab.
The console is cleared on each run, so add console.log statements freely while debugging - they appear instantly without touching the real browser console.
Related Tools
- JavaScript Beautifier Free online JavaScript beautifier and code formatter. Instantly convert minified or messy JS into clean, readable, properly indented code with customizable options.
- JS Minifier Minify JavaScript code instantly. Remove whitespace, comments, and optimize your JS for smaller file size and faster loading.
- Regex Tester Test and debug regular expressions with real-time matching, group capture, and cheat sheet.
- Markdown Previewer Free online Markdown editor with live preview. Write, render, and export Markdown with full GFM support including tables, code blocks, and task lists.
- File Hash Checker Calculate and verify MD5, SHA-1, SHA-256, SHA-512 file hashes locally
- Chmod Calculator Free online chmod calculator to visualize and calculate Linux file permissions with checkboxes. Instantly convert between numeric (755, 644) and symbolic notation (rwxr-xr-x). Supports special permissions like setuid, setgid, sticky bit.
- ASCII Table Complete ASCII character encoding reference with decimal, hexadecimal, octal, binary codes, HTML entities, and character descriptions. Search and filter instantly.
- Hex Viewer View file contents in hex dump format with search, offset navigation, and virtual scrolling