Markdown Previewer

Live Markdown-to-HTML rendering in React

Try it!

Type Markdown on the left and see the rendered HTML 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 the top 15% of the viewport. Markdown is parsed by react-markdown v10 with the remark-gfm plugin, adding GitHub Flavored Markdown 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 elements — headings, blockquotes, fenced code blocks, inline code, lists, and horizontal rules — using CSS variables so the theme adapts automatically to the user's light/dark preference.

Back to top