HTML, CSS & JS Playground

Try out an idea, teach a concept or debug a snippet without setting up a project. The preview updates as you type and console.log output appears below it.

Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile

HTML

<main class="card">
  <h1>Namaste, Hyderabad!</h1>
  <p>Edit the HTML, CSS and JS panes. The preview updates as you type.</p>
  <button id="btn">Clicked 0 times</button>
</main>

CSS

body {
  font-family: system-ui, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #fde68a, #fca5a5);
}
.card {
  background: #fff;
  padding: 24px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
  max-width: 340px;
  text-align: center;
}
button {
  font: inherit;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}

const btn = document.getElementById('btn');
let count = 0;
btn.addEventListener('click', () => {
  count++;
  btn.textContent = `Clicked ${count} time${count === 1 ? '' : 's'}`;
  console.log('Button clicked', { count });
});
console.log('Ready. Click the button.');

Console

console.log output and errors appear here.

Your code is saved in this browser as you type. Tab indents; press Esc then Tab to leave an editor. Ctrl+Enter runs the code. The preview runs in a sandbox with no access to this site.

How to use the HTML playground

Type in the HTML, CSS and JS panes, or pick a template.
Watch the preview and console update as you type.
Copy a share link or download the page as one .html file.

Features

Three panes with line numbers
Tab indents, Enter keeps indentation
Live preview in a sandbox
Captured console.log and errors with line numbers
Side-by-side, stacked or tabbed layout
Autosave, share link and .html download

Frequently asked questions

Is my code saved?

Yes. It is saved in this browser as you type and comes back when you return. Clearing your browser data removes it, so download the file or copy a share link to keep a copy.

How does the share link work?

Your code is compressed and put in the part of the link after #, which browsers never send to a server. Anyone who opens the link sees the same code. Very large projects make very long links.

Is it safe to run code here?

The preview runs in a sandboxed frame with no access to this site, its storage or your other tabs. Still, only run code you trust.

Can I use libraries such as jQuery or Tailwind?

Yes. Add a <script src> or <link> tag for a CDN URL in the HTML pane. Those files then load from that CDN.

Why does localStorage not work in the preview?

The sandbox gives the preview no storage of its own, so localStorage and cookies throw errors there. They work in the downloaded .html file.

Related tools

All Developer Tools →