Skip to main content

Free and open source, runs in your browser

React Markdown Renderer Playground

Paste some Markdown, try the React Markdown Kit renderer’s options, and copy the code that produced the output. The renderer is safe and unstyled by default, and it takes the same props as react-markdown.

Renderer docsnpmGitHubReact Markdown Kit

  • Safe by defaultRaw HTML is shown as text and never run, and unsafe URL schemes are emptied. You don’t have to configure anything for this.
  • Same props as react-markdownThe props match react-markdown 10 across 39 tested comparisons. There are three documented differences, and a codemod for them.
  • Works on the serverThere’s no use client directive, so you can render in server components and static builds. You can also precompile once and re-render 2.8x faster.

Install the package

npm install @react-markdown-kit/renderer

It needs React 18 or newer. You don’t need a provider, stylesheet, config or design system to get going. The package has no use client directive, so it works in server components, during server rendering and in static builds.

Render Markdown in three steps

  1. Render a string. Raw HTML is shown as text and never run, and unsafe URL schemes are emptied (no config needed).
    import Markdown from '@react-markdown-kit/renderer'

export function Article({ content }: { content: string }) {
  return <Markdown>{content}</Markdown>
}
  2. Turn on GitHub Flavored Markdown for tables, task lists, strikethrough, autolinks and footnotes. A preset is where your app decides which Markdown features it supports. You define it once and reuse it everywhere.
    import Markdown, { defineMarkdownPreset, gfm } from '@react-markdown-kit/renderer'

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

<Markdown preset={preset}>{content}</Markdown>
  3. Style it. You can opt into the shipped typography, pass your own components per element, or keep the plain semantic HTML and write your own CSS. The playground above uses a component for every element, and its Code tab has the source.
    import Markdown from '@react-markdown-kit/renderer'
import '@react-markdown-kit/renderer/styles.css'

<div className="rmk-document">
  <Markdown preset={preset} components={{ a: AppLink, img: AppImage }}>
    {content}
  </Markdown>
</div>

More docs. The getting started guide covers every prop, components and styling have live examples for each approach, and the compatibility matrix lists each difference from react-markdown along with the test that checks it.

About this playground

  • Rendered is a live <Markdown> that updates as you edit the source. HTML is the static markup a server would send. Tree is the parsed document that compileMarkdown returns. It’s plain JSON, so you can cache it or hand it to the template plugin. Code is the JSX behind the render.
  • The status strip measures parse and render medians in your browser. They’re only there to show that rendering a precompiled document skips the parse, so don’t read them as a benchmark. The benchmark methodology explains how the kit is actually compared.
  • Copy link above the source pane compresses the document into the URL hash and copies the address. Whoever opens it gets this page with your Markdown already loaded, and nothing is uploaded.
  • If you want to edit as well as render, try the editor demo.

Questions

How do I render Markdown in React?
Install @react-markdown-kit/renderer and pass the string as children to the Markdown component. You don’t need to add a provider, a stylesheet or any configuration. Getting started.
Is it safe to render Markdown written by users?
For the most part, yes. Raw HTML is shown as text and never executed, and unsafe URL schemes are emptied, without you having to configure anything. The security page lists the tests that cover this. The security model.
Is React Markdown Kit a react-markdown alternative?
Mostly. Its props match react-markdown 10, and 39 of 39 tested prop comparisons render identical markup. There are three documented differences and a codemod that migrates the rest, so it isn’t quite a drop-in replacement. The migration guide.
Does it work in Next.js and React Server Components?
Yes. The package has no use client directive, so it renders on the server, inside server components and in static builds. Markdown in Next.js.
Does it support GitHub Flavored Markdown?
Yes. Add gfm() to a preset for tables, task lists, strikethrough, autolinks and footnotes. The default dialect is CommonMark. GFM options.
Can I share the Markdown I am testing?
Yes. Copy link compresses the whole document into the URL hash, and whoever opens the link gets this playground with your Markdown already in the source pane. Nothing gets uploaded.
How fast is it?
On a 1 KB document it is 1.21x slower than react-markdown, at parity at 10 KB and 0.89x at 100 KB. A precompiled document re-renders 2.8x faster than parsing again. The benchmark methodology.