Skip to content
ToolMug

Use ↑ ↓ to move, Enter to open, Esc to close.

HTML, CSS and JavaScript Playground

Write HTML, CSS and JavaScript on the left and watch the result update on the right, with a console below showing console.log output and script errors. Handy for learning front-end, trying out a style or an interaction, or showing someone a demo — and you can download everything as a single HTML file.

Runs in your browser — nothing you enter is uploaded

Console

    Code runs in an isolated sandbox with no access to this site’s data, and nothing is uploaded. The download is a single combined HTML file. Tab indents in the editor; press Esc then Tab to move focus out.

    How to use

    1. Switch between the HTML, CSS and JavaScript editors with the buttons above and write your code.
    2. The preview updates automatically when you pause typing, or turn that off and click Run.
    3. Check the console for output and errors, then click Download HTML to save your page.

    Options explained

    Sandbox
    The preview runs in an isolated sandbox that cannot read this site’s cookies or storage and cannot open dialogs.
    Console
    Shows console.log, warn and error output plus uncaught errors with line numbers, keeping the latest 200 entries.
    Download
    Combines the three parts into one HTML file, with styles in a style tag and the script at the end of the body.

    How the page is put together

    The three editors are combined into one document, in this order. The same layout is what you get when you click Download HTML, except that the small script that sends console output to the page below the preview is left out of the download.

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

    Because the script comes after your HTML, you can use document.getElementById straight away without waiting for the page to load. You write only what belongs inside the body in the HTML editor, not the html, head or body tags themselves. The preview is an iframe that only has permission to run scripts, which is why alert dialogs and access to this site’s cookies are blocked.

    Frequently asked questions

    Can I use external libraries?

    Yes. Add a script or link tag pointing to a CDN such as jsDelivr in the HTML editor.

    Why doesn’t alert show up?

    The sandbox blocks dialogs, so alert and confirm do nothing. Use console.log instead.

    Is my code saved?

    It isn’t saved or uploaded. Download the HTML file before closing the page.

    Privacy

    This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.

    Related tools