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.

Get Updates

I Love Coffee

HTML Structure

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

CSS Styling

body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 2rem;
  background-color: #f8fafc;
  color: #0f172a;
  display: flex;
  justify-content: center;
}

.demo-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.75rem;
  border: 5px solid #ffc300;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  text-align: center;
}

.demo-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: #0f172a;
}

.demo-card p {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

.demo-button {
  border-radius: 8px;
  border: none;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background-color: #3b82f6;
  color: #ffffff;
  transition: background-color 0.2s;
}

.demo-button:hover {
  background-color: #2563eb;
}

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.”);
  });
}

Live Preview

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

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.1.2 - 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

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