Markdown Preview: free live editor with math & diagrams

Markdown Preview is a browser-based markdown editor that renders a live preview of your document as you type, supporting math, Mermaid diagrams, callouts, task lists, and slide-style presentations.

What is Markdown Preview?

Markdown Preview is a web app that takes markdown typed into an editor pane and produces a rendered preview in a side-by-side pane that updates as you type. It runs in the browser at mdpreview.jignesh.dev and extends standard markdown with LaTeX math blocks, Mermaid diagram code fences, GitHub-style callouts and task lists, and a slide mode triggered by horizontal rules. The page does not name its author or company.

Key Features

• Live side-by-side preview — the rendered pane updates as you type in the editor, with a line and column indicator (Ln 31, Col 1) and a line count (31 lines).
• LaTeX math blocks — dollar-delimited math such as e^{i\pi} + 1 = 0 renders as a formatted equation.
• Mermaid diagrams — fenced mermaid code blocks render as diagrams, e.g. graph LR producing Write → Preview → Share.
• Callouts — blockquote callouts such as >[!TIP] render as styled tip boxes.
• Task lists — -[x] and -[ ] syntax renders as checkable task items.
• Slide mode — a line of three dashes starts a new slide in present mode.
• Collapsible headings — clicking any heading folds its section.
• Share — the demo flow includes a Share step alongside Write and Preview.

Who is it for?

• Developers and technical writers — drafting README files, docs, and notes that need math or Mermaid diagrams rendered inline.
• Presenters — building slide decks from markdown separated by horizontal rules and presenting them in present mode.
• Students and educators — writing notes with equations and task lists that render immediately.

What can you do with Markdown Preview?

• Write and preview docs: type markdown in the editor and see headings, math, diagrams, callouts, and tasks render in the preview pane as you go.
• Build a slide deck: separate sections with three dashes and present them in present mode.
• Fold long documents: click a heading to collapse its section while editing.
• Share a document: use the Share step in the Write → Preview → Share flow.

How does Markdown Preview work?

The app loads a small demo document on first visit and offers a one-minute tour covering eight quick actions. You type markdown in the editor pane; the preview pane re-renders on each change. A line/column readout and line count sit above the editor, and headings can be clicked to fold their sections.