NestJS Standard Schema validation — pipe playground

<div class="pg">
    <h1 class="pg-title">🎮 Walk a request through the Standard Schema pipe</h1>
    <p class="pg-sub">
      This is a <b>model</b> of what <code>@Body({ schema })</code> and <code>StandardSchemaValidationPipe</code>
      do to one request — not a running NestJS server. Pick whether the pipe is registered and what payload
      arrives, then send it and watch exactly what the handler receives.
    </p>

<div class="banner info">
      Simulated model — walks the real <code>ArgumentMetadata.schema</code> → <code>transform()</code>
      flow from <code>@nestjs/common</code> 12.1.1's own source, in plain JS. No real server, no real Zod.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Is StandardSchemaValidationPipe registered?</span>
          <div class="seg" id="pipeSeg">
            <button type="button" aria-pressed="true" data-val="yes">app.useGlobalPipes(new StandardSchemaValidationPipe())</button>
            <button type="button" aria-pressed="false" data-val="no">Never registered (only schema attached)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px; margin-top:12px;">
        <div class="field">
          <span class="ctl-label">Body sent to <code>POST /users</code></span>
          <div class="seg" id="bodySeg">
            <button type="button" aria-pressed="true" data-val="valid">{ name: "Ada", age: "42" }</button>
            <button type="button" aria-pressed="false" data-val="missing">{ age: "42" } — name missing</button>
            <button type="button" aria-pressed="false" data-val="badtype">{ name: "Ada", age: "old" }</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px; margin-top:12px;">
        <div class="field">
          <span class="ctl-label">Pipe's <code>transform</code> option</span>
          <div class="seg" id="transformSeg">
            <button type="button" aria-pressed="true" data-val="true">true (default) — coerce to schema output</button>
            <button type="button" aria-pressed="false" data-val="false">false — keep the original value</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Send simulated request</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="forgot">Preset: pipe never registered, bad payload</button>
        <button class="btn sm" data-preset="rejected">Preset: pipe registered, invalid age</button>
        <button class="btn sm" data-preset="coerced">Preset: pipe registered, valid + coerced</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Pipe pipeline</div>
      <div class="pipeline" id="pipeline">
        <div class="stage" data-stage="decorator"><span class="ico">🏷️</span>@Body({ schema })<span class="sub">attaches metadata.schema</span></div>
        <div class="stage" data-stage="pipe"><span class="ico">🧪</span>StandardSchemaValidationPipe<span class="sub">reads metadata.schema</span></div>
        <div class="stage" data-stage="handler"><span class="ico">⚙️</span>Route handler<span class="sub">reached with whatever the pipe returns</span></div>
      </div>
      <div class="arrowrow">left → right · a skipped stage means it was never reached or never consulted</div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick conditions above and send a request.</span>
      </div>
      <p class="hint" id="caption">Every ArgumentMetadata carries `schema` — only a pipe that reads it does anything.</p>
      <div class="body-preview" id="bodyPreview">handler receives: —</div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.