Markdown Viewer & Reader – mdedit.ai

Beautifully render Markdown files in VS Code with a live preview panel, syntax highlighting, diagrams, and more.

A fast Markdown viewer that instantly renders your .md files into a clean reading experience, right inside your editor.

Install

VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=mdeditai.mdedit-vscode-extension
Open VSX (Cursor/VSCodium): https://open-vsx.org/extension/mdeditai/mdedit-vscode-extension

Features

Live preview: side-by-side panel that updates as you type
GitHub-style Markdown (GFM): tables, task lists, strikethrough, autolinks
Math rendering: inline and block LaTeX via KaTeX
Diagram support: Mermaid, Graphviz, and Mindmap / Markmap diagrams
Code syntax highlighting: all major languages
Local image support: relative image paths resolve correctly
Export: export to HTML or PDF
Bidirectional documents: follows the writing direction saved in the Markdown file, detects direction automatically, or uses your preferred direction for a folder or workspace
Light / dark theme: follows your VS Code color theme automatically
Works offline: no internet connection required
Open in mdedit.ai: continue editing the current document in the full mdedit.ai web app, no account required, no copy/paste needed

Screenshots

Live Markdown source and preview

Mermaid architecture and sequence diagrams

HTML and PDF export commands

Usage

Open any .md file in VS Code.
Click the preview icon in the editor title bar, or open the Command Palette and run "Markdown Viewer & Reader: Open Markdown Preview".
The preview panel opens to the side and stays in sync as you edit.

Export

Open the Command Palette and run one of:

Markdown Viewer & Reader: Export to HTML: saves a styled .html file (with images rewritten to file:// URLs when possible).
Markdown Viewer & Reader: Export to PDF: opens a temporary HTML export in your default browser and triggers the print dialog (use “Save as PDF”).

Tip: These commands are also available from the editor title bar when a Markdown file is active.

Open in mdedit.ai

Open the Command Palette (or the editor title bar icon) and run "Markdown Viewer & Reader: Open in mdedit.ai". This opens a new mdedit.ai draft in your browser with the current document already loaded - no copying, pasting, or clipboard permissions involved (the document travels directly in the URL, which is never sent to any server). No account or sign-in is required - the draft is saved in your browser only until you choose to create an account to keep it. Documents over about 150 KB are too large for this handoff and are skipped with a message explaining why.

Settings

All settings live under Markdown Viewer & Reader in VS Code settings (Cmd/Ctrl+,, then search mdedit.preview), and are also editable directly in settings.json. They can be set per-workspace as well as globally.

Setting	Default	Description
`mdedit.preview.textDirection`	`document`	Writing direction. Follows the direction saved in the Markdown file (or auto-detects when none is set) by default; force left-to-right or right-to-left instead. Applies to the preview, HTML export, and PDF export.
`mdedit.preview.fontSize`	`16`	Base font size (px) of the rendered preview.
`mdedit.preview.maxWidth`	`860`	Maximum content width (px) of the rendered preview.
`mdedit.preview.documentTheme`	`pastel`	Document color theme applied to Mermaid and Graphviz diagrams (matches the themes in the mdedit.ai editor: Pastel, Pastel Dark, Openhearted v2, Neo, Neo Dark, Editorial).
`mdedit.preview.documentLook`	`classic`	Visual "look" applied alongside the document theme to diagrams: Classic, hand-drawn pencil, watercolor, crayon, chalkboard, blueprint, ballpoint sketch or risograph.
`mdedit.preview.codeWrapLines`	`true`	Wrap long lines inside code blocks instead of scrolling horizontally.
`mdedit.preview.codeShowLineNumbers`	`true`	Show line numbers in the gutter of code blocks.

The preview panel picks up setting changes live - no reload required. Settings other than textDirection do not affect HTML/PDF export sizing, which is optimized for print/paper widths.

Privacy

No data is sent to any server. All rendering happens locally inside the VS Code webview sandbox.

Built by mdedit.ai, the AI-powered Markdown editor for technical writers.