DevToolsmith

Markdown Preview

Write Markdown with GFM tables, task lists, Mermaid diagrams and LaTeX math. Preview it live, edit a selected equation in the formula editor, then download the result as HTML or Markdown.

Runs 100% in your browser — nothing is uploaded

Markdown · 125 words
Tip: drop a file here759 chars · 763 bytes · 35 lines
Preview

Updating preview…

Math: $…$ inline, $$…$$ or \[…\] on separate lines, and fenced math blocks. Select a complete formula to edit it in LaTeX and return here. HTML exports use native MathML, supported by modern browsers.

Markdown cheat sheet

You typeYou get
# Heading 1 … ###### Heading 6Headings
**bold**, _italic_, ~~strike~~bold, italic, strike
[text](https://example.com)A link
![alt text](image.png)An image
- item or 1. itemBulleted or numbered list (indent 2–4 spaces to nest)
- [ ] todo, - [x] doneTask list (GFM)
> quoteBlockquote
`code`Inline code
```js … ```Code block with a language for syntax highlighting
```mermaid … ```A Mermaid diagram: flowchart, sequence, ER, Gantt and more
$x^2$ or \(x^2\)Inline math when Math formulas is on
$$ … $$ on separate lines, or a math code blockA display equation
---Horizontal rule
| a | b | + |---|---|Table (GFM)

Rendering Markdown in your own code

JavaScript (marked + DOMPurify)
import { marked } from 'marked';
import DOMPurify from 'dompurify';

const html = DOMPurify.sanitize(marked.parse(markdown));
element.innerHTML = html;
Python (markdown-it-py)
from markdown_it import MarkdownIt

md = MarkdownIt("gfm-like")
html = md.render(text)

Drawing diagrams? The Mermaid editor exports them as SVG or PNG. Need just the HTML? Use Markdown to HTML. Going the other way, from a web page to Markdown? Use HTML to Markdown.

For a manually arranged architecture sketch, use the local Excalidraw whiteboard. To prepare a readable URL segment for a document, try Slug Generator; check for collisions in your publishing system before using the slug.

Frequently asked questions

Is this the same Markdown as GitHub?

Close. GitHub Flavored Markdown enables tables, task lists, strikethrough and autolinks. Mermaid code blocks render as diagrams. The separate Math formulas option renders LaTeX with KaTeX. GitHub additionally provides emoji shortcodes, mentions, issue references and its own math parsing rules, so edge cases can differ.

Why don’t my line breaks show up?

In standard Markdown, a single line break inside a paragraph is treated as a space, so text reflows. End a line with two spaces or a backslash to force a break, leave a blank line to start a new paragraph, or turn on “Line breaks” to treat every newline as a break, the way GitHub comments and issues do.

Is it safe to preview Markdown from someone else?

Yes. Markdown can contain raw HTML, including scripts. The preview is sanitized with DOMPurify, which removes scripts, event handlers like onerror and javascript: links before anything is displayed. The HTML code view shows the unsanitized output, so sanitize it on your side too if you publish user content.

Is my document saved or uploaded?

Nothing is uploaded; rendering happens in your browser. The text isn’t stored either, so download it as .md or use Share link, which puts the document in the link itself (after the #, which browsers never send to a server).

How do I add a Mermaid diagram to Markdown?

Put the diagram in a fenced code block with the language mermaid: a line with ```mermaid, the diagram (for example flowchart LR and A --> B), then a closing ```. The preview draws it, just like GitHub, GitLab and many docs sites do. If the syntax is wrong, the block stays as code; hover it to see the error, or debug it in the Mermaid editor. The downloaded HTML keeps the block as code, so add Mermaid’s script to the page to draw it there.

How do I write and edit a math formula?

Turn on Math formulas. Use $…$ or \(…\) inline, $$…$$ or \[…\] on separate lines for display math, or a fenced code block with the language math. Formulas inside ordinary code blocks remain code. Select a whole formula in the source and choose Edit selected math to edit it in the LaTeX tool, then Return to Markdown. HTML exports use native MathML and need no external math script or fonts. Up to 200 expressions and 100,000 math characters are rendered per document; each expression is limited to 10,000 characters.

How do I make a table in Markdown?

Separate cells with pipes and put a line of dashes under the header: | Name | Age | on the first line, |---|---| on the second, then one row per line. Colons in the dash line set alignment (:-- left, :-: center, --: right). The Markdown table generator builds this for you from a grid or a spreadsheet.