DEV Community

Cover image for A Markdown Editor That Lives in Your Browser, Your Desktop, and a Single URL
Baivab Sarkar
Baivab Sarkar

Posted on

A Markdown Editor That Lives in Your Browser, Your Desktop, and a Single URL

#javascript #productivity #showdev #webdev

I rebuilt my Markdown Viewer from scratch — multi-tab sessions, desktop app, GitHub imports, URL sharing, and a rendering engine that rivals professional editors. Here's everything that changed.

If you've been following this project, you know where it started: a simple split-pane editor with live preview. Then came v2 — dark mode, MathJax, Mermaid, syntax highlighting. Good progress. But honest feedback from users kept pointing to the same gaps: "Can I have multiple documents open?" "Can I use this offline?" "Can I share this without uploading anything?"

So I stopped adding features to the old architecture and rebuilt it. This is what came out.

🔗 Live Demo: markdownviewer.pages.dev
💻 GitHub: ThisIs-Developer/Markdown-Viewer

🗂️ Multi-Document Tabs — The Biggest Ask

The single-document model was the most-requested limitation to fix. Markdown Viewer now supports a full multi-tab workflow — create, rename, duplicate, delete, and drag-reorder tabs, all from a persistent tab bar.

Every tab is an independent document with its own content and view mode. Switch between them instantly. Close one, the others stay exactly where you left them.

The entire session — all tabs, their content, active tab, untitled counter — is saved automatically to localStorage. Close the browser, come back tomorrow, everything is right where you left it.

Tab 1: README.md      Tab 2: API Docs      Tab 3: Untitled 3  [+]
Enter fullscreen mode Exit fullscreen mode

Keyboard shortcuts to match:

  • Ctrl/Cmd + T → New tab
  • Ctrl/Cmd + W → Close current tab

🖥️ Desktop App — Native, Offline, Instant

One of the most exciting additions: a real desktop app for Windows, Linux (x64 and ARM64), and macOS — built with Neutralinojs.

It's not an Electron app. No 200MB runtime. No Chromium bundled inside. The app uses the OS's built-in webview and weighs in at a fraction of typical Electron apps, while still delivering the full feature set.

Download a prebuilt binary from the Releases page and you're done. Or build from source:

cd desktop-app
npm run dev       # Run with hot reload
npm run build     # Build single-file executables
Enter fullscreen mode Exit fullscreen mode

The desktop app shares its core codebase with the web version. A build script (prepare.js) copies script.js, styles.css, and assets into the resources/ folder and injects desktop-specific additions at build time. No divergent codebases to maintain.

🐙 GitHub Import — Entire Repos in One Click

Pasting raw GitHub URLs one at a time was never going to cut it. The new GitHub import modal lets you:

  1. Paste any GitHub repository URL
  2. Browse the full file tree interactively
  3. Select multiple .md files at once
  4. Import them all as separate tabs in one action

It resolves branches, navigates folders, filters for Markdown files, and shows a live count of what you've selected. For anyone working with documentation repos, changelogs, or wikis — this is the fastest way to load content.

🔗 Share via URL — Zero Infrastructure

Want to share a document without a database, without an account, without uploading anything?

The Share button compresses your document using pako (zlib), encodes it as base64url, and appends it to the URL. Anyone with the link opens it directly in their browser — the full content, perfectly rendered, no server involved.

https://markdownviewer.pages.dev/?c=eJyNkk1...
Enter fullscreen mode Exit fullscreen mode

Your content never leaves the browser. There's no backend. No storage. No expiry. If the URL fits, it works.

Can You Find Your Language Below Link?

Markdown Viewer

Markdown Viewer is a powerful GitHub-style Markdown rendering tool with live preview, LaTeX math, Mermaid diagrams, syntax highlighting, dark mode, and export options to PDF, HTML, and MD—all fully client-side and secure.

favicon markdownviewer.pages.dev

🔍 Find & Replace

Long documents needed proper search. The Find & Replace modal supports:

  • Live match highlighting as you type
  • Jump to previous / next match
  • Replace current match or replace all
  • Match count display (3 of 12)

Ctrl/Cmd + F opens it. Escape closes it. It works exactly like you'd expect from a code editor.

📐 Three View Modes + Resizable Panes

The layout is now fully flexible:

Mode When to use
Split Writing and reviewing simultaneously
Editor only Focused writing, no distractions
Preview only Reading / proofreading the rendered output

In split mode, drag the divider between panes to give more space to whichever side you need. The minimum is 20% — both panes always stay usable. Pane widths are remembered per tab.

On mobile, a dedicated slide-in menu replaces the toolbar entirely, and view mode buttons adapt to the smaller screen.

🌐 RTL / LTR Direction Toggle

Writing in Arabic, Hebrew, Persian, or any right-to-left language? A single click on the direction toggle flips the entire editor and preview to RTL layout — text alignment, cursor behavior, and flow all switch correctly.

This is a small feature with a large impact for international users who were previously working around the layout.

