Try it!
Type Markdown on the left and see the rendered HTML preview update live on the right. Supports full CommonMark plus GFM extensions: tables, strikethrough, task lists, and autolinks.
Open in full page ↗
Description
react-markdown v10 with the remark-gfm plugin, which adds GitHub Flavored Markdown support on top of CommonMark: tables with alternating row shading, strikethrough text, interactive task-list checkboxes, and bare URL autolinks. The preview panel styles all standard markdown elements — headings, blockquotes with an accent border, fenced code blocks, inline code, ordered and unordered lists, and horizontal rules — using CSS variables so the theme adapts automatically to the user's light/dark preference. View the source code
// App.jsx
import React, { useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import './App.css';
function Home() {
const [markdown, setMarkdown] = useState('');
return (
<div id="app-shell">
<header><h1>Markdown Previewer</h1></header>
<div className="panes">
<div className="pane pane-input">
<div className="pane-label">Markdown</div>
<textarea
className="md-textarea"
value={markdown}
onChange={(e) => setMarkdown(e.target.value)}
placeholder="Type your markdown here..."
/>
</div>
<div className="pane pane-preview">
<div className="pane-label">Preview</div>
<div className="html-preview">
{markdown ? (
<Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
) : (
<p className="preview-placeholder">Preview will appear here</p>
)}
</div>
</div>
</div>
</div>
);
}
Previous Day
Next Day