FormatFlow

Markdown Editor Online: Split-Pane Live Preview & HTML Exporter

Write and preview GitHub-flavored Markdown with synced scrolling, syntax formatting tools, word count, local draft autosave, and sanitized HTML/PDF export.

Markdown Source85 words | 756 characters
Live Rendered Preview (DOMPurify Sanitized)

FormatFlow: Markdown Live Editor



Welcome to FormatFlow's privacy-first GitHub-flavored Markdown editor.

Interactive Features

Split-pane real-time rendering
Automatic DOMPurify sanitization against XSS attacks
Export directly to printable PDF with selectable text
Local autosave drafts in browser memory


Sample GFM Table

FeatureSupportedPrivacy Standard
GFM TablesYes100% Local
StrikethroughObsolete YesZero Uploads
Task ChecklistsYesClient-side


"FormatFlow guarantees your documentation and private notes never leave your personal computer."


interface UserConfig {
theme: 'light' | 'dark' | 'system';
autosave: boolean;
}
Drop file here or click to upload (up to 5 MB)

How to Use Markdown Editor Online

  1. Type or paste Markdown into the left editor pane.
  2. View the live rendered GitHub-Flavored Markdown preview on the right pane in real-time.
  3. Use the top toolbar to insert headings, bold, italics, tables, code blocks, blockquotes, and task checklists.
  4. Export your document to Markdown (.md), clean HTML, or print to PDF with selectable text.

Practical Examples

GitHub-Flavored Tables & Checklists

Renders full CommonMark and GFM specifications.

Input:
| Item | Status |
| --- | --- |
| Test | Complete |
Output:
Rendered responsive table

Common Mistakes & Troubleshooting

  • Missing blank lines around headers or tables: CommonMark requires an empty blank line before and after tables and lists.
  • Relying on unsafe renderers: FormatFlow sanitizes all rendered preview HTML using DOMPurify, stripping script injections and malicious attributes.

Frequently Asked Questions

What is GitHub Flavored Markdown (GFM)?

GFM is an extended specification of standard CommonMark created by GitHub. It adds native support for visual tables, strikethrough (~~text~~), task checklists (- [x]), URL autolinking, and fenced code blocks with language syntax highlighting.

How do I add hidden comments in Markdown?

Because Markdown supports embedded HTML, you can insert hidden comments using standard HTML comment tags: <!-- your note here -->. These comments remain in the source text but are excluded from the rendered preview and printed output.

Can I use raw HTML inside Markdown?

Yes! Standard Markdown allows raw HTML blocks for customized layouts, center alignment, or tags like <kbd>, <sub>, and <details>. FormatFlow automatically sanitizes rendered HTML using DOMPurify to eliminate script injection risks.

How do I export my Markdown to PDF?

Click the "Print / Export PDF" button. A print dialog opens with our custom print stylesheet that renders clean, formatted typography with selectable, searchable text.

Are my notes and drafts saved locally?

Yes! FormatFlow automatically persists your current draft in safe browser local storage so your document is preserved across page refreshes.