URLPattern route matcher — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Build a route, test it against a URL</h1>
    <p class="pg-sub">
      Type a <code>URLPattern</code> pathname on the left, a path to test it against on the
      right. No regex — see it match (or not) and pull out the named params live.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pattern &amp; test path</div>
      <div class="fields-row">
        <div class="field">
          <div class="ctl-label"><span>Pattern (pathname)</span></div>
          <input type="text" id="pattern" value="/tickets/:id" spellcheck="false" autocomplete="off" />
        </div>
        <div class="field">
          <div class="ctl-label"><span>Path to test</span></div>
          <input type="text" id="testPath" value="/tickets/482" spellcheck="false" autocomplete="off" />
        </div>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-pattern="/tickets/:id" data-path="/tickets/482">Named group · matches</button>
        <button class="btn sm" data-pattern="/tickets/:id" data-path="/tickets/482/edit">Named group · the bug this post fixes</button>
        <button class="btn sm" data-pattern="/files/*" data-path="/files/2026/q3/report.pdf">Wildcard · nested path</button>
        <button class="btn sm" data-pattern="/blog{/:year}?" data-path="/blog">Optional group · no year</button>
        <button class="btn sm" data-pattern="/blog{/:year}?" data-path="/blog/2026">Optional group · with year</button>
        <button class="btn sm" data-pattern="/:kind(ticket|comment)/:id" data-path="/comment/482">Regex group · constrained</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="status" id="statusRow">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Type a pattern and a path above.</span>
      </div>
      <p class="hint" id="hint">
        A <code>URLPattern</code> pathname matches the <em>whole</em> path by default —
        no <code>^</code>, no <code>$</code>, nothing to forget.
      </p>

<div id="groupsWrap">
        <div class="panel-label" style="margin-top:14px"><span class="n">·</span> Extracted named groups</div>
        <table class="groups-table" id="groupsTable">
          <thead><tr><th>name</th><th>value</th></tr></thead>
          <tbody id="groupsBody"></tbody>
        </table>
        <p class="no-groups" id="noGroups" style="display:none">No named groups in this pattern.</p>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The code this is running</div>
      <div class="code" id="codeOut"></div>
    </div>
  </div>

preview

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