Next.js Parallel & Intercepting Routes — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Same URL, two different renders</h1>
    <p class="pg-sub">
      This is a <b>model</b> of Next.js's parallel + intercepting route rules — not a running Next.js server.
      Pick how the reader arrives and which URL they land on, then simulate the request to see which file
      actually renders.
    </p>

<div class="banner info show">
      Simulated model — walks the documented routing rules 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="field" style="margin-bottom:12px">
        <span class="ctl-label">How does the reader arrive?</span>
        <div class="seg" id="arrivalSeg">
          <button type="button" aria-pressed="true" data-val="client">Click a &lt;Link&gt; from /feed</button>
          <button type="button" aria-pressed="false" data-val="hard">Refresh / typed URL (hard nav)</button>
        </div>
      </div>

<div class="field" style="margin-bottom:12px">
        <span class="ctl-label">Target URL</span>
        <div class="seg" id="targetSeg">
          <button type="button" aria-pressed="true" data-val="photo">/photo/42</button>
          <button type="button" aria-pressed="false" data-val="feed">/feed</button>
        </div>
      </div>

<label class="toggle">
        <input type="checkbox" id="defaultToggle" checked />
        <span class="switch"></span>
        <span><code>@modal/default.tsx</code> exists</span>
      </label>
      <p class="hint" style="margin-top:6px">
        Only matters for a hard navigation to <code>/feed</code> — that's the one case where Next.js needs an
        explicit fallback for the <code>@modal</code> slot.
      </p>

<div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Simulate this request</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What renders</div>

<div class="browser">
        <div class="addr"><span class="dots"><span></span><span></span><span></span></span>yourapp.com<code id="urlBar">/photo/42</code></div>
        <div class="stage" id="stage">
          <div class="block" data-block="feed"><span class="ico">🖼️</span>children slot<div class="file" data-file="feed">idle</div></div>
          <div class="block" data-block="modal"><span class="ico">🗂️</span>@modal slot<div class="file" data-file="modal">idle</div></div>
          <div class="block wide" data-block="standalone"><span class="ico">📄</span>standalone route (outside /feed layout)<div class="file" data-file="standalone">idle</div></div>
        </div>
      </div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick an arrival and a target, then simulate.</span>
      </div>
      <p class="hint" id="caption">Nothing has run yet.</p>

preview

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

Next.js Parallel &amp; Intercepting Routes — interactive playground

Next.js Parallel & Intercepting Routes — interactive playground