Pro tip
Streaming callouts render mid-stream.
`::: tip`-style container blocks (`info`/`note`/`warning`/`danger`/`caution`/`error`) render as titled callout boxes with icons.
Component gallery
Every card below is a live render produced by markstream-vue — what you see is what your users get. Filter by category, search by name or keyword, then click a card for the component page with copyable markdown, override notes, and related components.
Markdown keeps prose honest, even while it streams.
`>` blockquote lines render as a styled `<blockquote>` that hosts nested block and inline children.
Parse incomplete markdown
Render the Mermaid diagram
GFM task-list items (`- [x]` / `- [ ]`) render as SVG check/checkbox icons inside list items.
DefinitionListNode
opt-in
Markdown
: A text format that streams well.PHP-Extra `Term` + `: definition` lists (dl tokens from a consumer-registered deflist plugin) render as term/definition structures.
Backlinks matter[1].
The anchor arrow jumps back to the reference. ↩︎
The backlink arrow inside each rendered footnote definition jumps back to its in-text `[^n]` reference.
Backlinks matter[1].
The anchor arrow jumps back to the reference. ↩︎
`[^1]: text` footnote definitions render as an anchored footnote block at the end of the document.
Backlinks matter[1].
The anchor arrow jumps back to the reference. ↩︎
Inline `[^1]` footnote markers render as clickable `<sup>` links that scroll to the footnote definition.
First line
Second line
A trailing backslash (or two trailing spaces) at the end of a line renders a hard line break `<br>`.
Streaming headings stay stable
`#` to `######` ATX headings render as `<h1>`-`<h6>` elements with inline children.
First item with bold
Second item
Each list entry renders as an `<li>` whose layout stays stable while items stream in.
Incremental parsing
Stable DOM reuse
`-`/`*` bullet lists and `1.` ordered lists render as `<ul>`/`<ol>` with start-number support.
A paragraph hosts inline nodes and code spans.
Plain text blocks render as `<p dir="auto">` paragraphs hosting inline children.
Grounded answers cite sources 42.
Inline `[42]` numeric markers render as clickable reference chips that emit click events.
| Feature | Status |
|---|---|
| Streaming | stable |
| Mermaid | lazy |
GFM pipe tables render as an overflow-safe `<table>` wrapper with aligned columns.
Intro paragraph
Closing paragraph
`---`, `***`, or `___` on their own line render as an `<hr>` thematic break.
CodeBlockNode
stream-diffs
TypeScript
Fenced ```lang blocks render as stream-diffs powered code surfaces with header, copy button, and diff modes.
Install with pnpm add markstream-vue.
Backtick `` `code` `` spans render as styled `<code>` chips.
PreCodeNode
opt-in
Plain Text
Plain `<pre><code>` rendering selected by the `render-code-blocks-as-pre` renderer prop; also the fallback surface for code and diagram blocks.
D2BlockNode
@terrastruct/d2
Fenced ```d2 blocks compile through the D2 runtime into SVG diagrams with progressive rendering.
InfographicBlockNode
opt-in@antv/infographic
Fenced ```infographic blocks render AntV Infographic charts once `setInfographicLoader` is configured.
MathBlockNode
katex
`$$...$$` (or `\[...\]`) display math renders as KaTeX block HTML.
MathInlineNode
katex
Inline `$...$` (or `\(...\)`) math renders as KaTeX inline HTML.
MermaidBlockNode
mermaid
Fenced ```mermaid blocks render as interactive SVG diagrams with streaming preview, zoom, and export.
Why streaming?
Partial input stays renderable.
Block-level HTML such as `<div>` or `<details>` renders as sanitized, streaming-stable DOM.
Press Ctrl plus K.
Inline HTML tags such as `<u>`, `<kbd>`, `<mark>` render as sanitized inline elements.
`` images render as `<img>` elements with loading state and viewport-deferred fetching.
`[text](url)` renders as an `<a>` with underline animation and an optional hover tooltip.
Custom containers wrap any block.
`:::name` custom containers (any name outside the admonition set) render as `vmr-container-{name}` wrappers for custom blocks.
EmojiNode
opt-in
Shipped! 🎉
`:tada:` shortcodes (with a consumer-registered markdown-it-emoji plugin) render as native emoji characters.
Streams render emphasis instantly.
`*text*` or `_text_` renders as `<em>` italics.
This is the key phrase.
`==text==` renders as a `<mark>` highlight.
v2 adds insert markup for additions.
`++text++` renders as underlined `<ins>` insertions.
Streaming Progressive rendering.
GFM `~~text~~` renders as `<del>` strikethrough.
Strong claims need evidence.
`**text**` or `__text__` renders as `<strong>` bold.
Water is H2O.
`~text~` renders as `<sub>`, with guards that refuse accidental CJK numeric-range tildes.
The area grows as x2.
`^text^` renders as `<sup>` superscript.
Plain text runs are the leaves of every inline tree.
Plain text runs render as `<span>` elements; the leaf of every inline tree.
Virtualized timeline component for long mixed chat transcripts (plain text + markdown rows) with stick-to-bottom scrolling and restore states.
Internal building block that renders a single AST node through an explicit component map; powers nested and custom node rendering inside the built-in components (not exported for direct import).
The core renderer behind MarkdownRender: maps parsed AST nodes to components with streaming reuse, batching, and optional virtualization.
Internal fast-path renderer for arrays of simple inline nodes (text, emphasis, links, and friends) without mounting the full block renderer; used by the built-in components.
Floating-UI tooltip surface shared by LinkNode and diagram nodes; also exported as an async component for custom UIs.
Using a component
- Copy the markdown input from a component page.
- Render it with
MarkdownRender:
vue
<script setup>
import { MarkdownRender } from 'markstream-vue'
import 'markstream-vue/index.css'
</script>
<template>
<MarkdownRender :content="markdown" />
</template>- Components marked with a peer badge need their optional peer dependency installed first — see Installation & Optional Peers.
- Want a different look? Almost every node can be replaced safely — see Override Built-in Components.
Streaming by default
These previews render exactly the same while content streams in token by token. Unclosed syntax stays stable instead of flickering — that is the core of Markstream.