OnSumo Tools

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

Markdown Live 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");
55 words · 314 characters · 26 lines

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

How this tool works

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.

Worked example

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.