AAM Markdown Editor

A full-featured markdown editor available in two editions:

Edition	Stack	Binary size	Runtime
Electron (this folder)	TypeScript + Node.js backend	~150 MB	Bundled Chromium
Tauri (tauri-app/)	Rust backend + OS WebView	~5–10 MB	WKWebView / WebView2

See tauri-app/README-Tauri.md for the Tauri edition.

---

Electron Edition

Features

• Full Markdown Support — Headers H1–H6, lists, code blocks, tables, footnotes, task lists
• Mermaid Diagrams — Flowcharts, sequences, class, state, ER, Gantt, pie — rendered locally (no CDN)
• Live Split-Pane Preview — Real-time rendering side-by-side with the editor
• Full Menu Bar — In-app dropdown menus: File / Edit / Paragraph / Format / View
• Native OS Menu — System menu bar with 30+ items and keyboard shortcuts
• File Operations — New, Open, Save, Save As, Export as self-contained HTML
• Three View Modes — Editor only, Preview only, or Split view
• Syntax Highlighting — Code blocks rendered via highlight.js (no CDN)
• Zoom Controls — 50%–200% zoom on editor and preview content
• macOS Native — Native menu bar, keyboard shortcuts, file dialogs

Quick Start

npm install
npm run dev

For detailed setup: See Docs/Quickstart.md

Keyboard Shortcuts

Shortcut	Action
⌘N	New file
⌘O	Open file
⌘S	Save
⌘⇧S	Save As
⌘E	Export as HTML
⌘B	Bold
⌘I	Italic
⌘K	Insert Link
⌘1–⌘6	Heading 1–6
⌘⇧U	Unordered list
⌘⇧O	Ordered list
⌘⇧E	Editor only
⌘⇧P	Preview only
⌘⇧D	Split view
⌘+ / ⌘-	Zoom in / out
⌘/	Keyboard shortcuts
⌘Q	Quit

Installation

npm install
chmod +x scripts/start.sh scripts/stop.sh

Running

# Development (hot-reload, DevTools open)
npm run dev

# Production
npm run build && npm start

# Detached via scripts
./scripts/start.sh   # start (saves PID to .app.pid)
./scripts/stop.sh    # stop gracefully

All Commands

npm run dev          # Development mode
npm run build        # Production build
npm start            # Run production build
npm run package:mac  # Create .app / .dmg installer
npm test             # Run 43 unit tests
npm run lint         # ESLint check

Mermaid Diagrams

All diagram rendering happens locally — no internet connection required.

```mermaid
graph TD
    A[Start] --> B[Process] --> C[End]
```

Supported types: flowcharts, sequence, class, state, ER, Gantt, pie.

Project Structure

aam-markdown-editor/
├── src/
│   ├── main/           # Electron main process (Node.js/TypeScript)
│   ├── preload/        # Context bridge
│   ├── renderer/       # React UI (App.tsx, components/, styles/)
│   └── lib/            # Shared logic (applyAction.ts)
├── tauri-app/          # Tauri/Rust edition (see tauri-app/README-Tauri.md)
├── Docs/               # Architecture.md, Quickstart.md
├── scripts/            # start.sh, stop.sh, setup-Tauri.sh
└── README.md

Technology

• Electron 27, React 18, TypeScript 5
• Vite (bundler), markdown-it (renderer), Mermaid v10, highlight.js
• Lucide React icons, vitest (43 tests)

Security

• Context isolation enabled, Node integration disabled in renderer
• IPC channel validation in preload
• No hardcoded secrets — use .env (see .env.example)

Troubleshooting

Permission denied on scripts

chmod +x scripts/start.sh scripts/stop.sh scripts/setup-Tauri.sh

Port 3000 in use

lsof -ti:3000 | xargs kill -9

Dependencies broken

rm -rf node_modules package-lock.json && npm install

Mermaid not rendering — open DevTools (⌘⌥I) and check the console for syntax errors in your diagram.

Building for Distribution

npm run build
npm run package:mac   # produces dist/*.dmg

---

License

MIT

---

See Docs/Quickstart.md for a step-by-step guide
See Docs/Architecture.md for technical diagrams
See tauri-app/README-Tauri.md for the Tauri/Rust edition