Markdown Preview
Write Markdown and see rendered HTML in a live split-pane preview.
Reviewed by Aygul Dovletova · Last reviewed
Markdown Preview
Write your Markdown here and see the rendered HTML on the right.
Features
- Live preview as you type
- Side-by-side or stacked layout
- Copy generated HTML
Try editing this text to see the preview update instantly.
const greeting = "Hello, world!";
console.log(greeting);Made with ZeroUtil.
How to Use the Markdown Preview
- Write or paste Markdown in the left editor pane. The rendered HTML preview updates on the right with every keystroke - no Render button needed.
- Switch layouts between Side by Side and Stacked using the toolbar buttons. Stacked is handy on narrow laptops and tablets where a two-column view crushes the editor to unreadable width.
- Copy the generated HTML with the Copy HTML button when you are happy with the result. The markup lands on your clipboard as plain text.
- Continue iterating. Edits to the source reflect in the preview immediately so you can tune heading hierarchy, list spacing, and link wording without leaving the page.
How Live Preview Works
The editor is a plain <textarea> whose value is bound to a Preact useState hook. Each keystroke triggers a re-render, and the latest value is passed through the Markdown parser on every update. For typical documents (a few kilobytes) this runs in well under a millisecond, so the preview feels instant. For longer files the parse is fast enough that debouncing would not produce a perceptible improvement; React-style reconciliation updates only the DOM nodes that actually changed.
The parser is the same CommonMark-style implementation used by the sibling Markdown-to-HTML converter: block-level scanning for headings, fences, lists, and quotes, then an inline pass for emphasis, code spans, links, and images. The output is inserted into the preview DOM, where the page\'s typography styles make the result legible. Rendering and input processing all happen on the main JavaScript thread, which means everything stays local to your tab.
Situations Where the Preview Shines
- Drafting a README for a project and wanting to see heading levels and list nesting as you type.
- Checking a release-notes draft before pasting it into GitHub or GitLab where you cannot preview until you submit.
- Writing a Linear or Jira ticket in Markdown and previewing how it will render in those tools.
- Teaching someone the differences between one, two, and three pound signs by letting them watch headings change size.
- Composing a newsletter in Markdown inside your editor and pasting the HTML into an email tool.
- Drafting documentation for an Astro, Hugo, or Jekyll site offline on a flight, with the preview giving immediate feedback.
Edge Cases Worth Knowing
- Inline HTML in Markdown. CommonMark allows raw HTML, and the preview renders it. That is great for callouts and custom layouts, but be aware of what you are pasting - this is an implicit trust boundary.
- Hard line breaks. CommonMark joins consecutive lines within a paragraph. To force a break, end a line with two trailing spaces or use a backslash. If your text looks glued together, check whether you want break-on-newline behaviour (a GFM extension not always enabled) or the CommonMark default.
- Fenced code blocks with very long lines. The preview will emit a horizontal scrollbar rather than wrap, which matches how GitHub and most editors render code. If you prefer wrapping, style the output container after copying the HTML.
- Tables. Pipe-delimited tables (a GFM extension) are supported in the preview. Columns align on the dashes; mismatched row-cell counts produce rows with fewer or empty cells rather than errors.
- Smart typography. The parser does not auto-replace straight quotes with curly quotes or
--with an em-dash. That behaviour lives in smart-typography plugins of heavier libraries like markdown-it-smartypants.
Why Preview Matters in Markdown Workflows
Markdown\'s appeal comes from being legible as plain text, yet the rendered output is what ships. Small ambiguities - whether two trailing spaces create a line break, whether a heading needs a blank line before it, whether backticks need doubling around code containing a backtick - only surface on render. Live preview shortens the feedback loop from "commit and look at GitHub" to "keystroke". Editors with integrated previews (VS Code, Typora, Obsidian) popularised the pattern for exactly this reason. CommonMark formalised the rules a preview should follow, so a document that renders correctly in one conformant preview should render the same everywhere.
How This Compares to Editor-Integrated Previews
VS Code\'s Markdown preview uses markdown-it with syntax-highlighting and a handful of GitHub-style extensions. Typora renders in a live single-pane editor where source and output are the same view. Obsidian and Logseq provide live previews with wiki-style backlink extensions that are not part of Markdown proper. grip renders a local Markdown file through GitHub\'s own API for pixel-perfect GFM preview. All of these are better when you are inside a specific editor; this web tool is the zero-install option for a quick check on any machine with a browser, and its local-only execution means you can preview drafts of sensitive content without uploading to a cloud service.
Frequently Asked Questions
How fast does the preview update as I type?
Immediately. Every keystroke triggers a re-parse of the Markdown and a re-render of the preview tree. For documents under a few kilobytes this is imperceptible, well below the 16ms animation frame budget. For multi-megabyte documents there may be a slight delay on each keystroke; at that scale a dedicated editor with incremental parsing (VS Code, Zed, Obsidian) is a better tool.
Does the preview store my draft between sessions?
No. The editor content lives in component state only. Closing the tab or navigating away discards it. Some browsers offer form restoration that may bring the text back on reload, but this is browser behaviour rather than intentional persistence by the tool. If you are writing something important, paste into a real editor or a note-taking app that saves to disk.
Is any of my text sent to a server?
No. The preview is a Preact component that runs in your tab. Parsing the Markdown and rendering the HTML happen through local JavaScript; no fetch request is made after the initial page load. That guarantee is important for draft documents that contain internal information or unreleased announcements.
Which Markdown syntax is supported in the preview?
The common CommonMark set: headings (<code>#</code> through <code>######</code>), paragraphs, emphasis (<code>*</code> and <code>_</code>), links, images, ordered and unordered lists (including nested), fenced and indented code blocks, inline code with backticks, blockquotes, and horizontal rules. GFM additions like strikethrough, tables, and autolinks work in most cases; task list checkboxes render as styled list items.
Can I switch between side-by-side and stacked layouts?
Yes. The toolbar above the editor has two buttons labeled Side by Side and Stacked. Side by side works well on wide laptops; stacked gives each pane full width and is better for phones and narrow browser windows. The choice persists for the current session while you are on the page, resetting when you reload.
Does it handle GitHub Flavored Markdown tables?
Yes, the common pipe-delimited form. A header row separated from the body by dashes renders as an HTML table with proper <code><thead></code> and <code><tbody></code> elements. Alignment markers (colons at the start or end of a dashed separator cell) are recognised and produce aligned cells in the preview. Very complex tables with merged cells cannot be expressed in GFM syntax at all.
Will links in the preview actually navigate?
Yes. Markdown links render as <code><a></code> elements and clicking them navigates away from the tool page. If you are just checking formatting, right-click and copy link rather than clicking. Opening a link in a new tab via middle-click or a keyboard shortcut preserves your draft.
Can I export the preview as a styled file?
Not directly. Copy the HTML and paste it into a destination that applies the styles you want - a blog theme, an email template, or a documentation site. For a PDF of the preview, use the browser's print dialog on this page. For a standalone HTML file, save the copied HTML and wrap it in a minimal <code><html></code>/<code><body></code> boilerplate with a stylesheet of your choice.
Why do some of my line breaks disappear?
CommonMark treats a single line break inside a paragraph as non-breaking whitespace, so two consecutive lines of prose flow together. This is the standards-based behaviour used by most tooling. To force a line break, end a line with two spaces or a backslash. For paragraph separation, leave a blank line between the paragraphs.
How does this compare to Typora or Obsidian?
Those are full-featured editors with file persistence, plugins, backlinks, graph views, themes, and syntax highlighting. This tool is a single-page, install-free preview for quick Markdown checks without opening an editor. Choose a real editor for day-to-day writing; use the in-browser preview when you are on someone else's machine, on mobile, or just confirming how a snippet will look before pasting it into a comment or issue.
More Developer Tools
Base64 Encoder & Decoder
Encode UTF-8 text to Base64 online or decode Base64 back to UTF-8 and plain text. Runs in your browser with no upload.
Open toolBulk URL Encode / Decode
Encode or decode many URLs at once. Paste a newline-separated list and the tool processes each line in parallel, preserving order and blank lines.
Open toolCode Screenshot
Create beautiful code snippet images with customizable themes.
Open toolColor Converter
Convert colors between HEX, RGB, HSL and CMYK formats.
Open toolCron Expression Parser
Parse cron expressions into human-readable schedules with next run times.
Open toolCSS Formatter / Minifier
Format, beautify and minify CSS code.
Open tool