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's all you need to get started. There's no provider to wrap your app in and no stylesheet to import.

What you get by default#

You get CommonMark, parsed with micromark instead of regular expressions.

Raw HTML isn't executed and unsafe URL schemes are blocked. See Security.

The output is plain semantic HTML without classes or inline styles, so your own CSS applies to it directly. See Styling.

The renderer entry doesn't have "use client", 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>

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

- [x] 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>

You can replace any element. The override gets the element's props plus its source node. See Components.

Add editing#

The editor is a separate package, and the renderer doesn't depend on 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} />
}

What you store is plain Markdown (there's no editor JSON format to keep around). See Editor basics.

Personalize the same document#

The variables plugin fills in typed values while the renderer parses the document.

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


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

See Variables.

Where to go next#