HTML Playground – Live HTML, CSS & JS Editor

HTML tab, then CSS tab

<div class="row">
  <div class="box">A</div>
  <div class="box">B</div>
</div>

/* CSS tab */
.row { display: flex; gap: 12px; }
.box { flex: 1; padding: 24px; background: #e0e7ff; border-radius: 8px; text-align: center; }

In the preview

Two equal-width boxes labelled A and B, side by side with a 12px gap.

HTML tab, then JavaScript tab

<button id="add">Clicked 0 times</button>

// JavaScript tab
const button = document.getElementById("add");
let count = 0;
button.addEventListener("click", () => {
  count += 1;
  button.textContent = "Clicked " + count + " times";
  console.log("count", count);
});

In the preview and console

Each click updates the label and adds a line such as count 3 to the console panel.

HTML tab, then JavaScript tab

<ul id="list"></ul>

// JavaScript tab
const list = document.getElementById("list");
for (const name of ["HTML", "CSS", "JavaScript"]) {
  const item = document.createElement("li");
  item.textContent = name;
  list.append(item);
}

In the preview

A bulleted list with three items: HTML, CSS and JavaScript.

JavaScript

undefinedFunction();

Shown in the preview and console

ReferenceError: undefinedFunction is not defined