HighlightStream preview

Basic

<script>
  import { HighlightStream } from "svelte-highlight";
  import javascript from "svelte-highlight/languages/javascript";
  import github from "svelte-highlight/styles/github";

  let code = "";
  let done = false;

  // Wire this up to your streaming source (fetch, WebSocket, SSE, ...).
  async function stream() {
    for (const chunk of chunks) {
      code += chunk;
      await new Promise((r) => setTimeout(r, 30));
    }
    done = true;
  }
</script>

<svelte:head>
  {@html github}
</svelte:head>

<HighlightStream language={javascript} {code} {done} />

Chunk-by-chunk stepper

Click through each chunk to watch it arrive mid-keyword and mid-template-literal. Once every chunk lands, the output below is compared byte-for-byte against a plain Highlight of the same finished code.

"con""st gr""eet = () => `Hel""lo, world!""`;"

Re-tokenizing a multi-line construct

The template literal opened on line 0 is still unterminated—line 1 renders fully inside the string span. Closing it re-tokenizes line 1 in place: the string span now ends before the semicolon, with no special-casing in the component.

const s = `line one
line two

Speed & auto-scroll controls

Chunk interval (ms, applied on next replay)

Auto-scroll

Announce completion (doneText, screen readers only)

Status: streaming…

Auto-scroll in a fixed-height window

A tall, fast-streaming log pinned to a short window. Scroll up mid-stream to detach—output keeps arriving below the fold until you scroll back to the bottom.

build.log

Auto-scroll

Custom caret

--caret-width, --caret-color, and --caret-blink reuse the same contract as Typewriter.

Virtualized (windowed) streaming

1,500 lines stream in fast; only the scrolled window is ever in the DOM.

Auto-scroll

Jump to line (of 1,500)

Status: streaming…

lines 0–0 of 0 rendered