react-markstream

React streaming Markdown renderer for AI-chat style output.

This package is a React fork/rewrite inspired by Simon-He95/markstream-vue.

Install

npm install react-markstream

Usage

Import the renderer and stylesheet:

import { MarkdownRenderer } from 'react-markstream'
import 'react-markstream/styles.css'

Render an accumulated Markdown string while your stream is still arriving:

import React from 'react'
import { MarkdownRenderer } from 'react-markstream'
import 'react-markstream/styles.css'

export function Message({ content, isDone }) {
  return (
    <MarkdownRenderer
      content={content}
      final={isDone}
      htmlPolicy="trusted"
    />
  )
}

final={false} keeps incomplete fences, math blocks, and thinking blocks renderable while content is still streaming.

Stream Simulator

The package also exports a small stream simulator hook for demos:

import { MarkdownRenderer, useStreamSimulator } from 'react-markstream'

export function Demo({ markdown }) {
  const stream = useStreamSimulator(markdown, {
    boundaryAware: true,
    chunkMin: 2,
    chunkMax: 7,
    delayMin: 14,
    delayMax: 34,
  })

  React.useEffect(() => {
    stream.start()
    return stream.pause
  }, [])

  return <MarkdownRenderer content={stream.content} final={stream.isDone} />
}

Features

• streaming Markdown recovery for unfinished content
• safe HTML sanitization with DOMPurify
• code blocks with highlight.js and copy controls
• Mermaid diagrams with partial render candidates
• KaTeX display and inline math
• tables, task lists, links, images, blockquotes
• thinking blocks via <thinking>...</thinking>
• footnotes, definition lists, marked text, and admonitions

Props

<MarkdownRenderer
  content="..."
  final={false}
  htmlPolicy="trusted"
  onRenderUpdate={() => {}}
/>

• content: accumulated Markdown string.
• final: set true after the stream is complete.
• htmlPolicy: trusted, safe, or escape.
• onRenderUpdate: called after HTML updates and Mermaid finishes rendering.

Demo Content

import { demoStreamContent } from 'react-markstream/demo-content'

Attribution

This package is a fork/rewrite of the rendering ideas and playground behavior from markstream-vue.