Skip to content

Repository files navigation

Tailmark

Tailmark is a streaming Markdown renderer for React with a proven incremental open-tail pipeline. On the default LF append-only path, both Markdown repair and lexing do O(open tail) work after a safe boundary instead of rescanning the settled document. CI enforces streaming equivalence at every prefix and render-once identity for settled blocks.

On the replayed long-prose, per-token fixture, the final one-run trace kept Tailmark preprocessing effectively flat in a 0.03 to 0.17 ms band while Streamdown 2.5.0 grew linearly from 0.09 to 1.66 ms. The final interleaved comparison also recorded about 20% less cumulative scripting for Tailmark. These are single-run observations from this repository's fixtures and configuration, not stable distributions or universal performance claims. See the full methodology and caveats.

Tailmark was extracted from Traycer's production chat renderer.

Quickstart

bun add @tailmark/react react react-markdown
import { StreamingMarkdown, useCoalescedValue } from "@tailmark/react";
import "@tailmark/react/styles.css";

export function Answer({ content, pending }: { content: string; pending: boolean }) {
  const markdown = useCoalescedValue(content);
  return (
    <StreamingMarkdown isStreaming={pending} reveal caret>
      {markdown}
    </StreamingMarkdown>
  );
}

The stylesheet is optional. Without the import, Tailmark renders semantic, data-attributed markup for your own design system.

Packages

Package Purpose
@tailmark/core React-free repair and incremental block lexing
@tailmark/react React renderer, streaming polish, code chrome, and batching hook
@tailmark/shiki Lazy, dual-theme Shiki integration with an MRU cache

Benchmarks

The public benchmark methodology documents deterministic fixture replay, fairness rules, CI-gated structural counts, real Chrome traces, bundle measurement, raw scope, and known limitations.

Run the deterministic count layer and compare it with the committed CI baseline:

bun run bench:counts

Reproduce the production browser trace in one command after bun install:

BENCH_RUNS=3 bun run bench:trace

Examples

Streaming demo

The simple integration example replays a growing response with tables, tasks, TypeScript, rAF coalescing, reveal, caret, and Shiki highlighting.

bun run --cwd examples/streaming-demo dev

Live demo: tailmark-streaming-demo.vercel.app

Tailmark streaming demo mid-stream with a live caret and highlighted TypeScript

Benchmark race

The side-by-side race replays the benchmark fixtures through Tailmark and Streamdown 2.5.0 with live React HUDs. Its diagnostic overlay uses identical instrumentation for both lanes, stays off by default, and clearly marks its own measurement overhead.

bun run --cwd examples/bench-race dev

Live demo: tailmark-bench-race.vercel.app

Tailmark and Streamdown benchmark race with live HUDs

CI-enforced guarantees

License

MIT. See LICENSE.

About

Incremental streaming Markdown renderer for React. O(open tail) repair and lexing, CI-enforced render-once and streaming-equivalence invariants.

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages