Markdown Viewer

A web-based Markdown viewer and editor built with React, Vite, and MUI. Edit Markdown directly in the browser and see a live preview, or upload / drag & drop .md files to view them.

Features

• Multi-document workspace — keep several documents open, switch between them in the left sidebar, and rename (double-click) or close them
• Live editing with an instant split-pane preview
• Upload or drag & drop .md / .markdown / .txt files (each opens as its own document)
• Download and copy the active document
• GitHub Flavored Markdown — tables, task lists, strikethrough, autolinks
• Syntax-highlighted code blocks (highlight.js)
• Six themes — Light: Primer, Manuscript, Porcelain · Dark: Graphite, Night, Terminal (a green-phosphor CRT theme)
• Three view modes: editor only, split, or preview only
• Documents, active tab, and theme are all auto-saved to the browser

Getting started

npm install
npm run dev

Then open the URL Vite prints (defaults to http://localhost:5173).

Build for production

npm run build     # outputs to dist/
npm run preview   # serve the production build locally

Deploy to GitHub Pages

This repo ships with a GitHub Actions workflow (.github/workflows/deploy.yml) that builds the app on Node 24 (npm ci → npm run build) and publishes dist/ to GitHub Pages. It runs automatically on every push to main, and can also be triggered manually from the Actions tab.

One-time setup: in the repository, go to Settings → Pages and set Source to GitHub Actions.

The site works at both project pages (https://<you>.github.io/<repo>/) and user/org pages because the build uses relative asset paths (base: './' in vite.config.js).

Tech stack

• React 18 + Vite
• MUI for UI components and theming
• react-markdown with remark-gfm, rehype-raw, and rehype-highlight