A sleek, distraction-free Markdown editor
Live preview · Workspace tools · Export · Built with Tauri 2 + React

Features · Documentation · Quick start · Web vs desktop · Contributing

---

Write on the left, preview on the right — with linked selection and scroll sync.

---

About

MDit is a fast, local-first Markdown editor for writers, developers, and document authors. It combines a CodeMirror-powered writing surface with a rich live preview (GFM, KaTeX, Mermaid, SVG) and professional export options.

Available as a native desktop app (Windows) and a web build for quick access in the browser.

Built by Omar S. M. Abdelfatah

---

Features

Writing & preview Live split preview with GFM KaTeX math & Mermaid diagrams Wiki links ([[page]]) in workspace Slash commands, Markdown lint, Vim keymap YAML front matter & document outline Presentation slide mode	Workspace (desktop) Open project folders with file tree Workspace search across all .md files Git status panel for changed files GitHub import — file, Gist, or repo Snapshots, pinned tabs, split editor
Export Self-contained HTML Word (.doc) & ODT Print / PDF Publish workspace as static site Custom preview CSS	Productivity Command palette & templates Customizable keyboard shortcuts Auto-save & session restore Focus mode, light/dark theme High contrast & reduced motion

---

Architecture

flowchart TB
  WB[Web Browser] --> UI[React Frontend]
  WV[WebView2 + Tauri 2] --> UI
  UI --> BA[Browser APIs]
  UI --> TR[Tauri IPC + Rust]
  BA --> OS[Local disk / Git]
  TR --> OS

Loading

Both targets share one React frontend. The web build runs in the browser with limited file APIs; the desktop build hosts the same UI in WebView2 and calls Rust commands via Tauri for folders, Git, search, and native dialogs.

Layer	Technology
UI	React 18, TypeScript, Zustand
Editor	CodeMirror 6
Preview	remark, rehype, KaTeX, Mermaid
Desktop	Tauri 2, Rust, WebView2

---

Web vs desktop

Capability	Web	Desktop
Edit & preview markdown	✅	✅
Open single files	✅	✅
GitHub URL import	✅	✅
Open folder / file tree	❌	✅
Workspace search	❌	✅
Git panel	❌	✅
File associations (.md)	❌	✅

→ Full comparison: docs/getting-started/web-vs-desktop.md

---

Quick start

Prerequisites

• Node.js 18+
• Rust + VS Build Tools (desktop only)

Install & run

git clone https://github.com/OmarSharaf/MDit.git
cd MDit
npm install

Web (development):

npm run dev
# → http://localhost:1420

Desktop (development):

npm run tauri dev

Production builds:

npm run build          # web → dist/
npm run tauri build    # desktop → src-tauri/target/release/bundle/

→ Detailed guide: docs/development/setup.md

---

Documentation

Full documentation lives in the docs/ folder.

Section	Description
📖 Documentation index	Start here
Getting started	Install, quick start, web vs desktop
User guide	Interface, writing, workspace, export, settings
Reference	Shortcuts & command palette
Development	Setup, structure, building releases
Contributing	How to contribute

---

Keyboard shortcuts

Action	Shortcut
New file	Ctrl+N
Open file	Ctrl+O
Save	Ctrl+S
Command palette	Ctrl+Shift+P
Workspace search	Ctrl+Shift+F (desktop)
Snapshots	Ctrl+Shift+K
Toggle sidebar	Ctrl+\
Focus mode	F11

→ Full list: docs/reference/keyboard-shortcuts.md

---

Project structure

MDit/
├── docs/              # Documentation & SVG assets
├── src/               # React frontend
├── src-tauri/         # Tauri / Rust backend
├── README.md
└── LICENSE

→ Details: docs/development/project-structure.md

---

Contributing

Contributions are welcome! Please read docs/contributing.md before opening a pull request.

1. Fork the repo
2. Create a feature branch
3. Make your changes and test (npm run build)
4. Open a pull request

---

License

This project is licensed under the MIT License.

---

MDit · Markdown, done well.
omarsharaf.me