HTML Playground

Type HTML, CSS and JavaScript and watch the page update as you go. Perfect for learning, prototyping and quick experiments.

  • Processed on your device
  • Instant, no queue
  • Free, no sign-up
Advertisement
Preview
Console
    Advertisement

    How to use HTML Playground

    1. Pick a starting point from Templates, or clear the editors and write your own code.
    2. Switch between the HTML, CSS and JavaScript tabs. With Auto-run on the preview refreshes as you type; press Ctrl + Enter to run at any time.
    3. Check console.log output and errors under the preview, then use Full screen or Download to save a single index.html.

    About this tool

    The quickest way to learn web development is to write code and see what it does. This playground gives you three editors (HTML for structure, CSS for style and JavaScript for behaviour) and a live preview beside them, so every change shows up a moment after you type it.

    The templates cover the things beginners build first: a profile card, a responsive navigation bar that folds into a menu, an orbit animation built with CSS keyframes, a validated sign-up form and a click counter. Change colors, swap elements and break things on purpose; the console under the preview shows your console.log messages and any JavaScript errors with line numbers.

    Your code runs in a sandboxed frame and is saved in your browser automatically, so it is still there when you come back. Nothing is uploaded. When you are happy, download the page as one self-contained HTML file that opens in any browser.

    Questions and answers

    Is my code saved?

    Yes, in your browser's local storage on this device. It is never uploaded. Clearing your browser data or using a private window removes it, so download anything you want to keep.

    Can I paste a full HTML document?

    Yes. If your HTML includes <html> and <head> tags, the CSS and JavaScript tabs are injected into it. Otherwise the playground wraps your code in a standard HTML5 page.

    Can I use libraries like Bootstrap or jQuery?

    Yes. Add a <link> or <script src> tag pointing to a CDN in the HTML tab. Those files are loaded by the preview from the CDN.

    Why does my script not see my HTML?

    Scripts run after the HTML, so document.querySelector works straight away. If you use the full-document mode, keep your elements inside <body>.

    Does it work on phones?

    Yes. On small screens the editor and preview stack vertically. Use Full screen to view the result at full size.

    Advertisement