Markdown Editor / Preview

About Markdown

Markdown is a plain-text formatting syntax created by John Gruber and Aaron Swartz in 2004. The goal was to let writers produce structured HTML without learning HTML: a hash sign for a heading, a single asterisk for italic, two for bold, dashes for a list. Twenty years later Markdown is the default writing format for GitHub README files, technical documentation (MkDocs, Docusaurus, GitBook), static-site generators (Hugo, Jekyll, Next.js MDX), note-taking apps (Obsidian, Bear, Notion exports), and messaging platforms (Discord, Slack, Reddit). The CommonMark specification finalised in 2014 standardised parsing rules so every renderer produces the same HTML.

This editor renders GitHub Flavored Markdown (GFM): the CommonMark core plus tables, task list checkboxes, autolinks, and strikethrough. Everything happens client-side in JavaScript; no text is sent to any server. The split-pane layout lets you see formatting decisions in real time and catch syntax mistakes (a missing closing fence, an unbalanced asterisk) before they propagate into a README or blog post.

How the live preview works

Markdown source  --(parser)-->  AST  --(renderer)-->  HTML

Parser:    CommonMark-compatible tokenizer
           (headings, emphasis, lists, code, links, images,
            tables, task lists, blockquotes)

Renderer:  HTML output with semantic tags
           (h1-h6, ul/ol/li, code/pre, blockquote, table,
            input checkbox for task lists)

Each keystroke triggers re-parse and re-render. Time is < 5 ms
for documents under ~100 KB; the AST is regenerated on every
update so partial-edit caching is unnecessary at this size.

• Fenced code blocks use triple backticks. Add a language hint (js, python, sql) for syntax-highlight tagging.
• Tables use pipe separators with a dash-only separator row between header and body.
• Task lists use - [ ] for unchecked and - [x] for checked items.
• Inline HTML passes through unchanged. Useful for custom callouts or details/summary collapsibles.

Worked example: writing a README in 30 seconds

You want a README with a title, intro paragraph, install command, and feature checklist.

1. Type # MyProject and press enter. Preview renders an H1 heading.
2. Add a paragraph: MyProject is a fast static-site generator.
3. Add an install fenced block: triple backtick, then npm install myproject, then triple backtick close.
4. Add a feature checklist: - [x] Fast builds, - [x] Live reload, - [ ] Plugin system.
5. Export the HTML and commit the .md source. GitHub will render the same output.

Markdown syntax cheat sheet

Common pitfalls writing Markdown

• Missing blank lines. Headings, paragraphs, lists, and code blocks need a blank line above and below. Without it, the parser sticks them to the previous block.
• Tab vs space indentation. Use 2 or 4 spaces consistently for nested lists. Mixed tabs and spaces produce inconsistent indentation across renderers.
• Unmatched code fences. A triple-backtick block that never closes consumes the rest of the document. Always pair open with close.
• Raw HTML inside Markdown. GFM allows pass-through HTML but disallows tags like <script> and <style> for security.
• Pipe characters inside table cells. Escape them with a backslash (\|) or the table parser will split the cell.
• Bold inside list items. - **item** works; -**item** (no space) does not parse as a list at all.

Related calculators on 3Tej

Frequently asked questions