React Markdown Kit

Markdown in, React out. A renderer, an editor, and a few optional plugins that share the same document.

This site is built around those documents. Read a page, open its source, and change an example to see what happens.

Start with a string

npm install @react-markdown-kit/renderer

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

export function Document({ source }: { source: string }) {
  return <Markdown>{source}</Markdown>
}

No provider or stylesheet is required. The output is ordinary HTML, ready for your own components and CSS.

Explore the kit

Document	What you can try
Rendering	Edit the source of the documentation you're reading.
Editing	Write directly in the document and inspect the saved Markdown.
Streaming	Watch this guide arrive a few words at a time.
Variables	Change the data behind a document's placeholders.
Slides	Read a deck that explains its own syntax, then present it.
Mermaid	Draw a diagram and keep its Mermaid source.

Add only what you need

The renderer works on its own. GitHub Flavored Markdown, rich editing, variables, diagrams, and slides are opt-in.

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

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

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

Pass the same preset to the renderer and editor to keep the same Markdown features in both.

Guides

• How to render Markdown in React — from a string to custom components.
• Streaming Markdown in React — render an AI response as it arrives.
• Markdown in Next.js — server components, client boundaries, and precompiled documents.
• Lossless Markdown editing — keep the source intact through an editing round trip.
• Build a Lexical Markdown editor — connect rich text editing to plain Markdown.
• Variables in a Markdown file — add typed placeholders to a document.
• Personalized Markdown — reuse one document with different data.
• Mermaid in React — render diagrams alongside your text.
• Markdown presentations in React — slides, layouts, notes, and presentation tools.

Compare and migrate

• Choosing a React Markdown library — compare rendering, editing, streaming, and templates.
• A react-markdown alternative — when to consider the kit.
• React Markdown Kit vs react-markdown
• React Markdown Kit vs markdown-to-jsx
• React Markdown Kit vs Streamdown
• React Markdown Kit vs MDXEditor
• React Markdown Kit vs Milkdown
• Markdown variables vs Handlebars
• A Marp alternative — Markdown slides in a React application.
• A Mermaid Live Editor alternative — a visual diagram editor with Mermaid source.
• Migrating from react-markdown — move an existing application step by step.

Reference

• Getting started — installation and your first component.
• Styling — ordinary CSS and custom React components.
• Server rendering — render on the server or precompile a document.
• Security — HTML, links, and untrusted content.
• Variable syntax — placeholders, paths, and typed values.
• Compatibility — supported syntax and test coverage.

The code is open source, under the MIT license.