NestJS DI container — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 NestJS DI container: providers &amp; scopes</h1>
    <p class="pg-sub">
      A <b>model</b> of how Nest's DI container resolves <code>@Injectable()</code> providers —
      not a real server. Wire two modules to a cache service and watch when they share one
      instance versus two, then switch provider scope and watch instance counts change per request.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Wire two modules to CacheService</div>
      <div class="cachemod">
        <b>CacheModule</b> owns exactly one <code>CacheService</code> registration —
        instance <span class="instance-id" id="cacheOwnerId">#c1</span>
      </div>
      <div class="modgrid">
        <div class="modbox">
          <h3>OrdersModule</h3>
          <div class="seg" id="ordersSeg">
            <button type="button" aria-pressed="false" data-val="own">Own registration</button>
            <button type="button" aria-pressed="true" data-val="shared">Import CacheModule</button>
          </div>
          <div class="instance-line">
            <span class="muted">Resolves to</span>
            <span class="instance-id" id="ordersInstance">—</span>
          </div>
          <div class="btn-row" style="margin-top:10px">
            <button class="btn sm" id="ordersInc">Orders: cache.increment()</button>
          </div>
          <div class="instance-line">
            <span class="muted">This instance's counter</span>
            <span class="big-num" id="ordersCount">0</span>
          </div>
        </div>
        <div class="modbox">
          <h3>BillingModule</h3>
          <div class="seg" id="billingSeg">
            <button type="button" aria-pressed="false" data-val="own">Own registration</button>
            <button type="button" aria-pressed="true" data-val="shared">Import CacheModule</button>
          </div>
          <div class="instance-line">
            <span class="muted">Resolves to</span>
            <span class="instance-id" id="billingInstance">—</span>
          </div>
          <div class="btn-row" style="margin-top:10px">
            <button class="btn sm" id="billingInc">Billing: cache.increment()</button>
          </div>
          <div class="instance-line">
            <span class="muted">This instance's counter</span>
            <span class="big-num" id="billingCount">0</span>
          </div>
        </div>
      </div>
      <div class="status" id="wireStatus">
        <span class="dot good" id="wireDot"></span>
        <span id="wireText">Both modules import CacheModule — one shared instance, one shared counter.</span>
      </div>
      <p class="hint">
        Switch either module to <b>"Own registration"</b> to simulate listing <code>CacheService</code>
        directly in that module's <code>providers</code> array instead of importing it. Watch the
        counters stop agreeing — that's the bug from the article, reproduced on purpose.
      </p>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn ghost sm" id="wireReset">Reset counters</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Provider scope: DEFAULT vs REQUEST vs TRANSIENT</div>
      <div class="field">
        <span class="ctl-label">Scope of <code>LoggerService</code></span>
        <div class="seg" id="scopeSeg">
          <button type="button" aria-pressed="true" data-val="DEFAULT">DEFAULT</button>
          <button type="button" aria-pressed="false" data-val="REQUEST">REQUEST</button>
          <button type="button" aria-pressed="false" data-val="TRANSIENT">TRANSIENT</button>
        </div>
      </div>
      <p class="hint">
        Each simulated request asks for <code>LoggerService</code> twice — once from
        <code>ServiceA</code>, once from <code>ServiceB</code>. Fire a couple of requests and see
        which scope reuses an instance, which rebuilds it per request, and which never shares.
      </p>
      <div class="btn-row" style="margin-top:6px">
        <button class="btn primary sm" id="fireReq">▶ Simulate a request</button>
        <button class="btn ghost sm" id="scopeReset">Reset log</button>
      </div>
      <div class="log" id="scopeLog" style="margin-top:12px">Fire a request to see instance IDs.</div>
    </div>
  </div>

preview

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