Markdrop

Markdrop is a browser-native visual markdown editor built specifically for developers who create GitHub READMEs, documentation, and developer portfolio pages. Rather than writing raw Markdown syntax, users compose content by dragging and dropping typed content blocks — headings, code blocks, tables, task lists, and GitHub-specific elements like shield badge generators, skill icon grids, and typing SVG animators — then export the result to Markdown, HTML, or PDF.

The editor runs entirely in the browser as a React 19 single-page application backed by Supabase for cloud storage and authentication. Documents auto-save to both localStorage and Supabase, giving users offline access via the PWA service worker and cross-device sync when authenticated. The app can be installed as a native-like desktop or mobile app through the PWA manifest.

Markdrop targets a specific underserved workflow: GitHub profile README creation. The block palette includes elements that go beyond generic markdown — configurable shield badges from shields.io, animated skill icon grids from skill-icons.vercel.app, and GitHub-hosted typing SVG animations — making it the most opinionated tool available for this exact use case without requiring any external tooling or account setup beyond the app itself.

What You Get

• Drag-and-Drop Block Editor - Compose markdown documents by dragging 18+ typed block types into position using dnd-kit, without touching raw syntax
• GitHub Profile Blocks - Generate shield badges, skill icon grids from skill-icons.vercel.app, and animated typing SVGs specifically for GitHub profile READMEs
• Real-Time Preview - Live rendered markdown preview alongside the editor with react-markdown, remark-gfm, and rehype-raw for GitHub Flavored Markdown including HTML passthrough
• Multi-Format Export - Export finished documents to raw Markdown (.md), HTML (with embedded styles), or PDF generated client-side via jsPDF and html2canvas
• Cloud Sync with Supabase - Authenticated users get documents stored in Supabase PostgreSQL with folder organization, accessible across all devices
• PWA Offline Support - Service worker via vite-plugin-pwa caches the full app with Workbox, enabling offline editing and native-app installation on desktop and mobile
• Full Undo/Redo History - Complete editing history tracked in component state, accessible via keyboard shortcuts (Ctrl+Z / Ctrl+Y)
• AI Markdown Assistant - Embedded AI chat panel for markdown guidance, with a rate-limited free tier tracked via localStorage requiring no backend calls for quota enforcement
• Mermaid Diagram Blocks - Embed flowcharts and diagrams using Mermaid syntax directly within the block editor
• Math Block Support - Render LaTeX math expressions using KaTeX via rehype-katex and remark-math
• Code Syntax Highlighting - Multi-language code blocks with Shiki-powered syntax highlighting and theme selection
• Auto-Save to localStorage - Blocks persist to localStorage on every change, ensuring no data loss even without cloud authentication

Common Use Cases

• GitHub Profile README Creation - Developers build their GitHub profile pages visually, using shield badge blocks and skill icon grids to showcase tech stacks without manually assembling URLs
• Project README Authoring - Open source maintainers draft project READMEs with code blocks, tables, and alert blocks for notes and warnings, then export clean Markdown to paste into repositories
• Technical Documentation Drafting - Engineering teams compose internal docs with task lists, tables, and heading hierarchy and export to HTML for publishing on intranets or static sites
• Portfolio Page Content - Developer advocates and job seekers use the typing SVG and GitHub summary card blocks to build animated, visually rich profile pages without web development skills
• Offline Documentation Editing - Travelers or developers in low-connectivity environments install the PWA and continue editing docs without internet, syncing to Supabase when reconnected
• Markdown Learning Tool - Newcomers to Markdown learn the syntax through the Raw view toggle, seeing the generated Markdown that corresponds to their visual block arrangement

Under The Hood

Architecture Markdrop uses a single-page React application architecture with client-side routing via React Router. The Builder is the core page component, orchestrating drag-and-drop block management through dnd-kit, history tracking via in-component state arrays, Supabase storage operations, and multi-format export — all within a single large component. Block types are individually encapsulated in a dedicated blocks directory, each managing its own form state and rendering independently. The AI assistant is cleanly isolated as a sheet overlay. This component-per-block-type pattern is well-structured, while the main Builder page itself trends toward a god-component pattern, absorbing too many orthogonal concerns.

Tech Stack Built on React 19 with Vite using rolldown-vite, the Rust-based build toolchain that significantly speeds up bundling. Tailwind CSS v4 with the Vite plugin provides utility-first styling. UI primitives come from shadcn/ui atop Radix UI. Drag-and-drop is handled by dnd-kit’s core and sortable packages. Supabase provides PostgreSQL-backed document storage and authentication via supabase-js. Markdown rendering uses react-markdown with remark-gfm, rehype-raw, remark-math, and rehype-katex for full GFM plus math support. Code highlighting runs through Shiki. PDF export uses jsPDF and html2canvas for entirely client-side, screenshot-based PDF generation. The PWA layer is managed by vite-plugin-pwa with Workbox for service worker caching.

Code Quality No test files exist in the repository — no unit, integration, or end-to-end testing framework is configured or referenced anywhere in the codebase. Linting and formatting are handled by Biome, configured with a comprehensive correctness and suspicious rules ruleset. The codebase uses plain JavaScript without TypeScript, though Biome catches a meaningful class of runtime errors statically. Error handling is inconsistently applied: storage operations and auth context handle errors with try/catch and console logging, but many other async paths lack error boundaries or recovery logic. The AI assistant usage-limit system is an interesting example of careful localStorage state management, but overall the codebase would benefit substantially from TypeScript adoption and a test suite.

What Makes It Unique The GitHub profile README use case is well-served by a purpose-built block set that no general markdown editor provides: configurable shields.io badge generators, animated typing SVG blocks linking to github-readme-typing-svg, and skill icon grids from skill-icons.vercel.app are all first-class block types. The AI assistant’s rate-limiting mechanism — tracking monthly usage counts per user in localStorage without any server-side enforcement — is a pragmatic zero-infrastructure approach to offering free AI features. Adopting rolldown-vite (the Rust Vite port) positions the project ahead of most comparable tools in build performance. The entirely client-side PDF export pipeline using jsPDF plus html2canvas means documents can be exported offline, consistent with the overall PWA-first design philosophy.

Self-Hosting

Markdrop is released under the GNU General Public License v3.0 (GPL-3.0), a strong copyleft license. In practical terms, this means you can use, modify, and redistribute the software freely — including for commercial purposes — but any modified version you distribute must also be released under the GPL-3.0 with source code made available. For teams self-hosting an internal instance without distributing it externally, the copyleft requirement does not apply to internal use. However, if you build a SaaS product or distribute modified binaries derived from Markdrop, you must open-source those modifications under the same license.

Running Markdrop yourself is straightforward from an operational standpoint: it is a static React SPA built with Vite, deployable to any static host (Netlify, Cloudflare Pages, S3+CloudFront, or self-hosted nginx). The only backend dependency is a Supabase project for cloud document storage and authentication — you point the app at your own Supabase instance via environment variables. With no server-side rendering or API layer to maintain, operational burden is minimal: the app itself requires no uptime management, and Supabase handles auth and database reliability. Offline editing via the PWA means users are not fully dependent on your Supabase instance being available at all times.

There is no paid or managed cloud tier for Markdrop. The official hosted version at markdrop.vercel.app is free and community-run. Self-hosting means you own your data entirely and can configure Supabase storage limits, retention policies, and access controls to your requirements. What you give up compared to mature hosted markdown tools is support infrastructure, guaranteed uptime SLAs, and an upgrade path managed by a vendor — but given the app’s simplicity, these trade-offs are easily acceptable for most development teams.