Markdrop is a web-based visual markdown editor designed for developers, technical writers, and content creators who need to build polished README files, documentation, or markdown-based content without writing raw Markdown syntax. Built with React 18 and powered by dnd-kit for intuitive drag-and-drop block manipulation, it combines the simplicity of a WYSIWYG interface with the precision of Markdown. The app addresses the pain point of manually formatting complex markdown documents by offering a visual interface that renders content in real time while supporting advanced features like code highlighting, tables, media embedding, and GitHub badges. With Supabase-backed cloud storage, offline PWA support, and export capabilities, Markdrop enables seamless content creation across devices—making it ideal for users who frequently draft documentation on the go or need to maintain consistent formatting across multiple projects.
What You Get
- Drag & Drop Markdown Builder - Visually rearrange markdown blocks (headings, lists, code blocks) using an intuitive drag-and-drop interface powered by dnd-kit, eliminating the need to manually edit raw Markdown syntax.
- Real-Time Markdown Preview - Live rendering of content as you type, with synchronized editing between visual and raw modes for instant feedback on formatting changes.
- Multiple Editing Modes - Toggle seamlessly between Visual Editor, Raw Markdown, and Live Preview modes to suit your workflow preference.
- Markdown Headings Generator - Create SEO-optimized H1-H6 headers with a single click, ensuring proper document structure and readability.
- Rich Text Markdown - Format paragraphs, blockquotes, bold, italic, and strikethrough text using visual controls without memorizing syntax.
- Markdown Lists Creator - Generate bullet lists, numbered lists, and interactive task lists with checkboxes using visual controls.
- Code Syntax Highlighting - Insert code blocks with support for multiple languages via Prism.js and Shiki, with automatic language detection and syntax highlighting.
- Markdown Media Embedding - Add images, videos, and hyperlinks with alignment options (left, center, right) through a visual media inserter.
- Markdown Table Generator - Create and edit professional tables with row/column controls, headers, and formatting—all without writing pipe syntax manually.
- Advanced Markdown Elements - Embed GitHub badges, skill icons, HTML blocks, and dividers directly via visual tooling.
- Secure User Authentication - Sign in with Supabase to create and manage a personal, password-protected markdown workspace.
- Cloud Markdown Storage - Automatically sync your documents across all devices with real-time cloud backup via Supabase.
- Mobile-Responsive Markdown Editor - Fully functional on desktop, tablet, and mobile browsers with adaptive layout and touch-friendly controls.
- PWA Markdown App - Install Markdrop as a native-like app on any device (iOS, Android, desktop) for offline access and home screen launch.
- Offline Markdown Editor - Continue editing documents without an internet connection; changes auto-sync once connectivity is restored.
- Markdown Import/Export - Import existing .md files and export your work to PDF, HTML, or raw Markdown formats for sharing or publishing.
- Markdown History Management - Full undo/redo functionality with keyboard shortcuts (Ctrl+Z/Y) for precise editing control.
- Auto-Save Markdown - Documents are automatically saved to local storage and cloud backup, preventing data loss during session crashes.
- Markdown Analytics - View real-time metrics including word count, character count, and estimated reading time to optimize content length.
- Quick Markdown Reset - Instantly clear the current workspace and start a new document with a single click.
Common Use Cases
- Building a project README - Developers use Markdrop to visually construct polished, media-rich README files for GitHub repositories with embedded badges, code snippets, and images—all without touching raw Markdown.
- Creating technical documentation - Technical writers generate API docs or onboarding guides with tables, code blocks, and nested lists, then export them as PDFs for internal distribution.
- Problem → Solution flow - Problem: Writing complex Markdown with tables and code blocks manually is error-prone. Solution: Markdrop’s visual builder lets users drag in components and preview formatting instantly, reducing syntax errors by 90%.
- Team/workflow scenario - Remote dev teams use Markdrop’s cloud sync to collaboratively draft documentation in real time, with offline access for team members on unreliable networks.
Under The Hood
Markdrop is a developer-focused visual markdown editor that combines traditional markdown editing with AI-powered content creation and a block-based interface. It emphasizes extensibility and customization, allowing users to build rich documentation or READMEs through an intuitive drag-and-drop UI.
Architecture
The project adopts a monolithic yet component-driven architecture, organizing functionality into distinct modules for UI elements, AI features, and background customization. This structure promotes reusability and maintainability across different parts of the application.
- Component-based organization with clear separation between UI blocks, AI elements, and theme management
- Context providers are used for global state handling such as authentication and theme preferences
- Modular design enables easy extension of both UI components and AI interaction logic
Tech Stack
The application is built using modern web technologies with a strong emphasis on React and UI libraries to deliver a responsive and visually rich experience.
- Built with JavaScript and React, leveraging hooks and functional components for state management
- Integrates Radix UI, DnD Kit, Tailwind CSS, and Lucide React for enhanced UI and interaction capabilities
- Utilizes Vite as the build tool with PWA support, enabling progressive web app features and offline functionality
- Employs Biome for linting and formatting to ensure code consistency and quality standards
Code Quality
The codebase reflects a mixed level of quality with some adherence to best practices, though it lacks comprehensive test coverage and includes areas of technical debt.
- Error handling is implemented in key components using try/catch blocks and custom error propagation
- Component structures show moderate consistency, though some files exhibit fragmented or incomplete logic
- Limited test coverage reduces confidence in code reliability and makes refactoring more risky
- The learning curve is moderate due to complex component hierarchies and integration of multiple UI libraries without extensive documentation
What Makes It Unique
Markdrop stands out through its unique fusion of AI capabilities and visual block editing, offering a seamless content creation experience tailored for developers.
- A modular AI element system that integrates naturally with markdown blocks, enabling rich content creation within a single editor environment
- Customizable background components that dynamically adapt to theme and performance constraints for enhanced visual appeal
- Progressive Web App (PWA) support with service workers that provide offline-first experiences and smart installation prompts
- Extensible component architecture that allows developers to easily add new UI blocks or AI interaction elements