Skip to content

Markdrop - A powerful visual markdown editor and builder. Create beautiful README files, documentation, and markdown content with an intuitive drag-and-drop interface. Features live preview, custom blocks, and export capabilities.

License

Notifications You must be signed in to change notification settings

AliXSteps/Markdrop

 
 

Repository files navigation

markdrop_repo

Turn Ideas Into Beautiful Markdown

A modern, visual markdown editor that makes creating professional .md files as easy as writing naturally.

WebsiteRoadmapContributingCode of ConductLicense

Demo

MarkDrop Demo

Builder Preview

Builder View Preview View

Features

Visual Block-Based Editor

  • Drag & Drop Interface - Intuitive block-based editing with drag-and-drop reordering
  • Live Preview - Real-time markdown preview alongside your editor
  • Multiple View Modes - Switch between Editor, Raw Markdown, and Preview modes

Rich Content Blocks

  • Headings - H1-H6 with proper formatting
  • Text Elements - Paragraphs, blockquotes, and formatted text
  • Lists - Bullet lists, numbered lists, and task lists with checkboxes
  • Code Blocks - Syntax-highlighted code with language support
  • Media - Images with alignment options, videos, and links
  • Tables - Full table support with editing capabilities
  • Special Elements - Shield badges, skill icons, HTML blocks, and horizontal separators

Productivity Features

  • Import/Export - Import existing markdown files and export to multiple formats (.md, .pdf, .html)
  • Undo/Redo - Full history management with keyboard shortcuts
  • Auto-save - Automatic saving to local storage
  • Statistics - Real-time word count, character count, and reading time estimation
  • Reset Functionality - Quick reset to start fresh

Tech Stack

Category Technologies
Frontend Framework React 18
Build Tool Vite
UI Components Shadcn/UI
Styling Tailwind CSS
Drag & Drop @dnd-kit
Markdown Processing Remark, Rehype
Code Highlighting Prism.js / Shiki

Contributing

We welcome contributions! Read our contributing guide to get started.

Support

If you find this project helpful, please consider:

  • Starring the repository to show your support
  • Reporting bugs you encounter
  • Suggesting new features
  • Contributing to the codebase
  • Sharing with others who might find it useful

Turn your ideas into beautiful markdown, one block at a time.

About

Markdrop - A powerful visual markdown editor and builder. Create beautiful README files, documentation, and markdown content with an intuitive drag-and-drop interface. Features live preview, custom blocks, and export capabilities.

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.0%
  • CSS 2.2%
  • HTML 0.8%