@comark/react

React renderer for Comark — render markdown with custom React components, streaming support, and Server Components.

Features

• 🧩 <Comark> component for one-shot markdown rendering
• 🎯 Map any Comark tag to a custom React component
• 🌊 Streaming-friendly with auto-close and caret support
• 🖥️ Works with React Server Components and SSR
• 🔌 Plugin ecosystem (math, mermaid, highlight, binding…)
• 🎯 Full TypeScript support

Installation

npm install @comark/react
# or
pnpm add @comark/react

Usage

import { Comark } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'

const content = `# Hello\n\nThis is **Comark** in React.`

export default function App() {
  return (
    <Comark components={{ math: Math }} plugins={[math()]}>
      {content}
    </Comark>
  )
}

Custom components

import { Comark } from '@comark/react'
import { Alert } from './components/Alert'

<Comark components={{ alert: Alert }}>{content}</Comark>

::alert{type="warning"}
Heads up!
::

Streaming

<Comark streaming={isStreaming} caret>
  {content}
</Comark>

Documentation

Full guide and API reference at comark.dev/rendering/react.

License

Made with ❤️

Published under MIT License.