function react | Bun module | Bun

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 });

Represents a raw buffer of binary data, which is used to store data for the different typed arrays. ArrayBuffers cannot be read from or written to directly, but can be passed to a typed array or DataView Object to interpret the raw buffer as needed.

Read-only. The length of the ArrayBuffer (in bytes).

Resizes the ArrayBuffer to the specified size (in bytes).

MDN

Resize an ArrayBuffer in-place.

Returns a section of an ArrayBuffer.

Creates a new ArrayBuffer with the same byte content as this buffer, then detaches this buffer.

MDN

Creates a new non-resizable ArrayBuffer with the same byte content as this buffer, then detaches this buffer.

MDN

Component overrides for react().

Replace default HTML tags with custom React components. Each override receives the same props the default element would get.

function Code({ language, children }: { language?: string; children: React.ReactNode }) {
return pre data-language={language}>code>{children}code>pre>;
}
Bun.markdown.react(text, { pre: Code });

Options for react() — parser options and element symbol configuration.

Enable autolinks. Pass true to enable all autolink types (URL, WWW, email), or an object to enable individually.

// Enable all autolinks
{ autolinks: true }
// Enable only URL and email autolinks
{ autolinks: { url: true, email: true } }

Collapse whitespace in text content. Default: false.

Treat soft line breaks as hard line breaks. Default: false.

Configure heading IDs and autolink headings. Pass true to enable both heading IDs and autolink headings, or an object to configure individually.

// Enable both heading IDs and autolink headings
{ headings: true }
// Enable only heading IDs
{ headings: { ids: true } }

Enable LaTeX math ($inline$ and $$display$$). Default: false.

Disable HTML blocks. Default: false.

Disable inline HTML spans. Default: false.

Disable indented code blocks. Default: false.

Allow ATX headers without a space after #. Default: false.

Which $$typeof symbol to use on the generated elements.

Enable GFM strikethrough (~~text~~). Default: true.

Enable GFM tables. Default: true.