A modern and user-friendly Markdown preview application

🔗 Live Demo

• 📱 Modern and responsive design
• 🌙 Dark/Light theme support
• ⚡️ Real-time preview
• 🎨 Syntax highlighting
• 📋 Drag & Drop file support
• 💾 Auto-save functionality
• 🤖 AI supported markdown generator
• 📤 Export Markdown files
• 🔍 Emoji and GFM (GitHub Flavored Markdown) support
• 🎯 Customizable editor
• 🚀 Fast and performant

• Next.js 15 - React Framework
• React 19 - UI Library
• TypeScript - Type Safety
• Tailwind CSS - Styling
• Zustand - State Management
• Framer Motion - Animations
• React MD Editor - Markdown Editor
• React Markdown Preview - Markdown Preview

• Node.js 18+
• npm or yarn

# Clone the repository
git clone https://github.com/azateser/md-preview-tool.git

# Navigate to the project directory
cd md-preview-tool

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3000

.
├── src/
│   ├── app/              # Page components
│   ├── components/       # UI components
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Helper functions
│   ├── store/           # Zustand store
│   ├── types/           # TypeScript types
│   └── utils/           # Utility functions
├── public/              # Static files
└── styles/             # Global styles

1. Write Markdown text in the left panel
2. See real-time preview in the right panel
3. Your files are automatically saved
4. Export whenever you want

• Headers (# H1, ## H2, etc.)
• Lists (ordered and unordered)
• Links and Images
• Code blocks (with syntax highlighting)
• Tables
• Emoji support
• GitHub Flavored Markdown

You can customize theme colors by editing tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#...',
        secondary: '#...',
      }
    }
  }
}

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

• Multi-file support
• Cloud synchronization
• Sharing capabilities
• More customization options
• Plugin system

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

• Next.js team
• React MD Editor contributors
• Tailwind CSS team

• 🐛 Report a bug
• 💡 Request a feature
• 📧 Email: [email protected]

Made with ❤️ by Azat ESER