function

markdown.react

function react(

input: string | ArrayBufferLike | TypedArray<ArrayBufferLike> | DataView<ArrayBuffer>,

): unknown;

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.

@param input

The markdown string or buffer to parse

@param components

Component overrides keyed by HTML tag name

@param options

Parser options and element symbol configuration

@returns

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

Referenced types

class ArrayBuffer

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.

readonly [Symbol.toStringTag]: string
readonly byteLength: number
Read-only. The length of the ArrayBuffer (in bytes).
resize(
newByteLength?: number
): void;
Resizes the ArrayBuffer to the specified size (in bytes).
MDN
resize(
byteLength: number
): ArrayBuffer;
Resize an ArrayBuffer in-place.
slice(
begin: number,
end?: number
): ArrayBuffer;
Returns a section of an ArrayBuffer.
transfer(
newByteLength?: number
): ArrayBuffer;
Creates a new ArrayBuffer with the same byte content as this buffer, then detaches this buffer.
MDN
transferToFixedLength(
newByteLength?: number
): ArrayBuffer;
Creates a new non-resizable ArrayBuffer with the same byte content as this buffer, then detaches this buffer.
MDN

interface ComponentOverrides

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

interface ReactOptions

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

autolinks?: boolean | { email: boolean; url: boolean; www: boolean }
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 } }
collapseWhitespace?: boolean
Collapse whitespace in text content. Default: false.
hardSoftBreaks?: boolean
Treat soft line breaks as hard line breaks. Default: false.
headings?: boolean | { autolink: boolean; ids: boolean }
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 } }
latexMath?: boolean
Enable LaTeX math ( $inline$ and $$display$$). Default: false.
noHtmlBlocks?: boolean
Disable HTML blocks. Default: false.
noHtmlSpans?: boolean
Disable inline HTML spans. Default: false.
noIndentedCodeBlocks?: boolean
Disable indented code blocks. Default: false.
permissiveAtxHeaders?: boolean
Allow ATX headers without a space after #. Default: false.
reactVersion?: 18 | 19
Which $$typeof symbol to use on the generated elements.
19 (default): Symbol.for('react.transitional.element')
18: Symbol.for('react.element') — use this for React 18 and older
strikethrough?: boolean
Enable GFM strikethrough (~~text~~). Default: true.
tables?: boolean
Enable GFM tables. Default: true.
tagFilter?: boolean
Enable the GFM tag filter, which replaces < with < for disallowed HTML tags (e.g. <script>, <style>, <iframe>). Default: false.
tasklists?: boolean
Enable GFM task lists (- [x] item). Default: true.
underline?: boolean
Enable underline syntax (__text__ renders as <u> instead of <strong>). Default: false.
wikiLinks?: boolean
Enable wiki-style links ([[target]] or [[target|label]]). Default: false.