markstream-react

React/Next.js streaming Markdown renderer for AI chat, SSE/WebSocket output, long responses, Mermaid, KaTeX, and code blocks.

markstream-react

React

React/Next.js streaming Markdown renderer for AI chat, SSE/WebSocket output, long responses, Mermaid, KaTeX, and code blocks.

npm GitHub Docs

Fit

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Rendering an AI response while Markdown is still arriving is different from rendering a completed document. A closing fence, table row, or emphasis marker may not have arrived yet, so a normal static Markdown pipeline can flicker, repeatedly rebuild large subtrees, or show broken intermediate output.

What It Does

markstream-react is the React renderer in the Markstream family. It accepts the accumulated Markdown string and updates the output as tokens arrive, then switches to final rendering when the response is complete. It supports React and Next.js, with optional Mermaid, KaTeX, Shiki, Monaco, and other enhanced code-block features.

Installation

bash

npm install markstream-react

Usage Example

tsx

import MarkdownRender from 'markstream-react'
import { useState } from 'react'
import 'markstream-react/index.css'

export function ChatMessage({ content, isDone }: {
  content: string
  isDone: boolean
}) {
  return <MarkdownRender content={content} final={isDone} fade={false} />
}

export function StreamingMessage() {
  const [content, setContent] = useState('')
  const [isDone, setIsDone] = useState(false)

  // Append each SSE/WebSocket delta to `content`, then set `isDone` on [DONE].
  return <ChatMessage content={content} isDone={isDone} />
}

Caveats

This package is intentionally specialized for progressively rendered Markdown. For short, static Markdown or the smallest possible parser bundle, react-markdown, marked, or markdown-it may be a better choice. Mermaid, KaTeX, Shiki, and Monaco support is optional and requires installing the corresponding peer packages.

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.