https://github.com/peab-dev/md.view
Lightweight Markdown viewer — macOS app + browser webview, shared rendering core
https://github.com/peab-dev/md.view
markdown markdown-viewer md
Last synced: about 1 month ago
JSON representation
Lightweight Markdown viewer — macOS app + browser webview, shared rendering core
- Host: GitHub
- URL: https://github.com/peab-dev/md.view
- Owner: peab-dev
- Created: 2026-05-24T18:14:45.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-24T18:30:14.000Z (about 1 month ago)
- Last Synced: 2026-05-24T20:24:37.927Z (about 1 month ago)
- Topics: markdown, markdown-viewer, md
- Language: TypeScript
- Homepage:
- Size: 3.82 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# md.view
Leichtgewichtiger Markdown-Viewer — als macOS-App und als Browser-Webview.
Pixel-identische Darstellung über beide Targets via gemeinsamem Rendering-Core.
---
## Features
- **CommonMark + GFM** — Tabellen, Task-Lists, Strikethrough, Footnotes
- **Syntax-Highlighting** via [Shiki](https://shiki.style/) — VS-Code-Optik, präzise Grammatiken
- **GitHub-Style Rendering** — vertraut, lesbar, konservativ
- **TOC-Sidebar** mit Klick-Scroll und Scroll-Spy
- **Live-Reload** bei Datei-Änderungen (Mac-App)
- **Dark Mode** — folgt automatisch dem OS-Setting
- **Drag & Drop** — `.md`-Datei auf das App-Icon oder ins Fenster
- **Lokal & privat** — Web-Version lädt nichts hoch, alles bleibt im Browser
- **Native macOS-Integration** — `.md`-Dateien werden im Finder mit dem App-Icon angezeigt
## Architektur
Monorepo, npm workspaces. Vier Pakete, zwei Ziele:
| Pfad | Zweck |
|---|---|
| `packages/core` | Markdown → HTML Rendering (markdown-it + Shiki) |
| `packages/ui` | Geteilte UI — HTML-Skelett, Sidebar, `mountViewer()` |
| `apps/mac` | Electron-App, baut `md.view.app` |
| `apps/web` | Statische Browser-App für `md.view` |
Der gemeinsame `core` + `ui` garantiert, dass Mac-App und Browser-Build **identisch** rendern — kein Drift zwischen Targets.
## Quickstart
```bash
# 1) Repo klonen
git clone https://github.com/peab-dev/md.view.git
cd md.view
# 2) Dependencies installieren (npm workspaces)
npm install
# 3a) Web-Viewer im Dev-Modus starten
npm run dev:web
# → http://localhost:5173
# 3b) Mac-App im Dev-Modus starten
npm run dev:mac
# → Electron-Fenster mit Hot-Reload
```
### Produktions-Builds
```bash
# Web — statische Dateien in apps/web/dist/
npm run build:web
# Mac — signierte .dmg + .zip in apps/mac/release/
npm run build:mac
# Beides
npm run build:all
```
Die fertige `md.view.app` aus `apps/mac/release/` kann nach `/Applications` gezogen werden. Danach öffnet ein Doppelklick auf jede `.md`-Datei im Finder den Viewer; das Doc-Icon wird ebenfalls gebrandet.
## Verwendung
### Web
```bash
npm run dev:web
```
Drop a `.md` file onto the page, or use the file picker. Alles passiert lokal — kein Upload, keine Telemetrie.
### macOS
- `⌘O` — Datei öffnen
- Drag & Drop ins Fenster oder auf das Dock-Icon
- Auto-Reload bei Änderungen der geöffneten Datei
- `⌘W` schließt das Fenster, `⌘Q` beendet die App
## Tech-Stack
- **TypeScript** — strikt, monorepo-weit
- **markdown-it** — robuster CommonMark-Parser mit GFM-Plugins
- **Shiki** — TextMate-Grammatiken, WASM-basiert (CSP-konform)
- **Vite** — Dev-Server & Bundler
- **Electron 32** — macOS-Wrapper
- **electron-builder** — Code-Signing, DMG, `.icns`, File-Associations
## Projekt-Struktur
```
md.view/
├── apps/
│ ├── mac/ # Electron-App
│ │ ├── src/main/ # Main-Prozess (window, file watcher, IPC)
│ │ ├── src/preload/ # Kontextisolierte Bridge
│ │ ├── src/renderer/ # Renderer (HTML + UI-Mount)
│ │ └── electron-builder.yml
│ └── web/ # Statischer Browser-Build
├── packages/
│ ├── core/ # renderMarkdown(src) → HTML
│ └── ui/ # mountViewer(root), Sidebar, Styles
├── resources/ # icon.icns, icon-doc.icns, logo PNGs
└── examples/ # Beispiel-Markdown-Dateien
```
## Entwicklung
```bash
# Einzelpakete bauen
npm run build:core
npm run build:ui
# TypeScript-Watch im einzelnen Workspace
npm run dev -w packages/core
```
Bei Änderungen am `core` oder `ui` Paket muss in den meisten Fällen einmal gebaut werden, damit die Apps die neuen Outputs sehen — Vite löst die Workspace-Symlinks gegen die `dist/` der Pakete auf.
## Lizenz
MIT © Peter
---
Made with .md in mind.