A single-file HTML viewer for browsing local markdown files in your browser. Drop your .md files into a folder, list them in reader.html, run a small local server, and you have a clean rendered library of your writing — light/dark mode, math, code blocks, and tables all included.
No build step. No dependencies you have to install. Just one HTML file, your markdown, and a static server.
git clone https://github.com/ipfsnut/MDViewer.git
cd MDViewer
python3 -m http.server 8000Then open http://localhost:8000/reader.html in your browser. You'll see the example documents as a starting point.
Open reader.html in any text editor and find the section labeled CONFIGURATION near the top of the <script> block. Edit the documents array:
const documents = [
{
category: "My Section",
items: [
{ slug: "first-post",
file: "posts/first-post.md",
title: "My First Post",
desc: "A short description shown under the title" },
{ slug: "second-post",
file: "posts/second-post.md",
title: "Another Post",
desc: "..." },
]
},
];file paths are relative to reader.html. Subfolders are fine.
You can also customize the hero text:
const CONFIG = {
siteTitle: "Your Library Name",
siteSubtitle: "Tagline or description",
tabTitle: "Library — browser tab title",
storageKey: "mylib-theme", // change if hosting multiple readers
};- All standard markdown: headings, lists, blockquotes, tables, code blocks
- LaTeX math via KaTeX (
$inline$and$$display$$) - Light and dark themes (toggle in the top right)
- URL hash navigation (deep-link to specific docs, back button works)
- Syntax highlighting in code blocks (monospace only)
- Footnote syntax (
[^1]) — use HTML<sup>tags or parenthetical asides - Mermaid diagrams or other rendered visualizations
These could all be added by including additional CDN scripts in the <head> of reader.html. The architecture is intentionally minimal so the file stays under 1,000 lines.
Modern browsers block fetch() from file:// URLs for security reasons. Any tiny static server works:
# Python
python3 -m http.server 8000
# Node (if you have npx)
npx http-server -p 8000
# PHP
php -S localhost:8000
# Caddy (if installed)
caddy file-server --listen :8000Pick whichever you have. They all do the same thing — serve the current directory over HTTP so the browser can fetch your .md files.
All colors live in CSS variables at the top of the <style> block in reader.html:
:root {
--bg: #fafafa;
--fg: #1a1a1a;
--link: #2a5db0;
/* …and more */
}
[data-theme="dark"] {
--bg: #141414;
--fg: #d4d4d4;
--link: #6a9fd8;
/* …and more */
}Edit either palette to taste. The variables are consistent — change --bg and the entire app's background updates.
To change the typeface, find the body { font-family: 'Georgia', serif; } rule near the top of the styles. Replace with whatever you like.
markdown-reader/
├── reader.html ← the viewer (the only file you really need)
├── README.md ← this file
├── LICENSE ← MIT
└── example/ ← sample documents to demo what renders
├── welcome.md
└── about.md
When using this for your own writing, replace the example/ folder with whatever directory structure makes sense for your documents, and update the documents array in reader.html to point at them.
MIT. See LICENSE. Use it, fork it, modify it, share it, charge for it — no restrictions.
This reader is intended for rendering your own markdown — drafts, notes, papers you've written, output from your local LLM that you're reviewing. It's not designed to safely display markdown from untrusted sources, since rendered markdown can include arbitrary HTML. If that becomes a use case for you, fork it and add DOMPurify to the render pipeline.
Built on marked.js and KaTeX. Both loaded from CDN so no installation step.