react-markdown Examples You Can Edit and Run
5 small react-markdown examples written by AgentGid from the official docs, one feature each. Every one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. The screenshots are taken from the same code by our server, which also checks that each example starts without errors.
react-markdown: usage and stats 243 AI-built projects use it
Rendering markdown with react-markdownType in the left box: the right side re-renders the markdown on every keystroke.
Custom components in react-markdownChange the colours in the h2 or blockquote component and the rendered markdown updates at once.
Filtering elements in react-markdownEdit the tag lists in each panel and compare how the same markdown is rendered.
Handling HTML in markdown with react-markdownCompare the two panels: the left shows the raw tags as text, the right drops them.
Transforming link URLs in react-markdownCompare the hrefs in both panels; try adding a link with another protocol to the markdown.
Try them all in one place
import { useState } from 'react'
import Markdown from 'react-markdown'
const start = `# Release notes
Version **2.4** adds *dark mode* and faster search.
- New settings page
- Keyboard shortcuts
- Fixed a \`null\` crash
> Tip: edit the text on the left.`
const css = `
.preview h1 { font-size: 20px; margin: 0 0 8px; }
.preview p, .preview ul { margin: 0 0 8px; }
.preview code { background: #e2e8f0; padding: 1px 4px; border-radius: 4px; }
.preview blockquote { margin: 0; padding: 6px 10px; border-left: 3px solid #6366f1; background: #eef2ff; }
`
export default function App() {
const [text, setText] = useState(start)
return (
<div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', background: '#111', fontFamily: 'system-ui, sans-serif' }}>
<style>{css}</style>
<div style={{ display: 'flex', gap: 12, width: 570 }}>
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
style={{ width: 250, height: 300, background: '#1e1e24', color: '#e5e7eb', border: '1px solid #333', borderRadius: 8, padding: 10, fontFamily: 'monospace', fontSize: 13 }}
/>
<div className="preview" style={{ flex: 1, height: 300, overflow: 'auto', background: '#f8fafc', color: '#0f172a', borderRadius: 8, padding: 14, fontSize: 14 }}>
<Markdown>{text}</Markdown>
</div>
</div>
</div>
)
}
Type in the left box: the right side re-renders the markdown on every keystroke. Code written by AgentGid [1]. How it works, with a screenshot →
Type in the left box: the right side re-renders the markdown on every keystroke. Code written by AgentGid [1]. How it works, with a screenshot →Change the colours in the h2 or blockquote component and the rendered markdown updates at once. Code written by AgentGid [1]. How it works, with a screenshot →Edit the tag lists in each panel and compare how the same markdown is rendered. Code written by AgentGid [1]. How it works, with a screenshot →Compare the two panels: the left shows the raw tags as text, the right drops them. Code written by AgentGid [1]. How it works, with a screenshot →Compare the hrefs in both panels; try adding a link with another protocol to the markdown. Code written by AgentGid [1]. How it works, with a screenshot →Checked Oct 12, 2026: each example starts without errors in Chromium with react-markdown 10.1.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.