Introduction
HyperMarkdown is a streaming-native Markdown renderer for React applications and AI interfaces. It renders finished documents, but its architecture is designed around the harder case: a response that changes every few milliseconds and is often syntactically incomplete.
Choose your path
Render articles, saved messages, previews, and other finished content with the md prop.
Mount one renderer, append each new fragment with write(), and finalize the response once.
Server-render finished Markdown, place plugins in the client graph, and hydrate without disabling SSR.
Next.js and SSR →The core idea
Most renderers receive one growing string. Each token changes that string, so the active document is parsed and reconciled again—even when nearly all of it is already finished. HyperMarkdown takes a different input: the change.
new delta
↓
active block
├── settled code lines → cached
├── settled table rows → cached
├── settled list items → cached
└── changing frontier → parsed
Completed work stays completed. A thousand-line code block does not become a thousand-line parsing problem every time another fragment arrives.
Two rendering modes
Use finished mode when the complete Markdown already exists:
import "@aeven-ai/hypermarkdown/styles.css";
import { HyperMarkdown } from "@aeven-ai/hypermarkdown";
<HyperMarkdown md={markdown} />
Use streaming mode while an answer is arriving:
<HyperMarkdown ref={renderer} streaming />
Write each new fragment to the mounted renderer. HyperMarkdown owns the active buffer and exposes stable React output through its internal store.
write() accepts deltas, not the complete accumulated response. Call
write("", true) once when the stream ends so the final open block can settle.
What is included
| Capability | Support |
|---|---|
| Markdown | CommonMark, GFM tables, task lists, autolinks, strikethrough, and footnotes |
| Streaming | Incomplete syntax handling and caches for code lines, table rows, and list items |
| AI output | Collapsible <think>, <thinking>, and <reasoning> blocks |
| Safety | Sanitized raw HTML and configurable link safety controls |
| Optional plugins | highlight.js, KaTeX, Mermaid, and CJK-friendly emphasis |
| React | React 18 and 19, server rendering, hydration, and Next.js |
Heavy features are optional. A project that never renders a Mermaid diagram never downloads Mermaid.
Documentation map
| If you want to… | Read |
|---|---|
| Install the package and styles | Installation |
| Render complete Markdown | Finished Markdown |
| Connect a model or transport | Streaming and delta rendering |
| Control an active renderer | Imperative handle |
| Use the App Router or Pages Router | Next.js and SSR |
| Enable code, math, diagrams, or CJK | Plugins |
| Understand partial syntax while streaming | Incomplete Markdown |
| Configure code and table toolbars | Block controls |
| Restrict external links and images | Link safety |
| Theme the output | Styling |
| Compare performance fairly | Benchmarks |
| Move from another renderer | Migration guides |