Markpad

A beautiful markdown editor with cloud sync

Write markdown with real-time preview, rich formatting, cloud storage, and multiple export options.

✨ Features

Free Features

• 🔄 Real-time preview
• ⌨️ Keyboard shortcuts
• 🎨 Dark/Light mode
• 💾 Local auto-save
• 📱 Responsive design
• 🔄 Vertical/Horizontal split layout
• 📋 Copy markdown or formatted text
• 📤 Export to multiple formats

Premium Features

• ☁️ Cloud sync
• 📝 Multiple documents
• 📎 Document organization
• 🔄 Real-time autosave
• 🔒 Secure storage

🚀 Getting Started

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Environment Setup

Create a .env.local file with:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

🎯 Usage

Free Version

1. Start typing in the editor panel
2. Use the toolbar or keyboard shortcuts for formatting
3. See your formatted text in real-time
4. Copy or export your document

Premium Version

1. Sign up for an account
2. Create and manage multiple documents
3. Access your documents from anywhere
4. Automatic cloud backup

⌨️ Keyboard Shortcuts

• 📝 Real-time markdown preview
• ⌨️ Keyboard shortcuts for quick formatting
• 🎨 Dark/Light mode
• 💾 Auto-save content
• 📱 Responsive design
• 🔄 Vertical/Horizontal split layout
• 📋 Copy markdown or formatted text
• 📤 Export to multiple formats:
  • Markdown (.md)
  • Plain Text (.txt)
  • Word Document (.docx)
  • OpenDocument (.odt)

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🎯 Usage

1. Start typing in the editor panel
2. Use the toolbar or keyboard shortcuts for formatting
3. See your formatted text in real-time in the preview panel
4. Copy either markdown or formatted text
5. Export your document in your preferred format

⌨️ Keyboard Shortcuts

• Bold: Ctrl/Cmd + B
• Italic: Ctrl/Cmd + I
• Underline: Ctrl/Cmd + U
• Code Block: Ctrl/Cmd + `
• Link: Ctrl/Cmd + K
• Heading 1: Ctrl/Cmd + 1
• Heading 2: Ctrl/Cmd + 2
• Heading 3: Ctrl/Cmd + 3
• Strikethrough: Ctrl/Cmd + S
• Bullet List: Ctrl/Cmd + 8
• Numbered List: Ctrl/Cmd + 9
• Superscript: Ctrl/Cmd + 6
• Subscript: Ctrl/Cmd + 5

🔒 Authentication

• Email-based authentication
• Secure password reset
• Email verification
• Protected routes

💾 Database Schema

Profiles

• User profile management
• Subscription status tracking
• Stripe integration ready

Documents

• Document storage
• Automatic timestamps
• Row-level security

🛠️ Technologies

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Supabase
• React Router DOM
• Sonner (Toasts)
• React Router DOM
• Marked (Markdown parsing)
• DocX (Word document generation)

📁 Project Structure

markpad/
├── src/
│   ├── components/    # React components
│   ├── pages/        # Route pages
│   ├── hooks/        # Custom React hooks
│   ├── lib/          # Core utilities
│   ├── types/        # TypeScript types
│   ├── utils/        # Utility functions
│   └── main.tsx      # Entry point
├── public/           # Static assets
└── dist/            # Production build

🔒 Privacy

• Free version: All content stored locally
• Premium version: Secure cloud storage
• Email used only for authentication
• Your privacy is our priority

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request

📄 License

Free to use and open to everyone.

👨‍💻 Author

Created by Georgi from Mangia Studios Limited.

❤️ Support

If you find Markpad useful, consider buying me a coffee ☕