HTML/CSS/JS Renderer

This is your in-browser HTML, CSS, and JavaScript playground — a tiny studio space for quick experiments, UI sketches, and proof-of-concepts. There’s no build pipeline, no frameworks, and no waiting around. Paste code into the panels, hit Run, and the preview updates instantly inside a fully sandboxed iFrame.

It’s designed for those moments when something is rattling around your brain and you just want to see it on screen: a layout idea, a hover effect, a weird animation, or a micro-interaction you don’t want to spin up a whole environment for.

Perfect for rapid prototyping, demos, and all the little discoveries that Labs is built for.

HTML / CSS / JS Renderer

Paste HTML, CSS, and JavaScript below and render it in a sandboxed preview. Perfect for tiny experiments and demos.

HTML Structure

<div class="demo-card">
  <h2>Hello from Labs 👋</h2>
  <p>Edit the HTML, CSS, and JS, then hit “Run code” to re-render the preview.</p>
  <button class="demo-button">Click me</button>
</div>

CSS Styling

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
  margin: 0;
  padding: 1.5rem;
  background: radial-gradient(circle at top left, #0f172a, #020617);
  color: #e5e7eb;
}

.demo-card {
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(145deg, #020617, #111827);
  border-radius: 1rem;
  padding: 1.5rem 1.6rem 1.3rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.65);
}

.demo-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}

.demo-card p {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  color: #9ca3af;
}

.demo-button {
  border-radius: 999px;
  border: none;
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #ffc300, #fb923c);
  color: #111827;
  box-shadow: 0 12px 22px rgba(251, 191, 36, 0.45);
}

JavaScript Behaviour

const button = document.querySelector(“.demo-button”);

if (button) {
  button.addEventListener(“click”, () => {
    alert(“Labs says hello 👋\n\nYou just ran code inside a sandbox.”);
  });
}

FYI: This runs entirely in your browser. No backend, no build step.

Live preview

Sandboxed iFrame

Anything you type in the editors is combined into a standalone HTML document and rendered here. Perfect for experimenting!

" + "" ); } function render() { const html = htmlInput.value || ""; const css = cssInput.value || ""; const js = jsInput.value || ""; const doc = buildSrcDoc(html, css, js); iframe.setAttribute("srcdoc", doc); } function reset() { htmlInput.value = initial.html; cssInput.value = initial.css; jsInput.value = initial.js; render(); } runBtn.addEventListener("click", function () { render(); }); resetBtn.addEventListener("click", function () { reset(); }); render(); })(); /* ]]> */

Get Updates

I Love Coffee

Luke Dunsmore - Resources - HTML/CSS/JS Renderer for Notion

HTML/CSS/JS Renderer for Notion - Code
Directly Inside Notion! For Creators & Devs

Get It Now

v1.0.0 - Privacy Policy - Terms of Use

This is an experimental tool. Always double-check outputs. This tool is not a legal tool, or a substitute
for legal advice. The Developer accepts no liability and provides no warranty or accuracy guarantee.

HTML/CSS/JS Renderer

HTML/CSS/JS Renderer for Notion - Code Directly Inside Notion! For Creators & Devs

HTML/CSS/JS Renderer for Notion - Code
Directly Inside Notion! For Creators & Devs