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
A real-time Markdown previewer built with React 19 and Vite. The
interface splits the screen into two equal panes — a monospace textarea
on the left and a live HTML preview on the right — with the header
taking up the top 15% of the viewport. Markdown is parsed using
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