Web Scratchpad

What it's for

Try out HTML, CSS and JavaScript in the browser and see the result straight away, without creating files or setting up a project.

For example, when you want to test a CSS layout, check how a snippet of JavaScript behaves, or put together a quick prototype to show someone.

How to use it

Write in the HTML, CSS and JavaScript tabs, then choose Run or press ⌘-Enter (Ctrl-Enter on Windows), or tick Run as I type. The Result tab shows the page, and the Console tab shows console.log output and errors, with the line number in your JavaScript.

Tick Allow external resources to load libraries, fonts or images from other sites, using a <script src> in the HTML. Choose what the Tab key does: move to the next field, or indent. Download .html saves everything as a single file. Your code is kept in this browser between visits.

Example

Put <h1>Hello</h1> in HTML, h1 { color: tomato; } in CSS, and this in JavaScript:

console.log('6 × 7 =', 6 * 7)
nosuchFunction()

Choose Run. The result shows a tomato-coloured heading, and the console shows 6 × 7 = 42 followed by Uncaught ReferenceError: nosuchFunction is not defined (JavaScript line 2).

Good to know

The result runs in a sandbox, so its scripts can’t reach this page or your other tabs. Nothing is fetched from other sites unless you allow external resources. Your code is saved only in this browser, so download it if you want to keep it.