SaeedCodez/magic-markdown-viewer

A simple split-pane Markdown editor and live preview.

★ 0Forks 0JavaScriptGitHub ↗Compare

Project website ↗

markdownmarkdown-editormarkdown-to-htmlmarkdown-viewer

README

Magic Markdown Viewer

Magic Markdown Viewer screenshot

A simple split-pane Markdown editor and live preview.

Paste Markdown on the left. See a styled result on the right after a short delay (300ms) so typing stays smooth.

Features

  • Two full-height panes — source editor + reading preview (both follow theme)
  • Dark mode — toggle in the nav; defaults to system preference and remembers your choice
  • Debounced live preview — updates 300ms after you stop typing
  • Vercel-inspired design — tokens and typography from DESIGN.md (Geist, ink/canvas palette)
  • Safe rendering — Markdown is sanitized with DOMPurify before display
  • Sample / Clear / Copy — quick actions in the top bar
  • Download as HTML or PDF — export the preview as a self-contained HTML page, or open a print dialog to save as PDF
  • RTL-aware — Arabic / Persian / Hebrew content switches both panes to RTL and uses Vazirmatn; code blocks stay LTR

Run

No build step. Open the page in a browser:

# Option A — open directly
open index.html

# Option B — local server (recommended; avoids some clipboard / module quirks)
python3 -m http.server 5173
# then visit http://localhost:5173

Stack

Piece Choice
Markup Single-page HTML
Styling Plain CSS (design tokens)
Logic Vanilla JS
Markdown marked
Sanitization DOMPurify
Fonts Geist Sans + Geist Mono (CDN)

Project layout

index.html   # shell + layout
styles.css   # design tokens + pane + prose styles
app.js       # debounce, render, actions
DESIGN.md    # visual design system
images/      # favicon + brand icons

Keyboard

  • Tab in the editor inserts two spaces
  • Focus rings are visible for keyboard navigation

Contributors

SaeedCodez

Issues