How to Write Markdown with Live Preview in Your Browser

Updated

You can write and preview Markdown live in a browser without creating an account. Open markdownviewer.pages.dev, start a blank document or open a local .md/.markdown file, then switch to Split view so the editor and preview sit side by side and formatting updates as you type. This works for GitHub-Flavored Markdown (GFM) with headings, links, tables, task lists, highlighted code, LaTeX math, and Mermaid diagrams. Ordinary editing and autosave stay on your device; sharing, GitHub import, external images, and remote diagram rendering use network services.

Step 1: Get a document into the editor

From the welcome screen you have several entry points:

  • New document — start with a clean Markdown file.
  • Open from device — choose one or more Markdown files from your computer.
  • Import from GitHub — open a file or repository (uses a network service).
  • Welcome template — load an example to explore features.
  • Drag and drop — drop Markdown files, images, GIFs, or videos into the workspace to add them.

You can also paste text directly into the editor. Organize documents into workspaces and folders using the Explorer.

Step 2: Switch between Edit, Split, and Preview

Use the toolbar to change how you see the document:

View What you see When to use it
Edit Editor only Fast typing, large documents
Split Editor and preview side by side Checking formatting as you type
Preview Rendered output only Final review before export or sharing

Split view is the core of live preview: each change in the left pane appears in the right pane immediately.

Step 3: Check GFM syntax in the preview

As you type, confirm these render correctly in the preview pane:

  • Headings (#, ##, …)
  • Links and images
  • Tables
  • Task lists (- [ ] / - [x])
  • Fenced code blocks with syntax highlighting
  • LaTeX math
  • Mermaid diagrams

If a table or diagram doesn't render, check that the fence is closed and the syntax matches GFM or Mermaid conventions. Remote diagram rendering requires a network connection.

Step 4: Export or share the result

When the preview looks right, choose an output:

  • Markdown — download a .md copy to keep as a backup.
  • HTML — rendered page for the web.
  • PDF — fixed-layout document.
  • PNG — image of the rendered output.
  • Share Snapshot — optional sharing of a snapshot.
  • Live Share — optional real-time sharing.

Share Snapshot and Live Share are optional and use network services; skip them if the document should stay local.

Step 5: Protect your work with separate backups

Ordinary editing and autosave stay on this device, which means clearing browser storage can remove locally saved documents. Download a Markdown copy regularly (Step 4) and keep it outside the browser. If you rely on GitHub import or external images, remember those paths depend on network services and won't be available offline.

Common snags

  • Preview not updating — confirm you're in Split or Preview view, not Edit.
  • Diagram or math not rendering — check fence closure and syntax; remote rendering needs a connection.
  • Document missing after clearing browser data — restore from your downloaded Markdown backup.
  • Images broken after moving files — external images load over the network; keep local copies if you need offline access.