MarkView

Markdown, visualized - A modern, feature-rich markdown editor and previewer.

Live Demo • Documentation • Contributing

Features

Editor

CodeMirror 6 - Modern, extensible code editor with excellent performance
Syntax Highlighting - Full markdown syntax support with GitHub Flavored Markdown
Smart Auto-Complete - Context-aware suggestions for headings, links, and more
Line Numbers & Minimap - Enhanced navigation for long documents
Format on Save - Automatically format markdown with Prettier
Real-time Linting - Catch markdown issues as you type with remark-lint
Keyboard Shortcuts - Complete keyboard navigation support

Preview

Live Preview - Real-time rendering as you type with debounced updates
Synchronized Scrolling - Editor and preview stay in sync
Multiple Themes - GitHub, GitLab, Notion, Obsidian, Stack Overflow, Dev.to styles
Syntax Highlighting - Beautiful code blocks with Shiki
Mermaid Diagrams - Flowcharts, sequence diagrams, and more
KaTeX Math - Beautiful mathematical equations
GFM Support - Tables, task lists, strikethrough, autolinks
Callouts - GitHub and Obsidian-style admonitions
Frontmatter - YAML frontmatter parsing and display

Document Management

Multiple Tabs - Work with several files simultaneously
Auto-Save - Automatic saving to localStorage (customizable interval)
Version History - Track and restore previous versions with diff viewer
Drag & Drop - Drop files directly into the editor
File Explorer - Browse and manage your documents
Search & Replace - Powerful find and replace with regex support
Smart Document Creation - New documents start with auto-edit name and H1 heading
Context Menus - Right-click menus for files (rename, duplicate, export, delete)

Cloud Integration

GitHub Integration
- Browse and open files from your repositories
- Create and save markdown files directly to GitHub
- Commit changes with custom messages
- Delete files from repositories
- Branch selection support
Google Drive Integration
- Browse and open files from your Google Drive
- Create files in any folder (with folder creation support)
- Auto-save to Google Drive (30 seconds after last edit)
- Manual save with Ctrl+S
- Delete files from Drive or just remove from local list
- Sync status indicator in status bar

Import & Export

Import Files - Support for .md, .markdown, .txt, .mdx files
Export to Markdown - Download as .md file with original formatting
Export to HTML - Standalone HTML with embedded styles
Export to PDF - High-quality PDF generation
Export to Image - PNG/JPEG export for sharing

Interface

Dark/Light Themes - System preference detection with manual override
Responsive Design - Mobile-friendly interface with adaptive layout
Internationalization - Full support for English and Spanish
Customizable - Font size, font family, editor preferences
Zen Mode - Distraction-free writing mode
Keyboard Shortcuts - Quick reference modal (Ctrl+/)
Context Menus - Right-click menus for editor, preview, tabs, files, and more

Progressive Web App (PWA)

Installable - Install as a standalone app on any device
Offline Support - Work without internet connection
Auto Updates - Automatic updates when new versions are available
Fast Loading - Service worker caching for instant loading

Onboarding

Welcome Guide - Interactive introduction for new users
Feature Tour - Guided tour highlighting key UI elements
Help Menu - Quick access to shortcuts, tour, and documentation

Screenshots

Main editor interface with live preview

Dark theme with GitHub preview style

Responsive mobile interface

Tech Stack

Frontend

Category	Technology
Framework	React 18
Language	TypeScript 5.7
Build Tool	Vite 6
Editor	CodeMirror 6
State	Zustand
Styling	Tailwind CSS
Markdown	unified, remark, rehype
Syntax Highlighting	Shiki
Diagrams	Mermaid
Math	KaTeX
i18n	i18next

Backend

Category	Technology
API Framework	Hono
Authentication	Better Auth
Database	Neon PostgreSQL
ORM	Drizzle
Deployment	Vercel Serverless

Development

Category	Technology
Testing	Vitest, Playwright
Linting	Biome
Package Manager	pnpm

Getting Started

Prerequisites

