Getting started

npm install @react-markdown-kit/renderer

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

export function Article({ content }: { content: string }) {
  return <Markdown>{content}</Markdown>
}

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

The renderer, running on this page

Markdown (edit me)

# Release notes We shipped **two** things this week. 1. A faster importer 2. A [changelog](https://example.com) > Thanks for the reports.

Rendered

Release notes

We shipped two things this week.

1. A faster importer
2. A changelog

Thanks for the reports.

The right-hand pane is a real Markdown component, server-rendered with the rest of the page. Edit the source and watch it follow.

What you get by default

CommonMark, parsed with micromark rather than regular expressions.

Raw HTML is not executed, and unsafe URL schemes are blocked. See Security.

Plain semantic HTML with no classes and no inline styles. See Styling.

No "use client" on the renderer entry, so it works in server components and static rendering. See Server rendering.

Turn on GitHub Flavored Markdown

import { GfmMarkdown } from '@react-markdown-kit/renderer/gfm'

<GfmMarkdown>{content}</GfmMarkdown>

Tables, task lists and strikethrough

Markdown

| Item | Status |
| --- | --- |
| Importer | done |
| Exporter | ~~blocked~~ |

- [x] Ship the parser
- [ ] Ship the writer

Rendered

Item	Status
Importer	done
Exporter	blocked

• Ship the parser
• Ship the writer

Tables, task lists, strikethrough, autolinks and footnotes are covered in GFM.

Use your own components

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

Any element can be replaced, and the override receives the element's props plus its source node. See Components.

Add editing

The editor is a separate package. The renderer never requires it.

npm install @react-markdown-kit/editor

'use client'

import { useState } from 'react'
import { MarkdownEditor } from '@react-markdown-kit/editor'

export function Notes() {
  const [value, setValue] = useState('# Notes\n\nStart writing.')
  return <MarkdownEditor value={value} onChange={setValue} />
}

Loading editor

You store Markdown, not editor JSON. See Editor basics.

Personalize the same document

The template plugin resolves typed variables while the renderer parses.

import { template } from '@react-markdown-kit/template'

<Markdown extensions={[template({ data: { user: { name: 'Chatis' } } })]}>{'# Hello {{user.name}}'}</Markdown>

See Templates.

Where to go next

You want to	Read
Replace elements with your own components	Components
Tables, task lists, footnotes	GFM
One Markdown dialect for the whole app	Presets
Parse once, render many times	Compiling
Add rich editing	Editor basics
Know what editing does to your source	Round-trip preservation
Move off react-markdown	Compatibility