ds
Patterns
Workbench

Workbench

Input left, output right, with output tabs and copy.

lab

Schema converter

Paste JSON, get types. Runs in this tab.

JSON

5 fields · 1 nestedUTF-8

export interface Order {
  id: string;
  total: number;
  paid: boolean;
  items: Item[];
}

export interface Item {
  sku: string;
  qty: number;
}

order.ts0.4 ms

Show code

<div class="workbench">
  <header class="wb-bar">
    <div><p class="label kicker">lab</p><h2>Schema converter</h2><p>Paste JSON, get types.</p></div>
    <div class="btn-row">…</div>
  </header>
  <div class="wb-panes">
    <section class="wb-pane" aria-label="Input">
      <div class="wb-head"><span class="label">JSON</span><button class="btn xs ghost">Paste</button></div>
      <div class="wb-body"><div class="editor">…</div></div>
      <div class="wb-foot"><span>5 fields · 1 nested</span><span>UTF-8</span></div>
    </section>
    <section class="wb-pane" aria-label="Output">
      <div class="wb-head">
        <div class="tabs" role="tablist" aria-label="Format">
          <button class="tab" role="tab" aria-selected="true">TypeScript</button> …
        </div>
        <button class="btn xs" data-copy="…"><svg class="i">…</svg><span>Copy</span></button>
      </div>
      <div class="wb-body" role="tabpanel"><pre class="wb-out">…</pre></div>
    </section>
  </div>
</div>

The layout for lab's tools: a tool bar, then input on the left and output on the right in one frame, split by a hairline. Under 860px the panes stack, input first. Each pane has a head, a body that scrolls, and an optional mono foot for counts and timings.

Output formats are tabs in the pane head, with the copy button at the end. With many formats the tabs scroll sideways and fade at the edge. An editor or a drop zone placed straight in a pane body loses its own border and fills it.

API

Class	On	What it does
`.workbench`	div	Tool bar above the panes.
`.fill`	.workbench	Fills the viewport under a 3.5rem header (set --hdr-h to change it); the pane bodies scroll.
`.flush`	.workbench	No outer border or radius, for edge-to-edge tools.
`.wb-bar`	header	Title block on the left, .btn-row on the right.
`.wb-panes`	div	The frame. Two columns from 860px; set --split to change the ratio.
`.wb-pane`	section	One pane: head, body, foot.
`.wb-head`	div	A .label or .tabs on the left, actions on the right.
`.wb-body / .pad`	div	Scrolling body; .pad adds 1rem.
`.wb-out`	pre	Mono output, no wrapping.
`.wb-foot`	div	Mono status line. The last item sits on the right.

Accessibility

Name each pane (aria-label or a heading), so the stacked order still makes sense on a phone.
Copy buttons change their text to "Copied" for a moment; also announce it in a role="status" region or a toast.