A sleek and modern markdown editor and previewer built with React + Vite ⚡
- 🌓 Dark/Light mode with smooth transitions
- 💾 Real-time auto-save
- 📱 Fully responsive design for all devices
- 🚀 Live markdown preview
- 🎨 Multiple preview styles (Default, GitHub, Elegant)
- 📋 Import/Export markdown files
- ⚡ Lightning-fast performance with Vite
- 🎯 Customizable settings
- 📊 Optional line numbers
- 🔄 Auto-save functionality
- 📱 PWA support for native app experience
- ♿ Full accessibility support with ARIA labels
- 🔌 Offline functionality
- 📲 Install on any device
- 🎨 Adaptive interface
Try it out: WebMarkdown
- Frontend Framework: React 18.3
- Build Tool: Vite 6.0
- Styling: Tailwind CSS 3.4
- PWA: Vite PWA Plugin
- Key Dependencies:
- 🎨 @heroicons/react
- 📝 react-markdown
- ✨ remark-gfm
- 🎯 PropTypes
- 📱 vite-plugin-pwa
- Clone the repository:
git clone https://github.com/melihcanndemir/markdown-previewer.git- Install dependencies:
npm install- Start the development server:
npm run dev- Build for production:
npm run build- Write markdown in the left panel
- See instant preview in the right panel
- Toggle dark/light mode with the theme button
- Use the settings button to customize your experience
- Install as a native app
- Work offline
- Fast loading times
- Home screen installation
- App-like experience
- Full keyboard navigation
- ARIA labels for all interactive elements
- High contrast mode support
- Screen reader friendly
- Focus management
- Click Import to load .md files
- Click Export to save your work
- Supports local storage auto-save
- Adjust font size
- Choose preview style
- Toggle line numbers
- Enable/Disable auto-save
- Customize PWA behavior
Optimized for all devices:
- 💻 Desktop
- 📱 Tablets (including iPad Air)
- 📱 Foldable devices (including Zenbook Fold)
- 📱 Mobile phones
Contributions are welcome! Feel free to:
- Fork the repository
- Create your feature branch
- Submit a Pull Request
This project is open source and available under the MIT License.
- Icons by Hero Icons
- Markdown parsing by React Markdown
- Styling with Tailwind CSS
- Built with Vite
- PWA support by Vite PWA Plugin
Made with ❤️ by Melih Can Demir