Streaming Code

Preview in your theme

live stream — scroll up inside the panel to break the follow, then take the pill back to the end; Copy takes a snapshot of exactly what has arrived

status=streaming · 0 chars received

tslib/write-file.ts1 line

status="streaming" — caret on the last line, that line tinted, docstring carried across lines

pythonrank.py8 lines

1"""Rank candidates by cosine similarity."""
2
3import numpy as np
4
5def rank(query, docs):
6    scores = np.dot(docs, query)
7    order = np.argsort(-scores)
8    return [docs[i] for i in order[:5

status="complete" — no caret, no active line, announced once

jsonrequest.json6 lines

1{
2  "model": "sonnet-4.6",
3  "temperature": 0.2,
4  "max_tokens": 4096,
5  "stream": true
6}

status="interrupted" — every character received is kept, the file is flagged

bashdeploy.sh7 lines

1#!/usr/bin/env bash
2set -euo pipefail
3
4BUCKET="$1"
5for file in dist/*.js; do
6  echo "uploading $file"
7  aws s3 cp "$file" "s3://$BUC

Stopped — file incomplete

fence in the stream — the markup is stripped and its info string becomes the language

tsx3 lines

1export function Badge({ label }: { label: string }) {
2  return <span className="rounded-full border px-2">{label}</span>
3}

wrap={false}, no gutter — long lines scroll sideways inside the panel instead of folding

ts5 lines

type Handler = (req: Request, ctx: { params: Record<string, string>; signal: AbortSignal }) => Promise<Response>
const routes: Record<string, Handler> = {
  "/api/generate": generate,
}

caret={false}, autoScroll={false} — still tints the line being written, no caret, no pinning

csstheme.css6 lines

1/* generated from the design tokens
2   the block comment is carried across lines */
3.panel {
4  border-radius: 0.625rem;
5  background: var(--card);
6  padding: 1rem 1.25rem

Loading preview…

"use client"

import * as React from "react"
import { ArrowDown, Check, Copy, WrapText } from "lucide-react"
import { cn } from "@/lib/utils"

/* -------------------------------------------------------------------------- *
 * Caret
 *
 * Keyframes ship with the component through a React 19 hoisted <style> — no
 * Tailwind config edit, and duplicate instances dedupe by href.
 *
 * The caret is an EMPTY inline <span> painted with a right border, never an
 * inline-block. An atomic inline is a UAX#14 class CB, so with wrapping on the

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/streaming-code.json

Prompt

The prompt behind this component — paste it into your AI assistant to recreate or adapt it.

Build a React + TypeScript + Tailwind "StreamingCode" component: a code panel
whose content is still being written. No Shiki / Prism / highlight.js and no
dangerouslySetInnerHTML — ship a small regex tokenizer so the incremental
strategy can be built into it.

Contract
- forwardRef<HTMLDivElement>, extends React.HTMLAttributes<HTMLDivElement>
  minus children and onCopy.
- code: string — everything received so far; the caller appends to it.
- language?: string — "ts" | "tsx" | "js" | "jsx" | "python" | "json" | "bash"
  | "css" plus aliases (typescript, py, sh, shell, zsh, scss). Unknown values
  render as plain text, never as an error.
- status?: "streaming" | "complete" | "interrupted" (default "streaming").
- filename?: string, showLineNumbers = true, maxHeight: number | string =
  "20rem", wrap = true, caret = true, autoScroll = true, copyable = true,
  detectFence = true.
- followLabel = "Resume follow", endLabel = "Jump to end",
  incompleteLabel = "Stopped — file incomplete".
- onCopy?: (code: string) => void — fires with the exact snapshot written to
  the clipboard.

Behavior — tokenizing an append-only file
- scanLine(line, config, state, collect) cuts ONE line into { text, type }
  tokens where type is keyword | type | string | number | function | comment |
  punct | plain. Re-joining every token.text must reproduce the line exactly:
  that invariant is what makes "what is copied is what was received" true.
- The scanner is line-based but NOT line-independent. It takes the state the
  previous line left open — "code" | "block-comment" | "template" |
  "doc-double" | "doc-single" — and returns the state it leaves open, so a
  /* … */ block, a backtick template literal or a Python triple-quoted string
  opened forty lines ago still colours the new line correctly.
- Two passes, one scanner. collect=false skips every branch that cannot change
  the state (identifiers, numbers, punctuation) and is run over the whole file
  each chunk to chain the states; collect=true builds tokens and runs only
  inside the memoised line that actually changed.
- Render one <CodeLine> per line, React.memo'd, taking ONLY primitive props
  (text, entering state, languageKey, lineNumber, gutter, wrap, active, caret)
  and tokenising internally with useMemo. Under append-only growth every line
  but the last has byte-identical props, so the shallow compare freezes it: no
  re-tokenise, no re-render, and its DOM text nodes — with any selection inside
  them — survive to the end of the stream.
- Half-written syntax must look written: a quote with no closer on its line is
  tinted as a string to the end of the line (a plain quote cannot span lines,
  so the state stays "code"), an unterminated /* opens a comment that keeps
  running, an unterminated backtick opens a template.
- Keyword lookup wins over the "followed by ( → function" heuristic, otherwise
  if / for / while / switch / catch / return get painted as calls.
- JSON only: a string followed by ":" is a property key, tinted as a type.
- Shell only: $VAR / ${VAR} / $1 is one identifier token.

Behavior — fence adoption
- detectFence strips the Markdown fence a model wraps code in and adopts its
  info string as the language: the writer just told you what it is, so the
  fence wins over the `language` prop.
- The info string is only final once the opening line's newline lands —
  "```ts" can still become "```tsx" — so render nothing until then instead of
  flipping the highlighter twice.
- A lone ` or `` at the very end is a closer that has not finished arriving:
  hide it, or the last line flickers. Everything after a complete closing
  fence is prose about the code, not code — drop it.

Behavior — follow, detach, resume
- Keep the viewport pinned to the bottom while code arrives. Scroll instantly,
  never smoothly: a smooth scroll retargeted every chunk never arrives and
  fights the reader's own wheel.
- On scroll, measure scrollHeight - scrollTop - clientHeight and treat <= 24px
  as pinned. Appending content does NOT fire a scroll event, so this is only
  ever measured after a real scroll — the reader's or the component's own.
- Scrolling up detaches: auto-scroll stops immediately and a pill appears over
  the bottom of the viewport ("Resume follow" while streaming, "Jump to end"
  once settled) carrying "+n", the number of lines written since the reader
  broke away. Scrolling back to the bottom re-pins on its own, no click needed.
- Auto-scroll follows GROWTH, not renders: compare the received length with the
  previous one and skip when it did not grow, so mounting a finished file opens
  it at line 1 instead of yanking the reader to the end.

Behavior — copy, status, cleanup
- Copy snapshots the received text synchronously BEFORE awaiting the clipboard,
  so the reader gets exactly what was on screen when they clicked, not the few
  hundred characters that landed during the await. While streaming the button's
  accessible name says so ("Copy the code received so far").
- navigator.clipboard with a hidden-textarea + execCommand fallback; a failed
  copy renders a visible destructive line ("select the code manually"), never a
  silent no-op. The 2s "copied" reset timer is cleared on unmount.
- status="interrupted" keeps every character received, drops the caret and adds
  one muted line under the panel; nothing is ever cleared, because a stopped
  file is still the only file the user has.
- The wrap toggle is real state with aria-pressed; `wrap` is only its initial
  value.

Rendering & styling
- Semantic tokens only: bg-card, bg-muted/40, bg-muted, border, text-foreground,
  text-muted-foreground, bg-primary/5 for the active line, bg-primary +
  text-primary-foreground for the "+n" pill, text-destructive + bg-destructive/10
  for the copy error, ring for focus. No hex, no rgb(), no oklch().
- Token colours are the five chart tokens — keyword var(--chart-1), string
  var(--chart-2), number var(--chart-3), type var(--chart-4), function
  var(--chart-5) — with comments on text-muted-foreground italic and
  punctuation muted. Hue carries the token type; those five are the only ramp
  guaranteed to clear 3:1 against a card in both schemes.
- Real <pre><code> around flex rows: the semantic pair means copy/paste keeps
  the line breaks and assistive tech announces it as code, while the rows still
  host a gutter and the active-line tint. Rows get min-h-6 so an empty line
  keeps its height and can hold the caret.
- The caret is an EMPTY inline <span> with border-r-2 border-current, never an
  inline-block: an atomic inline is a UAX#14 CB, so with wrapping on the line
  breaker may drop the caret onto a line of its own. Its keyframes ship in a
  React 19 hoisted <style href precedence> and the blink is
  motion-reduce:[animation:none] — solid, visible, still correct.
- Accessibility: the code carries aria-busy while arriving and NO live region;
  a separate sr-only role="status" region stays silent during the stream and
  speaks once when it settles ("34 lines of tsx generated" / the interrupted
  label). The viewport is tabbable with role="group" and an aria-label, so a
  keyboard user can scroll it and every control has a focus-visible ring.

Customization levers
- TOKEN_CLASS is one map: repoint it at your own editor palette, or collapse
  the five hues to two (keyword + string) for a quieter panel.
- Language table: each entry is { keywords, types, lineComment?, blockComment?,
  template?, triple?, dollarVars?, keyStrings? } — adding Go, Rust or SQL is
  one object, not a new code path.
- Density: text-[13px] / leading-6 / min-h-6 on the row and w-12 on the gutter
  are the only spacing knobs; maxHeight sets how much of the file is on screen
  ("none" removes the internal scroller, which also removes the follow pill).
- Pin slop (24px): raise it if your rows are tall, lower it for a stricter
  "only truly at the bottom counts as following".
- Chrome: drop the wrap toggle, the line counter or the language badge from the
  header independently; set copyable={false} for a read-only panel, caret={false}
  when a sibling already owns the "generating" affordance, autoScroll={false}
  for a panel the reader alone controls.
- Fence policy: detectFence={false} when the caller already extracts the code
  block and the `language` prop is authoritative.

Concepts

Carried scan state — each line is tokenized with the state the line above left open (block comment, template literal, docstring), so a construct opened forty lines earlier keeps colouring new lines without anything above being touched.
Frozen lines — every line component takes only primitive props, so under append-only growth React's shallow compare skips all but the last one: finished lines are never re-tokenized, never re-rendered, and any text selection inside them survives the whole stream.
Follow and detach — the viewport sticks to the bottom until the reader scrolls up, which hands control over immediately; a pill counts the lines written behind their back and hands it back, and scrolling to the bottom re-pins with no click at all.
Growth-gated auto-scroll — the jump to the bottom is triggered by the received text getting longer, not by a render, so mounting an already-finished file opens it at line 1 instead of yanking the reader to the end.
Fence adoption — the triple-backtick fence a model wraps code in is markup, not line 1 of the file: it is stripped, and its info string becomes the language because the writer just declared it — but only once the opening line is complete, since "ts" can still become "tsx".
Copy snapshot — the clipboard write captures the received text synchronously before awaiting, so a partial copy is exactly the prefix that was on screen at click time, never a longer one that arrived during the await.

Installation

Prompt

Concepts

On This Page