HTML Playground
Edit HTML, CSS and JavaScript with a live preview and console. Runs in your browser.
About this html playground
This HTML playground is an online editor where you write HTML, CSS and JavaScript and see the page run right next to your code. It suits learners following a tutorial and developers testing a quick idea, with no account and no setup.
The preview updates a moment after you stop typing, or when you press Run. A built-in console shows console.log output, warnings and errors with the line number in your JS. When you are done, download everything as one .html file.
Your code stays in your browser and is saved there between visits. The preview runs in a locked sandbox, so even a buggy script cannot touch the rest of the site.
Features
Live preview
Edit any of the three tabs and the preview rebuilds about 0.7 seconds after you pause. Turn off Auto-run to update only when you press Run or Ctrl+Enter.
Console with line numbers
console.log, info, warn, error, table and assert all show up, along with uncaught errors and rejected promises. Errors point to the line in your JS tab, objects print in a readable form, and repeats are grouped with a count.
Loop protection
A typo like i-- in a for loop would normally freeze the tab. Loops that keep one task busy for over 2 seconds are stopped, with a warning that names the line. Switch it off for long-running code.
Safe sandbox
The preview runs in a sandboxed frame with its own blank origin. Your code cannot read this site's cookies, storage or page, and the page cannot be redirected.
Phone and tablet widths
Switch the preview between full width, 768 pixels and 375 pixels to check media queries and mobile layouts.
Saved and downloadable
Your code is saved in this browser as you type. Download a single, clean .html file with your CSS in a <style> tag and your JS in a <script> tag, or open an .html, .css or .js file to keep working on it.
How to use the html playground
- 1Write in the HTML, CSS and JS tabs, or start from the example.
- 2Watch the preview update as you type, or press Run. Logs and errors show in the console.
- 3Download everything as one .html file.
When to use it
Learning HTML, CSS and JavaScript
Type along with a lesson and see each change at once. The console explains errors as they happen instead of leaving a blank page.
Testing a CSS idea
Try a flexbox or grid layout, a hover effect or an animation in isolation before you add it to a real project.
Debugging a small script
Paste a function, call it with test values and log the results. Faster than setting up a project folder.
Building a one-page demo
Make a small widget or prototype, download it as a single file and send it to someone who just needs to open it.
How do I run HTML, CSS and JavaScript online?
Put your markup in the HTML tab, your styles in the CSS tab and your script in the JS tab. You do not need <html>, <head> or <body> tags. The playground wraps your code in a complete page, adds the CSS in the head and runs the JS at the end of the body, so the elements already exist when your script starts.
Prefer to write the whole document yourself? Paste a full page, including <!DOCTYPE html>, into the HTML tab. The playground spots it and fits its own pieces into your page instead.
What doesn't work in the preview, and why?
The preview is an iframe with the sandbox attribute set to allow-scripts and nothing else, as defined in the HTML Living Standard. That gives it an opaque origin, which is what keeps your code away from the rest of the site. It also inherits this site's Content Security Policy, which blocks anything loaded from other websites. In practice:
- Scripts, stylesheets and web fonts from a CDN do not load. Paste small libraries straight into the JS or CSS tab instead.
- fetch() and XMLHttpRequest to other websites are blocked, so mock your data in the JS tab.
- Images from other sites are blocked. data: URLs work, so small inline images and SVG are fine.
- eval(), new Function() and setTimeout with a string are blocked. Pass a function to setTimeout instead.
- localStorage, sessionStorage and cookies throw a security error, because the frame has no real origin.
- alert(), confirm() and prompt() print to the console instead of opening a dialog. confirm() returns true and prompt() returns its default value.
How does loop protection work?
Before each run, the playground parses your JS and adds a tiny time check at the start of every for, while and do loop. The check is placed on the same line, so error line numbers still match your code. If loops keep one task busy for more than 2 seconds, the check breaks out and prints a warning. The downloaded file never includes these checks.
Loops inside <script> tags in the HTML tab are not protected. Keep heavy scripts in the JS tab.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Where your code goes | Stays in your browser | Saved to a server, often public by default |
| Account needed to keep code | No, it saves in your browser | Usually |
| Console | Logs, errors with JS line numbers, grouped repeats | Often missing or a paid extra |
| Infinite loop protection | Built in, can be switched off | Sometimes |
| Download as one file | One click, clean .html | Often behind sign-up |
| Ads in the editor | None | Common |
Tips
- Press Ctrl+Enter in any editor to run right away. Press Esc and then Tab to move focus out of an editor.
- Use console.table() with an array of objects. It prints each row so you can scan the values quickly.
- Need a color in another format? Convert it between HEX, RGB and HSL, or build a CSS gradient and paste the result into the CSS tab.
- Testing a pattern before you use it in a script? Try it in the regex tester first.
- When the page is finished, minify the HTML, CSS and JavaScript to make the file smaller.
Questions
How do I see console.log output?
Look at the Console panel under the preview. Every console.log, warning and error from your code appears there, and errors show the line number in your JS tab. Clear it with the Clear console button.
Why doesn't my CDN library or Google Font load?
The preview follows this site's security policy, which blocks files from other websites. Paste the library's code into the JS tab, or the CSS into the CSS tab, and it will work.
Is my code saved?
Yes, in your own browser. The playground stores your three tabs in local storage as you type, so they come back after a reload. Nothing is uploaded. Download the .html file to keep a copy elsewhere.
Do I need to write <html>, <head> and <body> tags?
No. Write only the content and the playground builds the full page around it. If you paste a complete document, it uses your document and adds the CSS and JS in the right places.
Why did my loop stop by itself?
Loop protection stopped it after 2 seconds because it looked like it would never end. Check the loop condition, or turn off Loop protection if the code is meant to run that long.
Can I use alert() in the playground?
Yes, but it prints to the console instead of opening a dialog, because the sandbox does not allow pop-ups. confirm() answers OK and prompt() returns its default value.
Can my code harm my computer or this site?
No. The preview runs in a sandboxed frame with its own blank origin. It cannot read this site's cookies or storage, open pop-ups, or navigate the page away. It has the same limits as any website.
Can I use localStorage or fetch in my code?
Not in this preview. The sandbox has no real origin, so storage throws a security error, and requests to other websites are blocked. Use plain variables and inline sample data while you test.