Markdown Notes & Live Preview

Markdown notes and preview in the browser

Markdown is a plain-text format that converts to structured HTML for docs, README files, and quick notes. This page combines a note list, local autosave, a formatting toolbar, and a live preview so you can draft, organize, and sanity-check headings, lists, and links before copying HTML or exporting a file.

Because conversion and storage run locally, you can keep meeting notes, tickets, or drafts without sending them over the network—useful when content is sensitive or you are offline. Back up with Export all before clearing browser data or switching devices.

How to use this tool

1. Choose a note from the Note menu or click New note. Rename it with the title field; content saves in this browser automatically.
2. Use Format buttons to insert Markdown, or type by hand in the editor. The live preview updates shortly after you stop typing (within supported syntax).
3. On small screens, use the Code and Preview tabs to switch panes—same pattern as the HTML editor.
4. Import adds a .md file as a new note or restores a JSON backup (with confirmation). Export note saves the active note; Export all downloads every note.
5. Use Copy HTML or Copy Markdown, or Paste from the clipboard. Sample loads an example; Clear empties the current note body.

Supported syntax (at a glance)

• Block:ATX headings (# through ######), unordered and ordered lists, blockquotes (>), horizontal rules (---), fenced code blocks, and paragraphs separated by blank lines.
• Inline: **bold**, *italic*, `code`, links [text](url), and images ![alt](url).
• Not supported: HTML passthrough, tables, GFM task lists, and many spec edge cases—use a full Markdown engine in your build pipeline when you need those.

When to use notes and preview together

README files, changelog entries, and support macros often mix Markdown with product-specific quirks. A quick preview catches broken list indentation, accidental heading levels, and link typos before they land in a repo or help center.

Pair this page with the text diff tool when you are reviewing edits between two Markdown snapshots, or the HTML editor if you need to adjust tags after export.