React Markdown renderer

Turn a Markdown string into React elements with one component.

npm install @react-markdown-kit/renderer

import Markdown from '@react-markdown-kit/renderer'

<Markdown>{content}</Markdown>

That is the whole first-use experience. No provider, no stylesheet, no account, no design system, no configuration.

What you get by default​

CommonMark, parsed with micromark rather than regular expressions. 554 of the 652 official examples match exactly, and 96% do once the raw-HTML examples the security policy intentionally drops are counted separately.

Safe rendering. Raw HTML is not executed and unsafe URL schemes are blocked, using the same algorithm react-markdown uses.

Plain semantic HTML. No classes, no inline styles, nothing to override.

Server rendering. No use client directive, so it works in server components, during SSR and in static builds.

Custom components​

Map any element to your own component.

<Markdown components={{ a: AppLink, img: AppImage, code: CodeBlock }}>
  {content}
</Markdown>

GitHub Flavored Markdown​

Tables, task lists, strikethrough, autolinks and footnotes, through a native extension or the familiar plugin. Both are fixture-tested to produce the same output.

import Markdown, { defineMarkdownPreset, gfm } from '@react-markdown-kit/renderer'

const preset = defineMarkdownPreset({ extensions: [gfm()] })

<Markdown preset={preset}>{content}</Markdown>

Coming from react-markdown​

The prop surface is deliberately familiar: children, components, remarkPlugins, rehypePlugins, remarkRehypeOptions, allowedElements, disallowedElements, allowElement, skipHtml, unwrapDisallowed and urlTransform.

All 39 prop comparisons against a pinned react-markdown@10.1.0 produce identical markup. We still do not call it a drop-in replacement, because two things differ and you should see them before deciding.

Styling​

The package ships no styling dependency. Style the output with plain CSS, opt into the shipped typography and retint it with custom properties, pass your own utility classes per part, or replace elements with components from any library.

Next​

Getting started · Try every option in the renderer demo · Add editing · Personalize the same document