Node.js 18 or higher
pnpm 8+ (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/qazuor/markview.git
cd markview

# Install dependencies
pnpm install

# Start development server
pnpm dev

The app will be available at http://localhost:5173

Building for Production

# Build the application
pnpm build

# Preview production build
pnpm preview

Available Scripts

Command	Description
`pnpm dev`	Start development server with HMR
`pnpm build`	Build for production
`pnpm preview`	Preview production build locally
`pnpm test`	Run unit tests
`pnpm test:watch`	Run tests in watch mode
`pnpm test:coverage`	Run tests with coverage report
`pnpm test:e2e`	Run Playwright end-to-end tests
`pnpm lint`	Check code with Biome
`pnpm lint:fix`	Auto-fix linting issues
`pnpm format`	Format code with Biome
`pnpm format:check`	Check code formatting
`pnpm typecheck`	Run TypeScript type checking

Keyboard Shortcuts

Action	Windows/Linux	macOS
Formatting
Bold	`Ctrl+B`	`Cmd+B`
Italic	`Ctrl+I`	`Cmd+I`
Strikethrough	`Ctrl+Shift+S`	`Cmd+Shift+S`
Inline Code	`Ctrl+` `	`Cmd+` `
Code Block	`Ctrl+Shift+` `	`Cmd+Shift+` `
Link	`Ctrl+K`	`Cmd+K`
File Operations
Save (local/cloud)	`Ctrl+S`	`Cmd+S`
New Document	`Ctrl+N`	`Cmd+N`
Open File	`Ctrl+O`	`Cmd+O`
Close Tab	`Ctrl+W`	`Cmd+W`
Editing
Undo	`Ctrl+Z`	`Cmd+Z`
Redo	`Ctrl+Shift+Z`	`Cmd+Shift+Z`
Find	`Ctrl+F`	`Cmd+F`
Replace	`Ctrl+H`	`Cmd+H`
View
Toggle Sidebar	`Ctrl+B`	`Cmd+B`
Zen Mode	`F11`	`Cmd+Shift+F`
Help
Show Shortcuts	`Ctrl+/`	`Cmd+/`

View all shortcuts

Project Structure

markview/
├── src/
│   ├── app/              # App entry and providers
│   ├── components/       # React components
│   │   ├── editor/       # CodeMirror editor
│   │   ├── preview/      # Markdown preview
│   │   ├── toolbar/      # Formatting toolbar
│   │   ├── tabs/         # Document tabs
│   │   ├── sidebar/      # File explorer, TOC
│   │   ├── statusbar/    # Status bar
│   │   ├── modals/       # Dialogs
│   │   ├── layout/       # Layout components
│   │   └── ui/           # Reusable UI components
│   ├── hooks/            # Custom React hooks
│   ├── services/         # Business logic
│   │   ├── markdown/     # Markdown processing
│   │   ├── storage/      # Local storage
│   │   ├── export/       # Export functionality
│   │   ├── github/       # GitHub API integration
│   │   └── gdrive/       # Google Drive API integration
│   ├── stores/           # Zustand stores
│   ├── types/            # TypeScript types
│   ├── utils/            # Utility functions
│   ├── i18n/             # Internationalization
│   └── styles/           # Global styles
├── tests/
│   ├── unit/             # Vitest unit tests
│   └── e2e/              # Playwright e2e tests
└── docs/                 # Documentation

Configuration

Access settings through the gear icon in the toolbar or press Ctrl+, (Windows/Linux) or Cmd+, (macOS).

Available Settings

Appearance
- Theme (Dark, Light, System)
- Preview Style (GitHub, GitLab, Notion, Obsidian, Stack Overflow, Dev.to)
- Editor Font Size (10-24px)
- Preview Font Size (12-28px)
- Font Family
Editor
- Word Wrap
- Line Numbers
- Minimap
- Sync Scroll
Behavior
- Auto Save
- Auto Save Interval
- Format on Save
- Lint on Type
Sync (Cloud Integration)
- GitHub: Connect/disconnect, view connected account
- Google Drive: Connect/disconnect, view connected account
- Sync status indicators
Language
- English
- Spanish (Español)

Documentation

User Guide - Complete user documentation
Architecture - Technical architecture details
Contributing Guide - How to contribute
Changelog - Version history

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Start

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Commit Convention

This project follows Conventional Commits:

feat: - New features
fix: - Bug fixes
docs: - Documentation changes
style: - Code style changes (formatting)
refactor: - Code refactoring
test: - Test additions or changes
chore: - Maintenance tasks

Roadmap

✅ Completed (v0.1.0)

🚧 Coming Soon

Local File Management

Feature	Description	Status
Open Local Folder	Open all .md files recursively from a local folder	Planned
Folder Organization	Organize local documents into folders/categories	Planned
File System Access API	Direct file editing without import/export	Planned

Export & Sharing

Feature	Description	Status
Server-side PDF Export	Reliable PDF generation with Puppeteer	Planned
Image Export	Export preview as PNG/JPEG with options	Planned
Share Links	Generate shareable read-only links	Planned

Editor Enhancements

Feature	Description	Status
Interactive Checklists	Click checkboxes in preview to toggle in editor	Planned
Markdown Linting	Real-time linting with markdownlint	Planned
Auto Formatting	Format markdown with Prettier on save	Planned
Snippets	Reusable text snippets with shortcuts	Planned

Cloud Integrations

Feature	Description	Status
Dropbox Integration	Sync documents with Dropbox	Planned
OneDrive Integration	Sync documents with Microsoft OneDrive	Planned
GitLab Integration	Support for GitLab repositories	Planned
Image Upload	Drag & drop images, upload to cloud storage	Planned

Desktop & Platform

Feature	Description	Status
Desktop App (Tauri)	Native app for Windows, macOS, Linux	Planned
Native File Associations	Open .md files directly with MarkView	Planned
Auto Updates	Automatic updates for desktop app	Planned

Future Enhancements

Feature	Description	Status
Real-time Collaboration	Multiple users editing the same document	Research
Plugin System	Extensible architecture for custom plugins	Research
Custom Themes Editor	Visual theme creator and customization	Planned
Vim/Emacs Keybindings	Alternative keyboard modes	Planned
AI Writing Assistant	Grammar, style suggestions, autocomplete	Research
Presentation Mode	Turn markdown into slideshows	Planned
Advanced Export	Export to DOCX, LaTeX, EPUB formats	Planned

💡 Feature Requests

Have a feature idea? Open an issue with the "enhancement" label!

License

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

Acknowledgments

CodeMirror - Excellent code editor
unified - Markdown processing
Mermaid - Diagram generation
KaTeX - Math rendering
Shiki - Syntax highlighting

Author

qazuor

GitHub: @qazuor
Project: markview

Made with ❤️ by qazuor

⬆ Back to Top

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
.husky		.husky
.vscode		.vscode
api		api
docs		docs
public		public
scripts		scripts
src		src
tests		tests
.editorconfig		.editorconfig
.env.example		.env.example
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
README.md		README.md
biome.json		biome.json
commitlint.config.js		commitlint.config.js
drizzle.config.ts		drizzle.config.ts
index.html		index.html
package.json		package.json
playwright.config.ts		playwright.config.ts
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Latest commit

History

Folders and files

Repository files navigation

MarkView

Features

Editor

Preview

Document Management

Cloud Integration

Import & Export

Interface

Progressive Web App (PWA)

Onboarding

Screenshots

Tech Stack

Frontend

Backend

Development

Getting Started

Prerequisites

Installation

Building for Production

Available Scripts

Keyboard Shortcuts

Project Structure

Configuration

Available Settings

Documentation

Contributing

Quick Start

Commit Convention

Roadmap

✅ Completed (v0.1.0)

🚧 Coming Soon

Local File Management

Export & Sharing

Editor Enhancements

Cloud Integrations

Desktop & Platform

Future Enhancements

💡 Feature Requests

License

Acknowledgments

Author

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages