React Markdown Kit

Markdown rendering, streaming and editing in react. Plus plugins for mermaid diagrams, slides and variables.

npm install @react-markdown-kit/renderer

Guides

• Renderer demoThe whole syntax on one page you can edit, rendered by the component you would ship.
• How to render Markdown in ReactGFM, custom components, links, code blocks, security, server rendering.
• Streaming Markdown in ReactEvery partial prefix renders, plus the two constructs that rewrite themselves.
• Streaming demoYour Markdown replayed into the renderer in chunks, like a chat reply.
• Markdown in Next.jsServer components with no client JavaScript, and precompiled documents.
• Editor demoRich, source and preview modes that store plain Markdown.
• Lossless Markdown editing22 of 22 audited documents open and save byte for byte.
• Lexical Markdown editorWhy Lexical, how the package wraps it, when to use the headless API.
• Markdown variablesTyped variables, schemas, formatters and locales, resolved in the parser.
• Variables in a .md filePlaceholder syntax in a .md file, and why data can't inject structure.
• Personalized MarkdownWrite a report once and resolve it per customer and per locale.
• Mermaid in ReactFlowcharts and sequence diagrams as static SVG without Mermaid.js.
• Markdown presentations in ReactA deck from one Markdown file, with present mode and speaker notes.

Comparisons

• react-markdown alternative39 of 39 prop comparisons render identical markup, and the three differences.
• vs react-markdownInstall size, GFM, security defaults, streaming, server rendering, migration.
• vs markdown-to-jsxInstall size, GFM, security defaults, streaming, server rendering, migration.
• vs StreamdownSame sections, for an AI chat UI that renders tokens as they arrive.
• Editor vs MDXEditorEditing model, output format, round trip, bundle size, server rendering.
• Editor vs MilkdownEditing model, output format, round trip, bundle size, ProseMirror.
• Variables vs HandlebarsReplacing placeholders before parsing, compared with resolving them inside the parser.
• Marp and Slidev alternativeA deck inside a React app, with PPTX export and browser print to PDF.
• Mermaid Live Editor alternativemermaid.live compared with the canvas on editing, sharing, price, licence and diagram types.
• Migrate from react-markdownThe three differences, and a codemod that skips anything it can't safely convert.