← Back to Code

</> Code Playground

Write code on the left, watch it happen on the right. Pick a project to start from, then change things and see what breaks. You cannot hurt anything — Start Over always brings the original back.

Project 1

Hello, World

Try this

    Your page
    What the computer says

    Pick a project and start changing things!

    How to Use It

    The three files
    index.html is what's on the page, style.css is what it looks like, and script.js is what it does. Tap the tabs to move between them.
    Running it
    It runs by itself a moment after you stop typing. Press Run — or Ctrl/Cmd + Enter — to run it straight away, and turn off "Run as I type" if you'd rather do it yourself.
    Stuck in a loop?
    If you write something that never finishes — like while (true) — the page will freeze. Press Stop to throw it away and get back to normal.
    What the computer says
    Anything you console.log shows up under the page, and so do mistakes. Errors come with a plain-English hint and the line number in your script.js.
    Sharing
    Copy Link puts your whole project inside the web address. Send it to someone and they'll see exactly what you made — no accounts, nothing saved anywhere.
    Your work is kept
    Whatever you type is remembered on this device, so you can close the page and come back to it. Start Over throws your changes away and brings back the starting code — it asks first.
    Grown-ups
    Code runs in a sandboxed frame with no access to this page or the rest of the site. That also means localStorage won't work inside the preview. Add projects by copying a block in code/playground/js/projects.js.