📄 YAML Frontmatter Rendering

If you write content for static site generators (Jekyll, Hugo, Eleventy), your Markdown files likely start with YAML frontmatter:

---
title: "My Post"
date: 2025-05-01
tags: [markdown, editor, tools]
author: ThisIs-Developer
---
Enter fullscreen mode Exit fullscreen mode

Markdown Viewer now parses this block and renders it as a metadata table at the top of the preview — cleanly formatted, not just hidden or stripped. The rest of your document renders normally below it.

🔔 GitHub-Style Alerts

The five standard GitHub alert types are fully supported:

> [!NOTE]
> Highlights information that users should take into account.

> [!TIP]
> Optional information to help a user be more successful.

> [!WARNING]
> Critical content demanding immediate user attention.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!CAUTION]
> Negative potential consequences of an action.
Enter fullscreen mode Exit fullscreen mode

Each renders with the correct icon, color, and styling — identical to how GitHub renders them in READMEs and issues.

🧜 Mermaid Toolbar — Zoom, Pan, Export

Mermaid diagrams now come with a dedicated interactive toolbar:

  • 🔍 Zoom in / out
  • 🖱️ Pan around large diagrams
  • 📋 Copy SVG source to clipboard
  • 💾 Export as PNG or SVG

For complex architecture diagrams or flowcharts that overflow the preview pane, this makes a real difference.

flowchart TD
    A[Write Markdown] --> B[Live Preview]
    B --> C{Happy with it?}
    C -->|Yes| D[Export / Share]
    C -->|No| A
    D --> E[PDF / HTML / URL]
Enter fullscreen mode Exit fullscreen mode

📤 Smarter PDF Export

PDF generation has always been tricky to get right. This version adds:

  • Automatic page-break detection — elements are analyzed against A4 page height and breaks are inserted intelligently, not just at arbitrary pixel boundaries
  • Oversized graphics scaling — images and diagrams that exceed page width are scaled down automatically, with a minimum scale of 50% to preserve readability
  • Whitespace optimization — small gaps before page breaks are collapsed to avoid wasted space

The result is PDFs that actually look like they were laid out intentionally.

📋 Copy Rendered HTML

A small but very practical addition: Ctrl/Cmd + C with no text selected copies the full rendered HTML of the current document to your clipboard.

Useful for pasting directly into a CMS, email client, or any tool that accepts rich HTML — no manual export step needed.

🐳 Docker Deployment

Self-hosting is now a one-liner:

docker run -d \
  --name markdown-viewer \
  -p 8080:80 \
  --restart unless-stopped \
  ghcr.io/thisis-developer/markdown-viewer:latest
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:8080. That's it. The image is published to GitHub Container Registry and updated automatically on every release via GitHub Actions.

Or with Compose:

git clone https://github.com/ThisIs-Developer/Markdown-Viewer.git
cd Markdown-Viewer
docker compose up -d
Enter fullscreen mode Exit fullscreen mode

🔑 Full Keyboard Shortcut Reference

Shortcut Action
Ctrl/Cmd + S Export Markdown
Ctrl/Cmd + Shift + S Toggle sync scrolling
Ctrl/Cmd + T New tab
Ctrl/Cmd + W Close tab
Ctrl/Cmd + C Copy rendered HTML (no selection)
Ctrl/Cmd + F Find & Replace
Tab Insert indentation in editor

🧰 Tech Stack (Updated)

Purpose Library
Markdown parsing marked.js
Syntax highlighting highlight.js
Math rendering MathJax
Diagrams Mermaid.js
PDF generation html2canvas + jsPDF
HTML sanitization DOMPurify
Emoji JoyPixels
File saving FileSaver.js
URL compression pako
Desktop runtime Neutralinojs
UI framework Bootstrap

🚀 Get Started in 30 Seconds

Browser (no install):
👉 markdownviewer.pages.dev

Run locally:

git clone https://github.com/ThisIs-Developer/Markdown-Viewer.git
cd Markdown-Viewer
python3 -m http.server 8080
# Open http://localhost:8080
Enter fullscreen mode Exit fullscreen mode

Desktop app:
Download from the Releases page — Windows, Linux, macOS, all covered.

Docker:

docker run -d -p 8080:80 ghcr.io/thisis-developer/markdown-viewer:latest
Enter fullscreen mode Exit fullscreen mode

💬 What's Next?

The roadmap isn't finalized, but the most-requested items still on the list include:

  • AI writing assistant integration for grammar, tone, and suggestions
  • Real-time collaborative editing for teams
  • Custom themes and typography settings
  • Plugin API for community extensions

If any of these matter to you — or if you have something different in mind — open an issue or drop a comment below. This project is built around what people actually use.

If you've made it this far: thank you for reading. If Markdown Viewer makes your writing workflow even 10% better, it's worth it.

⭐ Star it on GitHub — it genuinely helps the project reach more people.

💬 Drop your thoughts, feedback, or feature requests in the comments. Every one of them gets read.

Happy writing. 📝

Top comments (0)