Utilia

Markdown Editor and Previewer

Write Markdown with a live, sanitized preview, GitHub Flavored Markdown tables and task lists, word count, autosave, and export to .md or standalone .html.

Preview

Words
0
Characters
0
Reading time
0 min

How to use the Markdown editor

  1. Write or paste Markdown in the Markdown box. The Preview next to it (below it on a phone) updates as you type.
  2. Use the Formatting buttons (Bold, Italic, Heading, Link, List, Quote, Code) to wrap the selected text, or press Ctrl+B / Ctrl+I (⌘B / ⌘I on a Mac).
  3. Keep GitHub Flavored Markdown (tables, task lists, \~\~strikethrough\~\~, autolinks) ticked for the syntax used on GitHub, or untick it for plain CommonMark-style Markdown.
  4. When you’re done, click Copy HTML to paste the HTML into a CMS or an email template, Download .md to save the Markdown source, or Download .html to get a complete web page.

The counters under the editor show the Words and Characters of your document and an estimated Reading time at 200 words per minute. Words are counted in the rendered text, so Markdown symbols such as # or ** don’t inflate the count.

Autosave in your browser

With Autosave in this browser ticked, your draft is saved a moment after you stop typing, in your browser’s local storage on this device. When you come back, the last draft is restored. Nothing is sent to a server, so the draft doesn’t follow you to another browser or device. In private browsing, or if storage is full or blocked, the tool tells you autosave is unavailable: download your text to keep it. Unticking the option deletes the saved draft.

Markdown cheat sheet

  • Headings: # Title, ## Section, ### Subsection
  • Emphasis: **bold**, _italic_, ~~strikethrough~~ (GFM)
  • Links: [text](https://example.com); with GFM, bare URLs become links too
  • Images: ![description](data:image/png;base64,…)
  • Lists: - item or 1. item; task lists with - [ ] and - [x] (GFM)
  • Quotes: > quoted text
  • Code: `inline` or a block between two lines of three backticks
  • Tables (GFM): a header row, a | --- | --- | line, then one row per line

Safety of the preview and the export

Markdown can contain raw HTML, which could hide scripts. Every time the preview is refreshed, the HTML produced by the Markdown engine is cleaned with DOMPurify before it is displayed: scripts, event handlers such as onclick, javascript: links, inline styles, forms, frames and embedded media are removed. Links open in a new tab. The same cleaned HTML is used by Copy HTML and Download .html, so you can paste it into other pages with confidence.

The preview only displays images embedded as data: or blob: URLs. Remote images, such as https://…/photo.jpg, are never loaded: this page’s security policy blocks them, and it also means the preview can’t be used to track you. The tool tells you how many images it couldn’t show. The Markdown you download keeps the original image links, so they will work wherever you publish it.

The .html file is a standalone page with a small built-in stylesheet (readable fonts, tables, code blocks and a dark mode). Its title comes from the first heading of your document, which also names the downloaded files.

Frequently asked questions

What is GitHub Flavored Markdown?

GFM is the Markdown dialect used on GitHub and many other sites. It adds tables, task lists, strikethrough and automatic links to the basic syntax. Untick the option to see how your text renders without these extensions.

Can I use HTML inside my Markdown?

Yes, basic HTML such as <details>, <sup> or <kbd> works. Anything unsafe is removed, as are styles and media tags.

Why doesn't my image appear?

Only data: and blob: images are shown in the preview; remote images are blocked. The link stays in your Markdown and works once published.

Is my document private?

Yes. Rendering, export and autosave all happen in your browser. The draft is stored only on this device, and you can turn autosave off at any time.

Which Markdown engine is used?

The tool uses marked, a fast and widely used Markdown parser, and DOMPurify to clean the HTML. Both are loaded only when the editor starts.