ow-render

A powerful React Markdown rendering component library ported from OpenWebUI, supporting incremental rendering, syntax highlighting, math formulas, and streaming output.

Features

• 🚀 Incremental Rendering - Supports progressive content loading
• 🎨 Syntax Highlighting - Based on Prism.js and Highlight.js
• 📊 Math Formulas - KaTeX math formula rendering support
• 📱 Responsive Design - Dark/Light theme support
• 🔄 Streaming Output - Typewriter effect with cursor display
• 📋 Table Rendering - Full Markdown table support
• 🎯 TypeScript Support

Installation

npm install ow-render
# or
yarn add ow-render
# or
pnpm add ow-render

Usage

Basic Usage

import { IncrementalMarkdownRenderer } from 'ow-render'
import 'ow-render/styles'

function App() {
  const markdownContent = `
# Hello World

This is a **Markdown** rendering example.

## Code Block

\`\`\`javascript
console.log('Hello, World!')
\`\`\`

## Math Formula

When $a \\ne 0$, the solutions of $ax^2 + bx + c = 0$ are:

$$x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$$
`

  return (
    <div>
      <IncrementalMarkdownRenderer 
        content={markdownContent}
        isDark={false}
        isStreaming={false}
        showCursor={true}
      />
    </div>
  )
}

Streaming Rendering

import { IncrementalMarkdownRenderer } from 'ow-render'

function StreamingDemo() {
  const [content, setContent] = useState('')
  const [isStreaming, setIsStreaming] = useState(true)

  useEffect(() => {
    const fullText = "# Streaming Example\n\nThis text will appear gradually..."
    let index = 0
    
    const timer = setInterval(() => {
      if (index < fullText.length) {
        setContent(fullText.slice(0, index + 1))
        index++
      } else {
        setIsStreaming(false)
        clearInterval(timer)
      }
    }, 50)

    return () => clearInterval(timer)
  }, [])

  return (
    <IncrementalMarkdownRenderer 
      content={content}
      isStreaming={isStreaming}
      showCursor={true}
    />
  )
}

API Reference

IncrementalMarkdownRenderer

| Property | Type | Default | Description | |----------|------|---------|-------------| | content | string | '' | Markdown content | | isDark | boolean | false | Whether to use dark theme | | className | string | '' | Custom CSS class name | | isStreaming | boolean | false | Whether streaming output is active | | showCursor | boolean | true | Whether to show cursor |

Other Components

• MarkdownRenderer - Basic Markdown renderer
• StreamingMarkdownRenderer - Dedicated streaming renderer
• CodeBlock - Code block component

Style Customization

The component is built with Tailwind CSS. You can customize styles by overriding CSS variables:

.markdown-renderer {
  --text-color: #333;
  --bg-color: #fff;
  --code-bg: #f5f5f5;
  --border-color: #e5e5e5;
}

.markdown-renderer.dark {
  --text-color: #fff;
  --bg-color: #1a1a1a;
  --code-bg: #2a2a2a;
  --border-color: #404040;
}

Dependencies

This component library depends on the following packages:

• React >= 18.0.0
• marked - Markdown parsing
• marked-katex-extension - Math formula support
• katex - Math formula rendering
• dompurify - HTML sanitization
• highlight.js - Syntax highlighting
• prismjs - Code highlighting

License

MIT License

Contributing

Issues and Pull Requests are welcome!