/md-view

Primary LanguageTypeScriptMIT LicenseMIT

MD-View — Free Online Markdown Editor with Live Preview

Next.js React TypeScript Tailwind CSS License: MIT

A fast, free, and open‑source Markdown editor with a beautiful live preview. Built with modern web tech, perfect for docs, READMEs, notes, and blogs.

🌐 Try it live | 📖 Documentation | 🐛 Report Issues

✨ Features

  • Real‑time preview powered by react-markdown + GFM
  • Eight themes: default, Dark, GitHub, Notion, Medium, Paper, Minimal, Terminal
  • Syntax highlighting (highlight.js) with copy‑code buttons and language badges
  • GFM extras: tables, task lists, strikethrough, autolinks
  • Import .md, export .md/.html (print to PDF via browser)
  • View modes: Editor, Preview, or Split with draggable resize
  • Keyboard: Cmd/Ctrl+1/2/3 to switch view modes
  • Mobile‑friendly, accessible roles/labels, localStorage persistence
  • Safe by default: raw HTML rendering disabled

🚀 Quick Start

# Clone the repository
git clone https://github.com/celery94/md-view.git
cd md-view

# Install dependencies (uses lockfile)
npm ci

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

📦 Production Build

# Build for production
npm run build

# Start production server
npm run start

🛠️ Tech Stack

🧭 App Structure

  • app/ — Next.js App Router entries (page.tsx, layout.tsx) and globals.css
  • components/ — UI modules (MarkdownEditor.tsx, MarkdownPreview.tsx, selectors, menus)
  • lib/ — Shared utilities, themes, SEO helpers
  • public/ — Static assets (icons, images)

Requires Node 18.18+ (or 20+).

📝 Available Scripts

  • npm run dev - Start development server with Turbopack
  • npm run build - Build for production with Turbopack
  • npm run start - Start production server
  • npm run typecheck - TypeScript type checking
  • npm run lint - Lint code with ESLint
  • npm run format - Format code with Prettier
  • npm run format:check - Check code formatting

🧰 Usage Tips

  • Switch themes from the preview header; state persists across reloads.
  • Split view is resizable and sync‑scrolls between editor and preview.
  • Use browser Print to save PDF (export HTML is also available).
  • Headings receive stable IDs for deep links; visible “#” anchor icons are disabled by default for a cleaner look.

🔒 Security

  • Raw HTML in markdown is disabled (skipHtml: true) to prevent XSS.
  • Code highlighting uses rehype-highlight; HTML injection is not allowed.
  • No external data collection; analytics (if enabled) is anonymized pageview only.

🎨 Styling & Markdown Details

  • Typography via Tailwind prose; custom styles for code, tables, blockquotes.
  • Lists are tuned for readability: dot bullets, consistent indent, improved markers; task lists align checkboxes with text.
  • Images are lazy‑loaded and styled with borders/shadows.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Why MD-View?

  • No Vendor Lock-in: Your content stays with you
  • Open Source: Transparent, auditable, and free forever
  • Modern Tech: Built with the latest web technologies
  • Performance First: Optimized for speed and efficiency
  • User-Centric: Designed with the user experience in mind

🔗 Links

Made with ❤️ by the MD-View team. Star ⭐ this repository if you find it useful!

Tips

  • Tasks and roadmap: see todo.md.
  • Code themes are scoped with classes like code-theme-github.
  • Editor content and pane ratio persist in localStorage (mdv:*).