HTML/CSS/JS Playground

How to use the playground

1. Pick a file tab: index.html holds the page, style.css the styles and script.js the code that runs.
2. Type. With Auto-run on, the page updates a moment after you stop typing; press Run (or Ctrl+Enter) to update it yourself.
3. Read the console under the page for console.log messages and for errors, with the file and line.
4. Press + to add a file, then link it from index.html. When you are done, open the ⋯ menu and choose Download all files (.zip).

How the files fit together

The page shown is index.html. Link other files the usual way: <link rel="stylesheet" href="theme.css"> and <script src="app.js"></script> find the files in your project. If you do not link style.css and script.js, they are attached for you, so a starter project works without any tags. SVG files in the project can be used as images.

What the preview can and cannot do

The preview is a sandbox. It runs your scripts, but it cannot read this site, your cookies or other tabs, and it cannot make network requests. To load an image, a font or a library from the web, switch on Let the preview use the internet; your code then contacts only the sites you name. If you want to try the same ideas with a framework, see the CSS Effects Generator for ready-made styles and the HTML Entity Encoder for safe special characters.

The starter project turns a card blue each time you press its button. In index.html:

<main class="card">
  <h1>Hello, playground</h1>
  <p>Press the button to change this page.</p>
  <button id="go" type="button">Change colour</button>
</main>

In script.js, a click toggles a class and writes a line to the console:

const card = document.querySelector('.card');
document.getElementById('go').addEventListener('click', () => {
  card.classList.toggle('alt');
  console.log('Card colour changed. alt =', card.classList.contains('alt'));
});
console.log('Page ready');

Result: the page shows the card; pressing the button changes its colour and the console shows Card colour changed. alt = true.

• Linking a file by the wrong name: href="styles.css" will not find style.css. The console warns when a linked file is missing.
• Putting script code in the HTML before the elements it uses. Code in script.js runs after the body, so it can find them.
• Expecting a library from the web to load while the internet switch is off.
• Using localStorage or cookies: the sandbox blocks them on purpose.