@ai-markdown/react

Documentation · Examples · Website

Render accumulated Markdown in React, including streaming responses, GFM, math and CJK text. Customize element renderers, typography and metadata, or use Mantine for highlighted code and Mermaid diagrams. Vue applications use @ai-markdown/vue.

Compatibility

• React and React DOM ^19.0.0.
• Node ^20.19.0 || >=22.12.0 for server/build consumers.
• ESM and CJS with TypeScript declarations. Core and engine are exact-version dependencies; applications do not install them separately.
• KaTeX is an optional peer. Install it directly when importing its stylesheet for math.
• <AIMarkdownDocuments> uses WeakRef and FinalizationRegistry (ES2021) when the runtime provides them, so a per-document scope resolved by a render that never commits can be garbage collected. On a runtime without them the wrapper keeps strong references instead: scopes are still released when their last chunk unmounts, but a scope resolved only by an abandoned render stays cached until a chunk registers into it and later releases it.

Installation

pnpm add @ai-markdown/react react@^19 react-dom@^19 katex

Quick Start

import AIMarkdown from '@ai-markdown/react';
import '@ai-markdown/react/typography/default.css';
import 'katex/dist/katex.min.css';

export function Answer() {
  return <AIMarkdown content="Hello **world**! Math: $E = mc^2$" />;
}

Pass the complete current string as content, appending decoded transport text to your application state. streaming describes producer state; incremental parsing is enabled separately by default. In a React Server Components application, use a client boundary and import global CSS from the location permitted by your host framework.

Code fences remain code text in this adapter. Syntax highlighting and Mermaid rendering require Mantine or your own component. React-specific CSS tokens and hooks are not Vue APIs.

Documentation

• Installation and API reference: props, hooks, providers, public exports and compatibility details.
• Streaming chat and smooth streaming.
• Documents and references.
• Custom components and CSS tokens.
• Package migration from the former @ai-react-markdown scope.

The independent site owns the detailed API and guides. This README provides the package's minimal installation and usage path.

License

MIT