Markdown Editor & Previewer
Write Markdown with a live GitHub-flavoured preview, a formatting toolbar, and export to HTML or PDF
How it works
Write in the left pane and the right pane renders as you type, using GitHub-flavoured Markdown: headings with anchor ids, emphasis, links, images, block quotes, ordered, bulleted and task lists, tables with alignment, footnote-free autolinks, and fenced code blocks highlighted for JavaScript, TypeScript, JSON, Python, Go, Rust, Java, C, SQL, Bash, CSS, HTML/XML, YAML, Markdown and diffs. The toolbar wraps or prefixes the current selection — bold, italic, strikethrough, headings, quote, lists, task list, link, image, code, table, rule — and ⌘B, ⌘I, ⌘K and Tab/Shift-Tab work in the editor. Scrolling is synchronised between the panes; an Outline lists the headings and jumps to them. Raw HTML in the source is sanitised before rendering, so pasted documents can't run scripts. The draft is saved in your browser as you type and restored on your next visit; Load sample and Clear are one click. Export the Markdown, the rendered HTML fragment, a standalone .html file with styles, or print to PDF. Share carries the whole document compressed in the link. Code blocks carry a language label and a copy button, Mermaid fences are drawn as diagrams (lazily, cached, in the site’s theme), GitHub-style alerts — [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION] — render as callouts, headings get hover anchors and tables scroll in their own box. The preview can fill the browser window or go full screen for reading, and a share link carries the view, the outline and that choice softly, so the document still opens if those ever change. Annotate lets you review a document in the preview: select any stretch of text and a small bar offers a highlight in yellow, red, green or blue, or a comment; every annotation ends in a numbered marker, clicking a mark opens its comment, colour, resolved state and removal, and the Annotate panel lists them all in document order, jumps to each, hides the marks, copies them as a Markdown list or clears them. Annotations are anchored to the quoted text and its surroundings, so they follow the text when the document is edited around them and are listed as lost rather than misplaced if it disappears; they are saved with the draft, travel in the share link, and the exported HTML and the printout keep the highlights and end with the numbered list.
Questions
Which Markdown features are supported?
CommonMark plus GitHub extensions: tables with column alignment, task lists, strikethrough, autolinked URLs, fenced code blocks with language highlighting, and headings that get anchor ids. Raw HTML is allowed but sanitised (no scripts, no event handlers).
Where is my document stored?
Only in your browser. The draft is autosaved to local storage on this device and restored when you come back; nothing is uploaded. Clear removes the draft. Share puts the document, compressed, into the link itself.
How do I get a PDF?
Use Print / PDF — it opens the rendered document in a print view; choose “Save as PDF” in the print dialog. Download .html gives the same styled document as a file.
Are there keyboard shortcuts?
⌘B / Ctrl+B for bold, ⌘I / Ctrl+I for italic, ⌘K / Ctrl+K to insert a link, Tab and Shift+Tab to indent or outdent the selected lines. Toolbar buttons toggle: applying bold to bold text removes it.
Can I paste HTML into the source?
Yes, Markdown allows inline HTML and it will render, but it is sanitised first — script tags, inline event handlers and javascript: links are removed, and external links open in a new tab with rel="noopener".
How do annotations work, and do they survive edits?
Select text in the preview and pick a highlight colour or Comment from the bar that appears; a numbered marker follows the highlighted stretch. Click a mark to edit the comment, change its colour, mark it resolved or remove it (Delete also removes the selected one), and open Annotate for the full list. Each annotation remembers the quoted text with a little of what surrounds it, so when the document changes the mark is found again by its text rather than its position; if the text is gone the annotation is listed as lost until you remove it. Annotations are saved with the draft, travel in the share link, and appear in the downloaded HTML and the printout as highlights plus a numbered list at the end.