UI Components Medium
Streaming Markdown
A streaming markdown renderer that types an AI-style response token-by-token behind a blinking cursor while live-parsing headings, lists, bold, tables, and fenced code blocks the instant they complete. Code blocks gain a one-tap copy button, and start, stop, and replay controls plus a speed dial let you scrub the token cadence from a slow reveal to a firehose.
Open in Lab
MCP
vanilla-js css
Targets: JS HTML
Code
:root {
--bg: #0c0d10;
--surface: #15161b;
--surface-2: #1d1f27;
--ink: #e9eaf0;
--muted: #9a9cab;
--accent: #8b5cf6;
--accent-2: #22d3ee;
--ok: #34d399;
--warn: #fbbf24;
--danger: #f87171;
--line: rgba(255, 255, 255, 0.10);
--line-2: rgba(255, 255, 255, 0.18);
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
}
* {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(1200px 600px at 15% -10%, rgba(139, 92, 246, 0.14), transparent 55%),
radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.10), transparent 50%),
var(--bg);
color: var(--ink);
font-family: "Inter", system-ui, -apple-system, sans-serif;
line-height: 1.5;
display: grid;
place-items: center;
padding: 28px 16px;
}
.app {
width: 100%;
max-width: 760px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ---------- header ---------- */
.app__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand__dot {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow: 0 6px 20px -6px var(--accent);
position: relative;
flex: none;
}
.brand__dot::after {
content: "";
position: absolute;
inset: 9px;
border-radius: 4px;
background: var(--surface);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) inset;
}
.brand__title {
margin: 0;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand__sub {
margin: 1px 0 0;
font-size: 12.5px;
color: var(--muted);
}
.status__pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px 6px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
white-space: nowrap;
}
.status__glow {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--muted);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
.status__pill[data-state="streaming"] {
color: var(--accent-2);
border-color: rgba(34, 211, 238, 0.35);
}
.status__pill[data-state="streaming"] .status__glow {
background: var(--accent-2);
animation: pulse 1.1s ease-in-out infinite;
}
.status__pill[data-state="done"] {
color: var(--ok);
border-color: rgba(52, 211, 153, 0.35);
}
.status__pill[data-state="done"] .status__glow {
background: var(--ok);
}
.status__pill[data-state="paused"] {
color: var(--warn);
border-color: rgba(251, 191, 36, 0.35);
}
.status__pill[data-state="paused"] .status__glow {
background: var(--warn);
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(34, 211, 238, 0); }
}
/* ---------- stream ---------- */
.stream {
display: flex;
flex-direction: column;
min-height: 340px;
}
.stream__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.015);
}
.stream__meta {
display: flex;
align-items: center;
gap: 10px;
}
.avatar {
width: 26px;
height: 26px;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: #0c0d10;
background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.stream__label {
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
}
.stream__stats {
display: flex;
gap: 8px;
font-size: 12px;
color: var(--muted);
font-family: "JetBrains Mono", monospace;
}
.stat {
padding: 3px 9px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.stat--pct { color: var(--accent); }
.stat span { color: var(--ink); font-weight: 600; }
/* ---------- markdown canvas ---------- */
.md {
flex: 1;
padding: 20px 24px 26px;
overflow-y: auto;
max-height: 460px;
font-size: 14.5px;
scroll-behavior: smooth;
}
.md__empty {
height: 100%;
min-height: 260px;
display: grid;
place-items: center;
text-align: center;
color: var(--muted);
}
.md__empty strong { color: var(--ink); }
/* caret */
.caret {
display: inline-block;
width: 8px;
height: 1.05em;
margin-left: 1px;
vertical-align: -0.18em;
border-radius: 2px;
background: var(--accent-2);
box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* rendered markdown elements */
.md h1, .md h2, .md h3 {
line-height: 1.25;
letter-spacing: -0.015em;
margin: 1.25em 0 0.5em;
font-weight: 700;
}
.md > :first-child { margin-top: 0; }
.md h1 { font-size: 1.55em; }
.md h2 {
font-size: 1.25em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--line);
}
.md h3 { font-size: 1.08em; color: #d4d6e0; }
.md p { margin: 0.7em 0; }
.md a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(34, 211, 238, 0.35); }
.md a:hover { border-color: var(--accent-2); }
.md strong { color: #fff; font-weight: 700; }
.md em { color: #d4d6e0; }
.md del { color: var(--muted); }
.md ul, .md ol { margin: 0.6em 0; padding-left: 1.4em; }
.md li { margin: 0.28em 0; }
.md ul li::marker { color: var(--accent); }
.md ol li::marker { color: var(--accent); font-weight: 600; }
.md blockquote {
margin: 0.8em 0;
padding: 0.4em 1em;
border-left: 3px solid var(--accent);
background: rgba(139, 92, 246, 0.08);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
color: #c9cbd6;
}
.md hr {
border: 0;
height: 1px;
background: var(--line);
margin: 1.3em 0;
}
.md :not(pre) > code {
font-family: "JetBrains Mono", monospace;
font-size: 0.86em;
padding: 0.14em 0.42em;
border-radius: 6px;
background: var(--surface-2);
border: 1px solid var(--line);
color: #f0c9ff;
}
.md table {
width: 100%;
border-collapse: collapse;
margin: 0.9em 0;
font-size: 0.92em;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden;
}
.md th, .md td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.md th {
background: var(--surface-2);
font-weight: 600;
color: var(--ink);
}
.md tr:last-child td { border-bottom: 0; }
.md tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
/* code block */
.codeblock {
margin: 0.9em 0;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: #0f1015;
overflow: hidden;
}
.codeblock__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px 7px 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.codeblock__lang {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
font-weight: 600;
color: var(--muted);
text-transform: lowercase;
letter-spacing: 0.02em;
}
.copy {
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
font-size: 11.5px;
font-weight: 600;
color: var(--muted);
background: transparent;
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.copy:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.copy:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.copy .ico { width: 13px; height: 13px; fill: currentColor; }
.copy.is-copied { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); }
.codeblock pre {
margin: 0;
padding: 13px 14px;
overflow-x: auto;
}
.codeblock code {
font-family: "JetBrains Mono", monospace;
font-size: 12.8px;
line-height: 1.65;
color: #d9dcec;
white-space: pre;
}
/* tiny token coloring */
.codeblock .tok-key { color: #c792ea; }
.codeblock .tok-str { color: #a5e6b0; }
.codeblock .tok-num { color: #f7c56b; }
.codeblock .tok-com { color: #6b6f80; font-style: italic; }
.codeblock .tok-fn { color: #82d3ff; }
/* ---------- controls ---------- */
.controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, 0.015);
flex-wrap: wrap;
}
.controls__group {
display: flex;
align-items: center;
gap: 8px;
}
.controls__group--speed { gap: 10px; }
.btn {
display: inline-flex;
align-items: center;
gap: 7px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: var(--surface-2);
border: 1px solid var(--line);
padding: 8px 14px;
border-radius: var(--r-sm);
cursor: pointer;
transition: transform 0.12s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn .ico { width: 15px; height: 15px; fill: currentColor; }
.btn:hover { border-color: var(--line-2); background: #23252f; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primary {
color: #0c0d10;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-color: transparent;
box-shadow: 0 8px 22px -10px var(--accent);
}
.btn--primary:hover { background: linear-gradient(135deg, #9b6bff, #3ddcf0); }
.speed__label {
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
}
.seg {
display: inline-flex;
padding: 3px;
gap: 2px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 999px;
}
.seg__btn {
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--muted);
background: transparent;
border: 0;
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active {
color: #0c0d10;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.seg__btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* scrollbar */
.md::-webkit-scrollbar, .codeblock pre::-webkit-scrollbar { height: 8px; width: 9px; }
.md::-webkit-scrollbar-thumb, .codeblock pre::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 999px;
}
.md::-webkit-scrollbar-track { background: transparent; }
/* ---------- responsive ---------- */
@media (max-width: 520px) {
body { padding: 14px 8px; }
.app__head { padding: 14px; }
.brand__sub { display: none; }
.md { padding: 16px 16px 20px; }
.stream__bar { padding: 10px 14px; }
.controls { padding: 12px 14px; gap: 12px; }
.controls__group { flex: 1; }
.controls__group--speed { width: 100%; justify-content: space-between; }
.btn span:not(.ico) { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.caret { animation: none; opacity: 1; }
.status__pill .status__glow { animation: none; }
.md { scroll-behavior: auto; }
}/* Streaming Markdown — token-by-token reveal + self-contained parser.
No dependencies. */
(() => {
"use strict";
/* ---------------------------------------------------------------
* The "model response" we stream out, character by character.
* ------------------------------------------------------------- */
const RESPONSE = `# Deploying to the edge
Here's a **quick rundown** of shipping a worker to the edge, streamed the way a
real model would emit it — one token at a time.
## Why the edge?
- Requests hit the *nearest* datacenter, so latency drops.
- No cold VMs — workers spin up in ~5ms.
- You pay per request, not per idle hour.
> Tip: keep bundles under **1 MiB** so the worker boots instantly.
### A minimal handler
Below, the whole thing fits in a single fetch handler:
\`\`\`js
export default {
async fetch(request, env) {
const url = new URL(request.url);
// route by pathname
if (url.pathname === "/health") {
return Response.json({ ok: true, ts: Date.now() });
}
const name = url.searchParams.get("name") ?? "world";
return new Response(\`Hello, \${name}!\`, {
headers: { "content-type": "text/plain" },
});
},
};
\`\`\`
Deploy it with a single command:
\`\`\`bash
# publish to every edge location
wrangler deploy --minify
\`\`\`
## Regions at a glance
| Region | Cold start | p99 latency |
| ------ | ---------- | ----------- |
| US-East | 4.8ms | 21ms |
| EU-West | 5.1ms | 24ms |
| AP-South | 5.6ms | 29ms |
That's it — you now have a globally distributed API with \`zero\` servers to
manage. Ship it. 🚀`;
/* ---------------------------------------------------------------
* Minimal, self-contained Markdown parser.
* Renders the *current buffer* on every tick. Incomplete blocks
* (e.g. an unterminated code fence) render as plain text so the
* structure "snaps" into place the moment its syntax closes.
* ------------------------------------------------------------- */
const esc = (s) =>
s.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
function inline(text) {
let t = esc(text);
// code spans first (protect their contents)
const codes = [];
t = t.replace(/`([^`]+)`/g, (_, c) => {
codes.push(c);
return ` ${codes.length - 1} `;
});
t = t
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
.replace(/__([^_]+)__/g, "<strong>$1</strong>")
.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>")
.replace(/(^|[^_])_([^_\n]+)_/g, "$1<em>$2</em>")
.replace(/~~([^~]+)~~/g, "<del>$1</del>")
.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2" rel="noopener">$1</a>');
// restore code spans
t = t.replace(/ (\d+) /g, (_, i) => `<code>${codes[+i]}</code>`);
return t;
}
// tiny syntax highlighter for js/bash code blocks
function highlight(code, lang) {
let h = esc(code);
if (lang === "js" || lang === "ts" || lang === "javascript") {
h = h.replace(/(\/\/[^\n]*)/g, '<span class="tok-com">$1</span>');
h = h.replace(/("[^&]*?"|'[^&]*?'|`[^`]*?`)/g, '<span class="tok-str">$1</span>');
h = h.replace(/\b(export|default|async|const|let|var|return|if|new|await|function)\b/g, '<span class="tok-key">$1</span>');
h = h.replace(/\b(\d+(?:\.\d+)?)\b/g, '<span class="tok-num">$1</span>');
h = h.replace(/\b(fetch|Response|URL|Date|json)\b/g, '<span class="tok-fn">$1</span>');
} else if (lang === "bash" || lang === "sh") {
h = h.replace(/(#[^\n]*)/g, '<span class="tok-com">$1</span>');
h = h.replace(/\b(wrangler|deploy|npm|npx|git)\b/g, '<span class="tok-key">$1</span>');
h = h.replace(/(--[a-z-]+)/g, '<span class="tok-fn">$1</span>');
}
return h;
}
let cbId = 0;
function parse(src) {
const lines = src.split("\n");
let html = "";
let i = 0;
const flushList = (buf, ordered) => {
if (!buf.length) return "";
const tag = ordered ? "ol" : "ul";
return `<${tag}>${buf.map((li) => `<li>${inline(li)}</li>`).join("")}</${tag}>`;
};
while (i < lines.length) {
let line = lines[i];
// fenced code block
const fence = line.match(/^```(\w*)\s*$/);
if (fence) {
const lang = fence[1] || "text";
const body = [];
i++;
let closed = false;
while (i < lines.length) {
if (/^```\s*$/.test(lines[i])) { closed = true; i++; break; }
body.push(lines[i]);
i++;
}
const code = body.join("\n");
const id = `cb${cbId++}`;
html +=
`<div class="codeblock" data-open="${closed ? "0" : "1"}">` +
`<div class="codeblock__head">` +
`<span class="codeblock__lang">${esc(lang)}</span>` +
`<button class="copy" type="button" data-code-id="${id}" aria-label="Copy code">` +
`<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg>` +
`<span class="copy__txt">Copy</span>` +
`</button>` +
`</div>` +
`<pre><code id="${id}" data-raw="${encodeURIComponent(code)}">${highlight(code, lang)}</code></pre>` +
`</div>`;
continue;
}
// table (header row + separator row)
if (/^\|(.+)\|\s*$/.test(line) && i + 1 < lines.length && /^\|[\s:|-]+\|\s*$/.test(lines[i + 1])) {
const cells = (row) =>
row.replace(/^\||\|\s*$/g, "").split("|").map((c) => c.trim());
const head = cells(line);
i += 2;
const body = [];
while (i < lines.length && /^\|(.+)\|\s*$/.test(lines[i])) {
body.push(cells(lines[i]));
i++;
}
html +=
`<table><thead><tr>${head.map((c) => `<th>${inline(c)}</th>`).join("")}</tr></thead>` +
`<tbody>${body.map((r) => `<tr>${r.map((c) => `<td>${inline(c)}</td>`).join("")}</tr>`).join("")}</tbody></table>`;
continue;
}
// headings
const h = line.match(/^(#{1,3})\s+(.*)$/);
if (h) {
const lvl = h[1].length;
html += `<h${lvl}>${inline(h[2])}</h${lvl}>`;
i++;
continue;
}
// horizontal rule
if (/^(-{3,}|\*{3,})\s*$/.test(line)) {
html += "<hr />";
i++;
continue;
}
// blockquote
if (/^>\s?/.test(line)) {
const buf = [];
while (i < lines.length && /^>\s?/.test(lines[i])) {
buf.push(lines[i].replace(/^>\s?/, ""));
i++;
}
html += `<blockquote>${inline(buf.join(" "))}</blockquote>`;
continue;
}
// unordered list
if (/^[-*+]\s+/.test(line)) {
const buf = [];
while (i < lines.length && /^[-*+]\s+/.test(lines[i])) {
buf.push(lines[i].replace(/^[-*+]\s+/, ""));
i++;
}
html += flushList(buf, false);
continue;
}
// ordered list
if (/^\d+\.\s+/.test(line)) {
const buf = [];
while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
buf.push(lines[i].replace(/^\d+\.\s+/, ""));
i++;
}
html += flushList(buf, true);
continue;
}
// blank line
if (line.trim() === "") { i++; continue; }
// paragraph (gather consecutive non-empty, non-special lines)
const para = [];
while (
i < lines.length &&
lines[i].trim() !== "" &&
!/^(#{1,3}\s|```|>|\||[-*+]\s|\d+\.\s|-{3,}\s*$|\*{3,}\s*$)/.test(lines[i])
) {
para.push(lines[i]);
i++;
}
if (para.length) html += `<p>${inline(para.join(" "))}</p>`;
}
return html;
}
/* ---------------------------------------------------------------
* DOM refs + state
* ------------------------------------------------------------- */
const output = document.getElementById("output");
const emptyState = document.getElementById("emptyState");
const startBtn = document.getElementById("startBtn");
const startLabel = document.getElementById("startLabel");
const stopBtn = document.getElementById("stopBtn");
const replayBtn = document.getElementById("replayBtn");
const speedSeg = document.getElementById("speed");
const statusPill = document.getElementById("statusPill");
const statusText = document.getElementById("statusText");
const tokenCount = document.getElementById("tokenCount");
const pctEl = document.getElementById("pct");
const total = RESPONSE.length;
let pos = 0;
let running = false;
let rafId = null;
let acc = 0;
let last = 0;
let speed = 1; // multiplier
const BASE_CPS = 90; // characters per second at 1x
const prefersReduced =
window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function setStatus(state, text) {
statusPill.dataset.state = state;
statusText.textContent = text;
}
function render() {
let slice = RESPONSE.slice(0, pos);
// Balance an open code fence so an in-progress block still shows as text
const fenceCount = (slice.match(/```/g) || []).length;
if (fenceCount % 2 === 1) slice += "\n```";
let html = parse(slice);
if (running) html += '<span class="caret" aria-hidden="true"></span>';
output.innerHTML = html;
// stats
const approxTokens = Math.round(pos / 4);
tokenCount.textContent = approxTokens;
pctEl.textContent = Math.round((pos / total) * 100);
// autoscroll to bottom while streaming
if (running) output.scrollTop = output.scrollHeight;
}
function tick(now) {
if (!running) return;
if (!last) last = now;
const dt = (now - last) / 1000;
last = now;
acc += dt * BASE_CPS * speed;
if (acc >= 1) {
const step = Math.floor(acc);
pos = Math.min(total, pos + step);
acc -= step;
render();
}
if (pos >= total) {
finish();
return;
}
rafId = requestAnimationFrame(tick);
}
function start() {
if (running) return;
if (pos >= total) pos = 0; // restart if finished
if (pos === 0) emptyState.remove?.();
running = true;
output.setAttribute("aria-busy", "true");
last = 0;
acc = 0;
setStatus("streaming", "Streaming");
startBtn.disabled = true;
stopBtn.disabled = false;
startLabel.textContent = "Start";
render();
if (prefersReduced) {
// Reveal everything at once for reduced-motion users.
pos = total;
finish();
return;
}
rafId = requestAnimationFrame(tick);
}
function stop() {
if (!running) return;
running = false;
cancelAnimationFrame(rafId);
output.setAttribute("aria-busy", "false");
setStatus("paused", "Paused");
startBtn.disabled = false;
stopBtn.disabled = true;
startLabel.textContent = "Resume";
render();
}
function finish() {
running = false;
cancelAnimationFrame(rafId);
pos = total;
output.setAttribute("aria-busy", "false");
setStatus("done", "Done");
startBtn.disabled = false;
stopBtn.disabled = true;
startLabel.textContent = "Start";
render();
}
function replay() {
cancelAnimationFrame(rafId);
running = false;
pos = 0;
acc = 0;
last = 0;
setStatus("idle", "Idle");
stopBtn.disabled = true;
startLabel.textContent = "Start";
start();
}
/* ---------------------------------------------------------------
* Clipboard (with graceful fallback)
* ------------------------------------------------------------- */
async function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
try {
await navigator.clipboard.writeText(text);
return true;
} catch (_) { /* fall through */ }
}
try {
const ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
const ok = document.execCommand("copy");
document.body.removeChild(ta);
return ok;
} catch (_) {
return false;
}
}
/* ---------------------------------------------------------------
* Events
* ------------------------------------------------------------- */
startBtn.addEventListener("click", start);
stopBtn.addEventListener("click", stop);
replayBtn.addEventListener("click", replay);
speedSeg.addEventListener("click", (e) => {
const btn = e.target.closest(".seg__btn");
if (!btn) return;
speed = parseFloat(btn.dataset.speed);
speedSeg.querySelectorAll(".seg__btn").forEach((b) => {
const active = b === btn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-pressed", String(active));
});
});
// Copy buttons are delegated from #output (re-rendered every tick).
output.addEventListener("click", async (e) => {
const btn = e.target.closest(".copy");
if (!btn) return;
const codeEl = document.getElementById(btn.dataset.codeId);
if (!codeEl) return;
const raw = decodeURIComponent(codeEl.dataset.raw || "");
const ok = await copyText(raw);
const txt = btn.querySelector(".copy__txt");
if (ok) {
btn.classList.add("is-copied");
if (txt) txt.textContent = "Copied";
setTimeout(() => {
btn.classList.remove("is-copied");
if (txt) txt.textContent = "Copy";
}, 1400);
}
});
// idle to start
setStatus("idle", "Idle");
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Streaming Markdown</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="app" aria-label="Streaming markdown renderer">
<header class="app__head">
<div class="brand">
<span class="brand__dot" aria-hidden="true"></span>
<div>
<h1 class="brand__title">Streaming Markdown</h1>
<p class="brand__sub">Token-by-token rendering with a live parser</p>
</div>
</div>
<div class="status" role="status" aria-live="polite">
<span class="status__pill" data-state="idle" id="statusPill">
<span class="status__glow" aria-hidden="true"></span>
<span id="statusText">Idle</span>
</span>
</div>
</header>
<section class="stream" aria-label="Rendered markdown output">
<div class="stream__bar">
<div class="stream__meta">
<span class="avatar" aria-hidden="true">AI</span>
<span class="stream__label">assistant</span>
</div>
<div class="stream__stats">
<span class="stat"><span id="tokenCount">0</span> tokens</span>
<span class="stat stat--pct"><span id="pct">0</span>%</span>
</div>
</div>
<article class="md" id="output" aria-live="polite" aria-busy="false">
<div class="md__empty" id="emptyState">
<p>Press <strong>Start</strong> to stream a markdown response.</p>
</div>
</article>
</section>
<footer class="controls" aria-label="Playback controls">
<div class="controls__group">
<button class="btn btn--primary" id="startBtn" type="button">
<svg viewBox="0 0 24 24" aria-hidden="true" class="ico"><path d="M8 5v14l11-7z"/></svg>
<span id="startLabel">Start</span>
</button>
<button class="btn" id="stopBtn" type="button" disabled>
<svg viewBox="0 0 24 24" aria-hidden="true" class="ico"><path d="M6 6h12v12H6z"/></svg>
<span>Stop</span>
</button>
<button class="btn" id="replayBtn" type="button">
<svg viewBox="0 0 24 24" aria-hidden="true" class="ico"><path d="M12 5V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z"/></svg>
<span>Replay</span>
</button>
</div>
<div class="controls__group controls__group--speed" role="group" aria-label="Stream speed">
<span class="speed__label">Speed</span>
<div class="seg" id="speed">
<button class="seg__btn" type="button" data-speed="0.5">Slow</button>
<button class="seg__btn is-active" type="button" data-speed="1" aria-pressed="true">Normal</button>
<button class="seg__btn" type="button" data-speed="2.4">Turbo</button>
</div>
</div>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>Streaming Markdown recreates the feel of an LLM answer landing in a chat window: text arrives a few characters at a time behind a soft blinking caret, and a small self-contained markdown parser re-renders the buffer on every tick so headings, bold spans, ordered and unordered lists, blockquotes, tables, inline code, and fenced code blocks snap into their formatted shape the moment their syntax closes. Nothing is pre-rendered — you watch structure crystallize out of a raw token stream exactly like a real completion.
The toolbar drives the whole experience. Start begins the stream, Stop pauses it mid-flight, and Replay clears the canvas and runs it again from the first token. A speed control switches between slow, normal, and turbo cadences, and a live token counter plus a status pill tell you whether the model is idle, streaming, or done. Every fenced code block renders with a language label and a Copy button that writes to the clipboard and flips to a confirmation state.
Under the hood the reveal loop is driven by requestAnimationFrame with an accumulator so the cadence stays smooth and frame-rate independent, while navigator.clipboard.writeText powers the copy buttons with a graceful execCommand fallback for older or insecure contexts. The parser is a compact hand-written tokenizer — no libraries, no build step — so the entire component is drop-in and dependency-free.