The problem isn’t Markdown. It’s everything around Markdown.
You open VS Code to write a README. Then you need an AI assistant — new tab. Grammar check — another tab. You want a Mermaid diagram — different tool. Need a quick preview? Open another window. Managing multiple docs? Now you’re juggling files across three apps.
By the time you start writing, you’ve already lost 10 minutes and half your focus.
I got tired of this. So I built Mark Viewer.
What Is Mark Viewer?
Mark Viewer is a zero-install, zero-backend Markdown IDE that runs entirely in your browser. One URL. No signup. No subscriptions. No server dependencies.
It’s also available as a native desktop app via Tauri — 18MB, not the 300MB Electron tax.
It combines everything you need for serious documentation work into one surface:
- Full-featured editor
- Live preview
- AI assistant
- Diagrams
- File management
- Analytics
No context switching. No tab hell.
The Feature Stack
⚡ Live Edit + Live Preview
The editor runs on CodeMirror 6 — the same engine powering modern code editors. Line numbers, bracket matching, multiple themes, Vim mode if you’re that person.
The preview renders in real-time with full GitHub Flavored Markdown support:
- Syntax highlighting for 180+ languages
- Mermaid diagrams — flowcharts, sequence diagrams, ERDs
- PlantUML — for architects who refuse to give up UML
-
KaTeX math — inline
$x^2$and display$$int_0^1 f(x)dx$$ - Footnotes, task lists, tables, emoji
No separate preview window. No manual refresh. What you type is what you see.
🤖 AI-Powered Assistant — Bring Your Own Model
This is where it gets interesting.
Mark Viewer doesn’t lock you into one AI provider. You bring your own:
| Provider | Models |
|---|---|
| OpenAI | GPT-4o, GPT-4 Turbo, GPT-3.5 |
| Gemini 2.0 Flash, 1.5 Pro | |
| Ollama | Any local model (Llama, Mistral, etc.) |
| Custom | Any OpenAI-compatible endpoint |
11 Quick Actions work on your current selection or full document:
- Continue Writing — extend naturally, matching your tone
- Summarize — condense key points
- Fix Grammar — correct errors silently
- Rewrite — improve clarity
- Make Concise — cut the fluff
- Simplify — reduce reading level
- Expand — add depth
- Generate Outline — structure from chaos
- Explain — break down complex content
- Translate — preserve Markdown formatting
- Custom — your own prompt
The AI operates in context. No copy-pasting to ChatGPT. No losing your place. Select text → Run action → Insert or replace. Done.
Privacy note: Your API keys are AES-256 encrypted in IndexedDB. Zero telemetry. Your data never leaves your browser unless you explicitly call an AI provider.
🧭 Smart TOC & Navigation
Every document auto-generates a Table of Contents from headings. Click to jump.
The Command Palette (Ctrl/Cmd+P) gives you VS Code-style fuzzy search:
- Search commands
- Jump to in-document symbols (headings)
- Open workspace files
- Type
:42to jump to line 42
A reading progress indicator shows how far through the document you are — useful for long specs and guides.
📊 Analytics & Document Insights
For technical writers and anyone who cares about readability:
- Flesch-Kincaid readability score
- Vocabulary density analysis
- Word count + reading time estimates
- Section-by-section breakdown
- Word goals for when you need to hit a target
Know exactly how readable your documentation is before you ship it.
📁 Workspace & File Management
This isn’t a single-file editor. It’s a proper workspace.
- Multiple workspaces — switch between projects
- Folder hierarchy — organize like a real file system
- Tabbed editing — drag-to-reorder, unsaved indicators
- File search — by name and content
- Pin files — keep important docs at the top
- Import/Export — backup workspaces as ZIP
All storage uses the Origin Private File System (OPFS) — a modern browser API that gives you real file system performance without a backend. Falls back to localStorage automatically if needed.
📦 PWA + Native Desktop
Mark Viewer works offline as a Progressive Web App. Install it from your browser and use it without internet.
Or grab the native desktop app:
- Built with Tauri 2 (Rust, not Electron)
- ~18MB on macOS
- Native file dialogs
- Same full feature set as the web version
Who Is This For?
Developers → READMEs, API docs, ADRs, RFCs, technical specs. Live diagrams. Syntax highlighting. No friction.
Product Managers → PRDs, feature briefs, roadmaps. AI-assisted expansion and outlining. Readability scoring.
Technical Writers → Long-form documentation. Vocabulary analysis. Word goals. Multi-format mental model.
Teams exploring documentation-driven development → AI agents can interact with structured Markdown. Mark Viewer makes that workflow seamless.
The Technical Stack
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite | Build tooling |
| Tailwind CSS 4 | Styling |
| CodeMirror 6 | Editor engine |
| marked.js | Markdown parsing |
| DOMPurify | HTML sanitization |
| highlight.js | Code highlighting |
| KaTeX | Math rendering |
| Mermaid.js | Diagrams |
| Tauri 2 | Desktop app framework |
Zero backend. Everything runs client-side. The architecture is designed for privacy and performance, not for collecting your data.
Why I Built This
I write a lot of documentation — for work, for open source, for my own projects. And I was frustrated.
Not with Markdown itself. Markdown is fine. The problem was everything around it:
- Too many tools
- Too much context switching
- AI assistants that require copy-pasting
- No good way to manage multiple docs
- Preview tools that feel like afterthoughts
So I built the tool I wanted. One surface. Everything integrated. Fast. Private. Respectful of my time.
How I Built It
Here’s the part that might surprise you: I built Mark Viewer using Claude Opus 4.
Not just for brainstorming or writing docs — for the actual implementation. The React components, the CodeMirror integration, the OPFS storage layer, the AI streaming logic, the Tauri desktop build — all of it was pair-programmed with an AI agent.
I described what I wanted. I reviewed the code. I iterated. I shipped.
This isn’t a “vibe coding” experiment or a weekend hack. It’s a production-grade tool with 20+ components, real architecture decisions, and edge case handling — built faster than I could have done solo, without sacrificing quality.
If you’re skeptical about AI-assisted development, take a look at the codebase. Then decide.
Try It
🔗 Live Demo: https://v-senthil.github.io/mark-viwer/
⭐ GitHub: https://github.com/v-senthil/mark-viwer/tree/main
Feedback Welcome
This is v1.0. There’s more to build.
If you try it and something doesn’t work, open an issue. If you have ideas, I want to hear them.
If you find it useful, star the repo — it helps other developers find it.
If you want to contribute, PRs are welcome. Let’s make documentation less painful for everyone.
Built by a developer, for developers. No VC funding. No growth hacking. Just a tool that solves a real problem.