OnSumoTools

Markdown Live Editor

This tool is a side-by-side Markdown editor and live preview that runs entirely in your browser. Write Markdown on the left and see rendered HTML on the right in real time. The tool supports CommonMark, GitHub Flavored Markdown (GFM) tables and task lists, syntax-highlighted code blocks, and export to HTML or plain text. No content is stored or sent to any server. It is free, requires no login, and works offline once the page loads.

Markdown

Preview

Welcome to the editor

Write Markdown on the left and preview HTML on the right.

Features

  • GitHub Flavored Markdown tables and task lists
  • Export to HTML or download the .md file
  • Sync scroll between panels
Column Value
Flavor GFM
Theme GitHub

Task list

  • Ship the editor
  • Add your notes here

Blockquotes work too.

console.log("Hello from a fenced code block");
56 words · 315 characters · 26 lines

Parsing and preview run in your browser. Markdown is not sent to a server.

How does the Markdown Live Editor work step by step?

The markdown editor renders a live side-by-side preview of your Markdown source using the CommonMark specification with optional GitHub Flavored Markdown (GFM) extensions. GFM adds fenced code blocks with syntax highlighting, strikethrough via double tildes, task list checkboxes, tables with pipe syntax, and auto-linked bare URLs. The renderer processes heading hierarchy, blockquotes, ordered and unordered lists, inline code spans, and fenced code blocks with language identifiers. Syntax highlighting in code blocks covers 180+ languages via the Prism.js grammar library. The editor tracks word count, character count, and estimated reading time calculated at 200 words per minute. Export options include clean HTML with a minimal CSS reset, plain text with Markdown syntax stripped, and PDF via the browser's print-to-PDF path. Key assumption: the preview uses the browser's default font stack and does not replicate rendering on GitHub, Notion, or other platforms, so platform-specific features like GitHub emoji shortcodes or Notion block types will not appear. Edge case: raw HTML blocks embedded directly in Markdown are rendered as-is under CommonMark. If your Markdown source includes script tags or inline event handlers, they execute in the preview pane. Sanitize HTML before pasting untrusted Markdown content into the editor.

What does a typical Markdown Live Editor result look like?

You are drafting a README section with a table and checklist. Write in the editor, confirm the preview, then copy HTML into your docs site or download the .md file for the repo.

Frequently asked questions

  • What is the difference between CommonMark and GitHub Flavored Markdown?

    CommonMark is a standardized specification for Markdown that resolves ambiguities in John Gruber's original specification. It defines precise rules for how parsers must handle every edge case. GitHub Flavored Markdown (GFM) is a superset of CommonMark that adds tables, task lists, strikethrough, and autolinked URLs. This tool supports both: it is CommonMark-compliant by default and adds GFM extensions on top.

  • Does the tool support syntax highlighting in code blocks?

    Yes. Use a fenced code block with a language hint: triple backtick followed by the language name (e.g., javascript or python ). The tool applies syntax highlighting to recognized languages. Supported languages include JavaScript, TypeScript, Python, Rust, Go, Java, C, C++, CSS, HTML, SQL, Bash, YAML, JSON, and about 50 others.

  • Can I export my Markdown to HTML?

    Yes. Use the Export button to download the rendered HTML as a standalone .html file with inline styles. This is useful when you need to share a formatted document with someone who does not have a Markdown renderer, or when you want to paste the HTML into an email client that renders HTML.

  • Is my content saved automatically?

    The tool saves your content to the browser's localStorage so it persists if you accidentally close the tab or navigate away. However, localStorage is specific to the browser and device you are using. If you clear your browser data, the content will be lost. For permanent storage, copy your Markdown to a file or paste it into your text editor before leaving the page.

  • What is the maximum document size?

    There is no hard limit imposed by the tool. The practical limit is your browser's memory. Documents up to 100,000 words render without issue in modern browsers. Very large documents may cause the live preview to lag slightly as the parser runs on every keystroke. If you notice lag, enable \\\"debounce\\\" mode in settings, which delays the re-render until 300ms after you stop typing.

  • Does it support Markdown front matter (YAML metadata blocks)?

    Yes. YAML front matter blocks (content between -- delimiters at the start of the file) are recognized and displayed in a formatted metadata block in the preview rather than being rendered as a horizontal rule and plain text. This is useful when writing content for static site generators like Jekyll, Hugo, or Eleventy that use front matter for page metadata.

Write on the left, see it on the right

Markdown is plain text with a few symbols that turn into headings, lists, links and code. It's what READMEs, docs sites and many note apps use. The editor shows your text next to a live preview, so you see the formatted result as you type.

Scroll sync keeps both panes lined up. Scroll one and the other follows, which is a relief in long documents.

CommonMark and GitHub Flavored Markdown

CommonMark is the strict, agreed baseline for core syntax. GitHub Flavored Markdown, or GFM, builds on it with tables, task lists, strikethrough and automatic links. The editor supports the GFM extras, so a README written here should look the same on GitHub.

  • Tables with pipes and dashes
  • Task lists with - [ ] and - [x]
  • Fenced code blocks with a language name
  • Strikethrough with double tildes

Code blocks

Wrap code in triple backticks and add the language after them. The preview formats it as a code block. Whether colored syntax highlighting shows up depends on the tool, so check the preview when it matters for how you'll publish.

Export when you're done

Download your work as a .md file, or export it as HTML to paste into a page or an email. The HTML output is clean and easy to restyle with your own CSS.

Front matter, the YAML block some static site generators put at the top of a file, is plain text to Markdown. It can show up in the preview as ordinary content, so keep it in mind if you paste a file with front matter.

Saving and privacy

Your text is handled in the browser and isn't uploaded to a server. Don't rely on the page as your only copy. Download the file when you've written something you care about, since clearing browser data can wipe local storage.

Very long documents are limited by your device and browser, not by a fixed rule. If typing starts lagging, split the document into chapters.

Quick habits for better Markdown

Leave a blank line before and after lists and code blocks. It prevents most rendering surprises.

Use one top-level heading per document, then step down in order. Skipping levels confuses readers and screen readers.

Write descriptive link text. "Read the pricing guide" beats "click here."