Intl.RelativeTimeFormat — interactive playground

<div class="pg">
    <h1 class="pg-title">🌍 Intl.RelativeTimeFormat live</h1>
    <p class="pg-sub">
      Adjust the value, pick a unit and locale mode — watch the browser format it into
      natural-language relative time, no library required.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set the value and unit</div>
      <div class="controls-grid">
        <div class="field">
          <label class="label" for="valInput">Value (negative = past)</label>
          <input type="number" id="valInput" value="-3" style="width:100%;box-sizing:border-box;" />
        </div>
        <div class="field">
          <label class="label" for="unitSel">Unit</label>
          <select id="unitSel" style="width:100%;box-sizing:border-box;">
            <option value="second">second</option>
            <option value="minute">minute</option>
            <option value="hour" selected>hour</option>
            <option value="day">day</option>
            <option value="week">week</option>
            <option value="month">month</option>
            <option value="quarter">quarter</option>
            <option value="year">year</option>
          </select>
        </div>
      </div>
      <div class="field" style="margin-top:10px">
        <label class="label">numeric</label>
        <div class="auto-demo" id="numericBtns">
          <button class="auto-chip" data-v="always">always</button>
          <button class="auto-chip active" data-v="auto">auto <span style="font-weight:normal;opacity:.7">(gives "yesterday")</span></button>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Output (English)</div>
      <div class="big-out" id="mainOut">—</div>
      <div class="code-out" id="codeOut"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Same value, multiple locales</div>
      <div class="locale-grid" id="localeGrid"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Auto-unit helper</div>
      <p class="hint">
        The API doesn't pick the unit for you — but a tiny helper does. Click a preset to
        see how elapsed time maps to the right unit automatically.
      </p>
      <div class="auto-demo" id="presets"></div>
      <div class="big-out" id="helperOut" style="font-size:1.1rem;margin-top:12px">—</div>
      <div class="code-out" id="helperCode" style="margin-top:6px"></div>
    </div>
  </div>

preview

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