Intl.Segmenter — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 <code>.slice()</code> vs <code>Intl.Segmenter</code></h1>
    <p class="pg-sub">
      Drag the limit down and watch a plain <code>.slice(0, n)</code> cut straight through an emoji,
      while <code>Intl.Segmenter</code> always stops between characters.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The string</div>
      <input type="text" id="input" class="str-input" />
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="family">Family emoji</button>
        <button class="btn sm" data-preset="flag">Flag emoji</button>
        <button class="btn sm" data-preset="plain">Plain ASCII</button>
      </div>
      <p class="hint">Three ways of asking "how long is this?" — they don't agree.</p>
      <div class="counts">
        <div class="count-card">
          <span class="big-num" id="cUnits">0</span>
          <span class="cc-label"><code>str.length</code><br>(UTF-16 units)</span>
        </div>
        <div class="count-card">
          <span class="big-num" id="cPoints">0</span>
          <span class="cc-label"><code>[...str].length</code><br>(code points)</span>
        </div>
        <div class="count-card">
          <span class="big-num" id="cGraphemes">0</span>
          <span class="cc-label">Segmenter graphemes<br>(what you see)</span>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Truncate to "N characters"</div>
      <div class="limit-row">
        <input type="range" id="limit" min="1" max="20" value="10" />
        <span class="limit-val"><span id="limitVal">10</span> chars</span>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn sm" id="jumpCrack">Jump to where it breaks</button>
        <button class="btn ghost sm" id="reset">Reset</button>
      </div>

<div style="margin-top:16px">
        <div class="panel-label" style="margin-bottom:6px">the naive way — <code>str.slice(0, n)</code></div>
        <div class="stage" id="naiveStage">—</div>
        <div class="status" id="naiveStatus" style="margin-top:8px">
          <span class="dot" id="naiveDot"></span><span id="naiveText"></span>
        </div>
      </div>

<div style="margin-top:16px">
        <div class="panel-label" style="margin-bottom:6px">the fix — <code>Intl.Segmenter</code> graphemes</div>
        <div class="stage good" id="segStage">—</div>
        <div class="status" id="segStatus" style="margin-top:8px">
          <span class="dot good" id="segDot"></span><span id="segText"></span>
        </div>
      </div>

preview

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