A modern, feature-rich markdown editor built with React, TypeScript, and Vite. This single-page application provides real-time preview, syntax highlighting, and comprehensive export capabilities. All processing is done client-side for privacy and performance.
- Live Preview: Real-time markdown rendering with bidirectional synchronized scrolling
- Syntax Highlighting: Code blocks with language-specific highlighting via Highlight.js
- Auto-Save: Automatic saving to browser storage with persistence across sessions
- Theme Support: Light and dark modes with system preference detection and persistence
- Resizable Split View: Adjustable editor/preview panes with smooth resizing
- GitHub Flavored Markdown: Full GFM support including tables, task lists, and strikethrough
- LaTeX Math: Mathematical equations using KaTeX renderer
- Code Highlighting: 180+ language support via Highlight.js
- Enhanced Tables: Properly styled table rendering
- Lists: Support for nested ordered and unordered lists
- Blockquotes: Styled blockquote rendering
- Links: Automatic link detection and styling
- PDF Export: High-quality PDF generation with syntax highlighting and proper pagination
- Word Document: DOCX export with formatting, tables, lists, and code blocks
- Markdown File: Download raw markdown content
- Copy Formats:
- Copy as Markdown: Raw markdown text
- Copy as HTML: Rich text with formatting for pasting into documents
- Copy as Plain Text: Formatted plain text with proper list bullets
Action | Shortcut |
---|---|
Bold | Ctrl/Cmd + B |
Italic | Ctrl/Cmd + I |
Link | Ctrl/Cmd + L |
Save | Ctrl/Cmd + S |
Command Palette | Ctrl/Cmd + K |
Export Options | Ctrl/Cmd + E |
Copy Options | Ctrl/Cmd + Shift + Y |
Toggle Dark Mode | Ctrl/Cmd + Shift + D |
Quick Export PDF | Ctrl/Cmd + Shift + P |
Quick Export Word | Ctrl/Cmd + Shift + Alt + D |
Quick Export Markdown | Ctrl/Cmd + Shift + M |
Help | Ctrl/Cmd + / |
- Command Palette: Quick access to all commands with fuzzy search (Ctrl/Cmd+K)
- Modal System: Clean, accessible modals for exports, copy options, and help
- Toolbar Actions: Quick access buttons for save, export, copy, and help
- Status Indicators: Real-time save status and timestamps
- Error Handling: User-friendly error messages and recovery
- Dark Mode Toggle: Persistent theme switching in header
- Node.js 18+
- npm 9+
# Clone the repository
git clone https://github.com/jmagly/markdown-editor.git
cd markdown-editor
# Install dependencies
npm install
# Start development server
npm run dev
The application will be available at http://localhost:5173
# Create optimized build
npm run build
# Preview production build
npm run preview
The application follows a component-based architecture with clear separation of concerns:
- Frontend Framework: React 18 with TypeScript for type safety
- State Management: Zustand stores with localStorage persistence
- Build Tool: Vite 5 for fast development and optimized production builds
- Styling: Tailwind CSS v4 beta with dark mode support
- Export System: Client-side PDF and DOCX generation
- Copy System: Modern Clipboard API with fallback support
For detailed architecture diagrams and documentation, see Architecture Documentation.
markdown-editor/
├── src/
│ ├── components/ # React components
│ │ ├── modals/ # Modal components
│ │ ├── Editor/ # Editor components
│ │ ├── Preview/ # Preview components
│ │ └── Layout/ # Layout components
│ ├── hooks/ # Custom React hooks
│ ├── stores/ # Zustand state stores
│ ├── lib/ # Library code
│ │ └── export/ # Export utilities
│ ├── utils/ # Helper utilities
│ └── types/ # TypeScript definitions
├── docs/ # Documentation
├── tests/ # Test plans
└── dist/ # Production build
- Frontend Framework: React 18.3.1 with TypeScript 5.2.2
- Build Tool: Vite 5.0.10 for fast development and optimized builds
- Styling: Tailwind CSS v4.0.0-beta.4 with dark mode support
- State Management: Zustand 5.0.2 for simple, performant state with persistence
- Markdown Parsing: Marked.js 14.1.2 with GFM support
- Code Highlighting: Highlight.js 11.10.0 with 180+ languages
- Math Rendering: KaTeX 0.16.11 for LaTeX equations
- PDF Generation: jsPDF 2.5.2 with html2canvas 1.4.1
- DOCX Generation: docx 9.0.2 with file-saver 2.0.5
- Icons: Lucide React 0.462.0
- UI Components: React Resizable Panels 2.1.7
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Opera 76+
- Mobile browsers with limited functionality (desktop recommended for full features)
Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.
- Architecture Documentation - Comprehensive architecture with PlantUML diagrams
- Developer Guide - Setup and development workflow
- Technical Specification - Implementation details
- API Documentation - Component and utility APIs
- Deployment Guide - Production deployment instructions
- Original Specification - Initial project requirements
This project is licensed under the MIT License - see the LICENSE file for details.
- Marked.js for markdown parsing
- Highlight.js for syntax highlighting
- KaTeX for math rendering
- Tailwind CSS for styling
- Zustand for state management