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. It solves the complexity of manual Markdown syntax by offering a WYSIWYG-like interface with block-based editing. Built with React 18, Vite, and Tailwind CSS, it leverages dnd-kit for drag-and-drop functionality and Supabase for cloud storage and authentication, supporting deployment via Vercel and offline use as a PWA.
The app integrates Remark and Rehype for Markdown processing, Prism.js and Shiki for syntax highlighting, and Shadcn/UI for component consistency. It supports full cloud sync, offline editing, and export to PDF, HTML, and Markdown formats, making it ideal for users who need to create, edit, and share technical content across devices without losing progress.
What You Get
- Drag & Drop Markdown Builder - Reorder Markdown blocks visually using dnd-kit without manual syntax editing
- Real-Time Markdown Preview - Live rendering of Markdown content as you type, with instant visual feedback
- Multiple Editing Modes - Toggle between Visual Editor, Raw Markdown, and Live Preview modes for flexible workflows
- Markdown Media Embedding - Insert and align images, videos, and hyperlinks with built-in controls
- Code Syntax Highlighting - Multi-language code blocks powered by Prism.js and Shiki with theme support
- Cloud Markdown Storage - Auto-sync documents via Supabase with secure user authentication and cross-device access
- PWA Markdown App - Install as a native-like app on any device for offline editing and push notifications
- Markdown Import/Export - Import .md files and export to PDF, HTML, and Markdown formats for sharing and publishing
- Markdown History Management - Full undo/redo functionality with keyboard shortcuts for efficient editing
- Auto-Save Markdown - Automatic saving to both local storage and Supabase cloud to prevent data loss
- Markdown Analytics - Real-time word count, character count, and estimated reading time for content optimization
- Quick Markdown Reset - One-click reset to clear the workspace and start a new project from scratch
Common Use Cases
- Writing GitHub READMEs - Developers use Markdrop to visually design professional README files with code blocks, badges, and images without memorizing Markdown syntax
- Creating Technical Documentation - Engineers build internal docs with tables, task lists, and syntax-highlighted code snippets for team onboarding
- Publishing Blog Posts in Markdown - Technical bloggers draft and export content to HTML or PDF for hosting on static sites like Astro or Next.js
- Offline Documentation Editing - Remote workers or travelers edit documentation on planes or in low-connectivity areas using the PWA offline mode
Under The Hood
Architecture
- React-based component architecture with clear separation between UI primitives (Radix UI) and domain-specific blocks using a composition pattern
- State management via React context with centralized theming powered by Tailwind CSS custom properties and the OKLCH color system
- Block-based editor design where each content type encapsulates its own formatting, DOM manipulation, and dialog state
- Dependency injection through utility modules and reusable components that enable consistent theming and extensibility
- Clean abstraction layers isolate rendering logic from interaction logic using DnD and markdown parsing libraries
- Vite-based build system with path aliases and Tailwind CSS configured for scalable component library patterns
Tech Stack
- React 19 with React DOM and Vite for modern frontend development and server components
- Tailwind CSS with custom plugins and advanced styling utilities for utility-first, themable UI design
- Radix UI primitives complemented by icon libraries for accessible, unstyled components
- Supabase for authentication and database operations, deployed via Vercel with edge functions and serverless optimizations
- Comprehensive markdown rendering stack supporting LaTeX, GitHub Flavored Markdown, and rich text semantics
- Vercel-specific routing and security configurations alongside linting and package management via biome and npm
Code Quality
- Limited testing practices with no detectable test frameworks or assertions
- Business logic and presentation concerns are not clearly separated, leading to tightly coupled components
- Absence of error handling, custom error classes, or structured logging across the codebase
- Naming conventions are inconsistent in key areas, reducing semantic clarity and maintainability
- No type safety enforced due to lack of TypeScript or prop typing
- No visible linting, formatting, or code quality tooling configurations
What Makes It Unique
- Integrated AI-powered markdown assistant providing real-time conversational guidance within the editor
- Customizable visual block builder using drag-and-drop composition that preserves raw Markdown fidelity
- Deep Tailwind integration with perceptually accurate OKLCH theming that dynamically adapts scrollbars and shadows
- Native browser-based document export pipeline enabling one-click GitHub README generation without server dependencies
- Animated background systems with configurable particle effects that enhance UX without performance penalties
- Zero-dependency local usage tracking for AI features using only localStorage, eliminating external analytics