A powerful, modern, and feature-rich Markdown editor built with React, TypeScript, and Tailwind CSS. Experience seamless writing with real-time preview, syntax highlighting, and advanced formatting tools.
- Real-time Preview - See your changes as you type
- Syntax Highlighting - Beautiful code blocks with language support
- Mermaid Diagrams - Create flowcharts, sequence diagrams, and more
- Emoji Support - Add emojis with the built-in picker
- Table Generator - Easily create and customize tables
- Folder Structure Generator - Visualize directory structures
- Code Generator - Generate code snippets in multiple languages
- Auto-save - Never lose your work with automatic saving
- Export Options - Download your documents as Markdown files
- Fullscreen Mode - Focus on writing with distraction-free mode
- Responsive Design - Works beautifully on all devices
- Dark Theme - Easy on the eyes dark interface
- Node.js (v14 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/denisetiya/markdown-editor.git
# Navigate to the project directory
cd markdown-editor
# Install dependencies
npm install
# Start the development server
npm run dev# Build the project
npm run build- React 19 - Modern UI library
- TypeScript - Type safety and better development experience
- Tailwind CSS - Utility-first CSS framework
- Vite - Lightning fast build tool
- Lucide React - Beautiful icons
- Mermaid - Diagram generation
- React Markdown - Markdown rendering
- Writing - Use the left panel to write your Markdown
- Preview - See the rendered output in the right panel
- Formatting - Use the toolbar for quick formatting options
- Special Features:
- Insert tables with the table generator
- Add emojis with the emoji picker
- Create diagrams with Mermaid syntax
- Generate folder structures
- Create code snippets in multiple languages
- Header - Project title and sidebar toggle
- Toolbar - Formatting options and actions
- Editor - Main writing area with syntax highlighting
- Preview - Real-time rendered output
- Sidebar - Additional tools and settings
- Status Bar - Document statistics and information
Enable or disable auto-save in the sidebar settings. Your content is automatically saved to browser's local storage.
Dark theme is enabled by default with a sleek gradient design.
If you find this project useful, consider supporting the development:
- Saweria: Donate via Saweria
- GitHub: Star this repository
- Share: Spread the word about this tool
This project is licensed under the MIT License - see the LICENSE file for details.
Deni Setiya
- GitHub: @denisetiya
- Email: denisetiya009@gmail.com
⭐ If you like this project, please consider giving it a star on GitHub!