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

``bash
npm install ow-render

or

yarn add ow-render

or

pnpm add ow-render
`

Usage

$3

`jsx
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 (

content={markdownContent}
isDark={false}
isStreaming={false}
showCursor={true}
/>

)
}
`

$3

`jsx
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 (
content={content}
isStreaming={isStreaming}
showCursor={true}
/>
)
}
`

API Reference

$3

| 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 |

$3

- 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:

`css
.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!