A browser-based Markdown viewer. Open a local folder, browse files in the sidebar tree, and preview multiple .md files in tabs — all without any build step or installation.
- Folder tree sidebar with drag-to-resize and collapsible toggle
- Multi-tab Markdown preview with scroll position preserved per file
- Syntax highlighting via highlight.js and Prism
- Mermaid diagram rendering (flowchart, sequence, Gantt, etc.)
- Multiple themes with persistent preference
- UI language toggle — Traditional Chinese / English, saved to localStorage
- Accessibility: ARIA labels,
aria-pressedstates,:focus-visiblesupport - Works entirely in the browser — no build step, no server-side code
- Chrome or Edge (requires File System Access API)
- A local HTTP server (required for ES Module support;
file://does not work)
# Clone the repo
git clone https://github.com/your-username/markdown-explorer.git
cd markdown-explorer
# Start a local server (pick any method)
npx serve .
# or
python -m http.server 8000
# or
npm startThen open http://localhost:3000 (or whichever port) in Chrome or Edge.
- Click Open Folder and grant permission
- Click any
.mdfile in the sidebar to open it in a new tab - Drag the sidebar edge to resize, or click the toggle button to collapse it
- Click the sun/moon icon (top-right) to switch themes
- Click the language button (中 / EN) to toggle the UI language
markdown-explorer/
├── index.html # App shell
├── app.js # All application logic
├── styles.css # Styles
├── locales/
│ ├── zh-TW.json # Traditional Chinese strings
│ └── en.json # English strings
├── libs/ # Vendored dependencies (no npm install needed at runtime)
└── docs/ # Design documents
All dependencies are vendored in libs/ — no npm install needed to run the app.
| Package | Version | License |
|---|---|---|
| marked | ^17 | MIT |
| highlight.js | ^11 | BSD-3-Clause |
| Prism | ^1.30 | MIT |
| Mermaid | ^11 | MIT |
MIT © 2026 Hank