Markdown Preview

Overview

A two-pane Markdown editor: source on the left, GitHub-flavoured rendering live on the right. It runs on react-markdown with the remark-gfm plugin, so tables, task lists, strikethrough, and autolinks render the way they will on GitHub.

How It Works

Type or paste Markdown in the left pane; the right pane re-renders on every keystroke. The preview understands headings, emphasis, lists, links, images, fenced code blocks, blockquotes, GFM tables, - [ ] task lists, and ~~strikethrough~~. Download .MD saves the raw source as a file when the draft is done.

Step-by-Step Usage Guide

1. Write or paste Markdown in the left editor pane.
2. Watch the right pane render live as you type — tables and task lists included.
3. Fix anything that renders unexpectedly, remembering that raw HTML is ignored by design.
4. Download .MD to save the source file.

Technical Specifications & Standards

Rendering goes through React elements rather than innerHTML, which has a practical consequence: raw HTML written inside the Markdown is ignored, not executed — pasted <script> or <img onerror> markup produces nothing rather than running. The trade-off of that safety is fidelity: without a raw-HTML plugin, HTML-only constructs such as a <kbd> tag will not render. Code fences are styled as monospace blocks but are not tokenized, so there is no syntax highlighting.

Targeted Use Cases

• Drafting a README or CONTRIBUTING file and checking GFM tables before committing.
• Writing issue or pull-request descriptions with task lists, ready to paste to GitHub.
• Previewing blog posts destined for a static site generator that renders CommonMark with GFM extensions.
• Composing documentation snippets with tables without opening a full editor.

Notes & Gotchas

• Raw HTML is skipped, not rendered — including harmless tags like <kbd>. Keep the source pure Markdown, or verify HTML output with a different tool.
• There is no syntax highlighting in code fences: the language tag after the backticks is accepted but styles only a plain monospace block.
• GFM-only syntax — tables, ~~strikethrough~~, - [ ] checkboxes, bare autolinks — will not render in strict CommonMark-only renderers. Know your destination's dialect.
• The download is the raw source under a fixed name (CruxDev-document.md); rename it after saving. There is no HTML export here.

Frequently Asked Questions