Markdown Editor & Live Preview at a glance
- What it does
- Write Markdown and see the rendered result as you type. Learn the syntax with a live preview, then copy the HTML.
- Where it runs
- Entirely in your browser — no data is uploaded
- Works offline
- Yes, once the page has loaded
- Cost
- Free, with no account and no usage limit
- Category
- Developer & Code
How to use the Markdown editor
- Type or paste Markdown into the editor panel.
- Watch the preview update live as you write.
- Copy the rendered HTML when you need to paste formatted content into a CMS or an email template.
The syntax, in one table
| Write | Get |
|---|---|
# Heading | An H1. Repeat the hash up to six times for smaller headings. |
**bold** *italic* | Bold and italic. Underscores work identically. |
[text](https://url) | A link. |
 | An image - same as a link with a leading exclamation mark. |
- item | A bullet list. Use 1. for numbers; indent two spaces to nest. |
> quote | A blockquote. |
| Backtick-wrapped text | Inline code. Three backticks on their own line open a code block. |
--- | A horizontal rule. |
- [ ] task | A checkbox, in GitHub-flavoured Markdown. |
The things that trip people up
Single newlines are ignored. Markdown joins consecutive lines into one paragraph. For a new paragraph leave a blank line; for a line break within a paragraph, end the line with two spaces or a backslash.
Lists need a blank line before them. A list that starts immediately after a paragraph is often absorbed into it.
Indentation is significant. Four leading spaces makes a code block, which surprises people trying to indent a paragraph.
Underscores inside words can accidentally start emphasis - snake_case_name may render oddly. Escape with a backslash or wrap it in backticks.
Flavours of Markdown
John Gruber's original 2004 specification left many cases undefined, so implementations diverged. CommonMark is the modern strict specification that most editors now follow. GitHub Flavored Markdown extends CommonMark with tables, task lists, strikethrough and automatic linking. Other ecosystems add their own: MDX embeds JSX, Obsidian adds wiki-style links, and static site generators layer front matter on top.
The practical consequence is that tables, footnotes and task lists may render on one platform and appear as literal text on another. Headings, emphasis, links, lists and code blocks are safe everywhere.
Where Markdown is the native format
- Code hosting - README files, issues, pull requests and wikis on GitHub, GitLab and Bitbucket.
- Documentation sites - Docusaurus, MkDocs, VitePress and Hugo all take Markdown as input.
- Note apps - Obsidian, Bear and Notion export it; Joplin stores it directly.
- Chat - Slack, Discord and Teams support a subset for message formatting.
- Static blogs - a post is a Markdown file with a small block of metadata at the top.
Writing a README people actually read
The README is the most-read file in most repositories and the least considered. A structure that works, roughly in order:
- One sentence saying what this is, written for someone who has never heard of it. Not a tagline — a description.
- The smallest working example. Code, not prose. Readers scan for this before anything else.
- Installation, in a copyable code block with no placeholders to fill in.
- Why you would use this rather than the obvious alternative. Being honest about where it does not fit builds more trust than a feature list.
- Links to fuller documentation, contributing guidance and the licence.
Two things worth avoiding: a wall of badges above the description, which pushes the actual explanation below the fold; and screenshots that go stale, unless you have a process for updating them.
Front matter and static site generators
Markdown files in a static site carry a metadata block at the top, delimited by three hyphens, called front matter. It is usually YAML.
---
title: How compound interest works
date: 2026-09-09
tags: [finance, explainer]
draft: false
---
The article body starts here.The generator reads that block to build the page title, the URL, tag listings and the ordering of your archive. Which fields are recognised depends entirely on the generator — Hugo, Jekyll, Astro and Eleventy all use different names for similar concepts.
A preview tool renders front matter as ordinary text or hides it, since it is metadata rather than content. If your published page is missing its title, an indentation error in the YAML block is the usual cause: YAML is whitespace-sensitive and fails quietly.
Frequently asked questions
Usually yes - most renderers pass HTML through, which is how people add a centred image or a details block. Some platforms strip it for security, so check before relying on it.
Tables are a GitHub-flavoured extension, not part of the original Markdown. They also need the header separator row of dashes and pipes immediately under the header, and a blank line before the table starts.
No. Rendering happens in your browser and nothing is uploaded. Closing the tab discards the text, so copy anything you want to keep.
Escape it with a backslash - \* - or wrap the text in backticks. For a literal backtick inside inline code, use two backticks as the delimiter.
Nothing you enter here leaves your browser
Markdown Editor & Live Preview does its work in JavaScript running on your own device. The page loads once, and after that there is no upload step and no server involved — which matters here because API responses, tokens and configuration files are exactly the kind of thing that should not be posted to someone else’s server for formatting.
You can verify this rather than taking our word for it: load the page, disconnect from the internet, and the tool keeps working. Our privacy policy sets out what is and is not collected, and this guide explains why the distinction matters.