Aeven-AI/HyperMarkdown: Ridiculously fast Markdown for React and AI. Streaming-native renderer that caches settled code lines, table rows, and list items so growing LLM output does not re-parse finished work.

Ridiculously fast Markdown for React and AI. Streaming-native renderer that caches settled code lines, table rows, and list items so growing LLM output does not re-parse finished work. - Aeven-AI/H...

Summary

HyperMarkdown is a streaming-native React Markdown renderer written in TypeScript. It targets LLM output specifically, caching settled code lines, table rows, and list items so growing responses do not re-parse finished work. It supports CommonMark, GFM, KaTeX math, Mermaid, syntax highlighting, raw HTML with sanitization, and SSR for Next.js.

What it is useful for

Rendering long AI responses where chunks arrive continuously and the document keeps growing. The common pattern of accumulating a Markdown string in React state and reparsing it on every token becomes expensive on long code blocks, dense tables, and reasoning traces — shapes that show up in real model output. HyperMarkdown's sub-block cache keeps completed work cached, so only the active frontier reparses.

It is also useful when you need to render untrusted model output safely. Raw HTML defaults to a sanitized mode, with explicit html="raw" or html="literal" opt-ins. Reasoning tags like <think>, <thinking>, or <reasoning> collapse into a collapsible block once the closing tag arrives. Optional plugins cover math, syntax highlighting, Mermaid, and CJK-friendly emphasis, and each missing plugin degrades gracefully (for example, without the math plugin, $x$ stays literal).

For finished Markdown such as previews, server-rendered content, or stored messages, the md prop works as a straightforward component.

How engineers can use it

Install with npm install @aeven-ai/hypermarkdown (React 18 or 19 is a peer dep), then import the stylesheet once at the app entry:

import "@aeven-ai/hypermarkdown/styles.css";
import { HyperMarkdown, type HyperMarkdownHandle } from "@aeven-ai/hypermarkdown";

For streaming, mount one component per active response and use a ref handle:

const renderer = useRef<HyperMarkdownHandle>(null);

async function generate(prompt: string) {
  renderer.current?.reset();
  for await (const delta of createResponseStream(prompt)) {
    renderer.current?.write(delta);
  }
  renderer.current?.write("", true); // finalize
}

return <HyperMarkdown ref={renderer} streaming />;

write() appends — pass only the new fragment, not the accumulated text, and call write("", true) once at end of stream to flush open blocks. Call reset() before reusing the same mounted instance for a new response. For providers that emit cumulative snapshots instead of deltas, the README documents a snapshot-to-delta converter.

Migration from react-markdown is a prop swap (<HyperMarkdown md={markdown} />) for finished content, plus replacing the per-token setState loop with the imperative handle for streaming. The README notes that HyperMarkdown does not accept arbitrary remarkPlugins or rehypePlugins through the component API; if you depend on a custom AST transform, verify it before replacing your current renderer. The legacy MarkdownStream export is still available but deprecated.

For Next.js App Router, import the stylesheet in the root layout and pass md={markdown} from a Server Component; the imperative streaming handle belongs in a Client Component. dynamic(..., { ssr: false }) is not normally required.