function
bun.markdown.react
Render markdown to React JSX elements.
Returns a React Fragment containing the parsed markdown as children. Can be returned directly from a component or passed to renderToString().
Override any HTML element with a custom component by passing it in the second argument, keyed by tag name. Custom components receive the same props the default elements would (e.g. href for links, language for code blocks).
Parser options (including reactVersion) are passed as a separate third argument. Uses Symbol.for('react.transitional.element') by default (React 19). Pass reactVersion: 18 for React 18 and older.
The markdown string or buffer to parse
Component overrides keyed by HTML tag name
Parser options and element symbol configuration
A React Fragment element containing the parsed markdown
// Use directly as a component return value
function Markdown({ text }: { text: string }) {
return Bun.markdown.react(text);
}
// Server-side rendering
import { renderToString } from "react-dom/server";
const html = renderToString(Bun.markdown.react("# Hello **world**"));
// Custom components receive element props
function Code({ language, children }: { language?: string; children: React.ReactNode }) {
return <pre data-language={language}><code>{children}</code></pre>;
}
function Link({ href, children }: { href: string; children: React.ReactNode }) {
return <a href={href} target="_blank">{children}</a>;
}
const el = Bun.markdown.react(text, { pre: Code, a: Link });
// For React 18 and older
const el18 = Bun.markdown.react(text, undefined, { reactVersion: 18 });