a live css editor

Live Editor

Edit the CSS on the left. The panel on the right re-renders on every keystroke. The preview lives inside a Shadow DOM, so whatever you type stays sandboxed and can’t reach the rest of the page. The syntax highlighter is hand-rolled (no library), the tokenizer fits in about 30 lines, and the whole thing runs without a build step.

/* Live preview, edit anything! */

:root {
  –bg:      #1b1712;
  –border:  #2a241c;
  –primary: #f43f5e;
  –accent:  #e11d48;
  –hot:     #f43f5e;
  –radius:  14px;
  –pad:     28px;
}

.demo {
  background: var(–bg);
  border: 1px solid var(–border);
  border-radius: var(–radius);
  padding: var(–pad);
  color: #efe9df;
  font-family: ui-sans-serif, system-ui, sans-serif;
  transition: all 220ms ease;
}

.demo h4 {
  background: linear-gradient(135deg, var(–primary), var(–accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 12px;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.demo .tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(–hot);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo p {
  color: #a89f8f;
  margin: 14px 0 0;
  line-height: 1.55;
}

Try changing --accent to #facc15, --radius to 32px, or the linear-gradient direction. Press Escape and then Tab to leave the editor.