Primitive 07 / Code sandbox

Code sandbox block

Booking-widget HTML / CSS / JS scaffold rendered into the live preview pane. Pane switcher in edit mode toggles which file the floating toolbar binds to.

Production answer

Code sandbox block is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Code sandbox block states
Generative search brief

Code sandbox block: Booking-widget HTML / CSS / JS scaffold rendered into the live preview pane. Pane switcher in edit mode toggles which file the floating toolbar binds to.

Live primitive · 3 states
Render mode · preview
Live HTML / CSS / JS playground
HTML8 lines
<section class="quote">
  <h2>Quick quote</h2>
  <form>
    <label>Rego <input name="rego" /></label>
    <label>Bay <select><option>3</option></select></label>
    <button>Get quote</button>
  </form>
</section>
CSS15 lines
.quote {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--primitive-amber) 12%, var(--primitive-canvas));
  color: var(--primitive-text-strong);
  font-family: var(--primitive-font-body);
}
.quote button {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--primitive-red);
  color: var(--primitive-text-on-accent);
}
JavaScript6 lines
const form = document.querySelector('.quote form');
form?.addEventListener('submit', (event) => {
  event.preventDefault();
  const rego = new FormData(form).get('rego');
  alert(`Quote queued for ${rego}`);
});
Preview · Booking widget · liveOak Flats Mufflermen

Live demo wires up <h1> + style + ES module bundle. The preview pane here is mocked — the real CMS pipes the iframe sandbox.

Edit mode · pane switcher
Live HTML / CSS / JS playground
HTML8 lines
<section class="quote">
  <h2>Quick quote</h2>
  <form>
    <label>Rego <input name="rego" /></label>
    <label>Bay <select><option>3</option></select></label>
    <button>Get quote</button>
  </form>
</section>
CSS15 lines
.quote {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--primitive-amber) 12%, var(--primitive-canvas));
  color: var(--primitive-text-strong);
  font-family: var(--primitive-font-body);
}
.quote button {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--primitive-red);
  color: var(--primitive-text-on-accent);
}
JavaScript6 lines
const form = document.querySelector('.quote form');
form?.addEventListener('submit', (event) => {
  event.preventDefault();
  const rego = new FormData(form).get('rego');
  alert(`Quote queued for ${rego}`);
});
Preview · Booking widget · liveOak Flats Mufflermen

Live demo wires up <h1> + style + ES module bundle. The preview pane here is mocked — the real CMS pipes the iframe sandbox.

Error state