NestJS request lifecycle — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Walk a request through the NestJS lifecycle</h1>
    <p class="pg-sub">
      This is a <b>model</b> of Nest's execution order, not a running NestJS server — nothing here makes
      a real HTTP request. Set the guard and pipe outcomes, then send a simulated request and watch which
      stages actually run.
    </p>

<div class="banner info">
      Simulated model — walks Nest's own documented stage order in plain JS. No real server, no real request.
    </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">Guard decision</span>
          <div class="seg" id="guardSeg">
            <button type="button" aria-pressed="true" data-val="allow">Allow</button>
            <button type="button" aria-pressed="false" data-val="deny">Deny (403)</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Pipe (validation)</span>
          <div class="seg" id="pipeSeg">
            <button type="button" aria-pressed="true" data-val="valid">Valid body</button>
            <button type="button" aria-pressed="false" data-val="invalid">Invalid body (400)</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="happy">Preset: happy path</button>
        <button class="btn sm" data-preset="denied">Preset: guard denies</button>
        <button class="btn sm" data-preset="badbody">Preset: pipe rejects the body</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Pipeline</div>
      <div class="pipeline" id="pipeline">
        <div class="stage" data-stage="mw"><span class="ico">🧵</span>Middleware</div>
        <div class="stage" data-stage="guard"><span class="ico">🛂</span>Guard</div>
        <div class="stage" data-stage="int-before"><span class="ico">⏱️</span>Interceptor (before)</div>
        <div class="stage" data-stage="pipe"><span class="ico">🧪</span>Pipe</div>
        <div class="stage" data-stage="handler"><span class="ico">⚙️</span>Handler</div>
        <div class="stage" data-stage="int-after"><span class="ico">📦</span>Interceptor (after)</div>
        <div class="stage" data-stage="filter"><span class="ico">🧯</span>Filter</div>
      </div>
      <div class="arrowrow">left → right is request order · a skipped stage means the request never reached it</div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick outcomes above and send a request.</span>
      </div>
      <p class="hint" id="caption">Every request starts at Middleware and moves right, one stage at a time.</p>

preview

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