A sophisticated, real-time Markdown preview application built with Vue 3 that delivers seamless document editing and rendering capabilities. This project showcases modern Vue development practices, responsive design principles, and efficient state management.
- Live Preview - Real-time markdown rendering
- Split View - Edit and preview side-by-side
- File Operations - Upload/download markdown files
- Cloud Sync - Save documents to cloud
- Auto-save - Automatic browser storage saving
- Dark/Light Mode - Theme toggle
- Error Handling - Comprehensive error management
- Responsive - Works on all devices
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run buildsrc/
├── components/ # UI components (Editor, Preview, CloudSync, etc.)
├── views/ # Page components (Home, ErrorTest, ApiDemo, NotFound)
├── composables/ # Reusable logic
├── services/ # Logger, API services
├── lib/ # Utilities (api, fileOperations, markdownParser)
├── types/ # TypeScript types
├── App.vue # Root component
├── main.ts # Entry point
└── index.css # Global styles
- Edit - Type markdown in the editor
- View Mode - Switch between Editor/Split/Preview
- Save - Download as .md file
- Upload - Load a markdown file
- Cloud - Save/load from cloud storage
- Theme - Toggle dark/light mode
- Vue 3
- Vue Router
- Pinia
- TypeScript
- Marked (markdown parser)
- Axios (HTTP client)
- Lucide Icons
Auto-save Delay - Edit Home.vue:
useThrottledAutosave(markdown, autosaveToStorage, { delay: 2000 })- Local: Saves to browser storage (
markdown-content) - Cloud: Optional API integration for cloud sync
| Issue | Solution |
|---|---|
| Content not showing | Clear cache (Ctrl+Shift+R), check console |
| Cloud sync failing | Verify API endpoint, check network tab |
| Markdown not parsing | Check syntax, verify marked is installed |
MIT License
Built with Vue 3 + TypeScript by Esther Bawo Tsotso