HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selection preview</title>
  <style>
    #preview {
      position: sticky; top: 0; z-index: 1;
      background: #fff; border-bottom: 1px solid #333;
      padding: 10px; margin: 0 0 16px;
    }
    article { line-height: 1.7; max-width: 40rem; }
  </style>
</head>
<body>
  <div id="preview">Select any text on this page…</div>
  <article>
    <h1>Selection API demo</h1>
    <p>Highlight words in this article. The sticky bar above mirrors your selection.</p>
    <p>This pattern is useful for quote tools, share buttons, and floating format menus.</p>
  </article>
  <script>
    var preview = document.getElementById("preview");
    document.addEventListener("selectionchange", function () {
      var text = String(document.getSelection() || "").trim();
      preview.textContent = text
        ? "You selected: " + text
        : "Select any text on this page…";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document selectionchange — live preview (Try It)