Mail Studio
January 25, 2026 · View on GitHub
Mail Studio
A modern, visual email editor built with MJML and Next.js. Create beautiful, responsive email templates with an intuitive drag-and-drop interface.
Features
Visual Editor
- Drag & Drop - Intuitive component placement with visual feedback
- Multiple View Modes - Switch between Canvas, Edit, Code, and Preview modes
- Real-time Preview - See your changes instantly as you edit
- Properties Panel - Fine-tune every aspect of your components
Email Components
- Layout - Section, Column, Group, Wrapper
- Content - Text, Image, Button, Divider, Spacer, Table
- Interactive - Accordion, Carousel, Navbar
- Social - Social icons with customizable links
Developer Experience
- Monaco Code Editor - Full-featured code editing with syntax highlighting
- MJML Compilation - Real-time MJML to HTML conversion
- Undo/Redo - Full history support with keyboard shortcuts
- Keyboard Shortcuts - Efficient workflow with hotkeys
Email Delivery
- Send Test Emails - Built-in email sending via Nodemailer or Resend
- Export HTML - Get production-ready HTML output
Templates
Pre-built templates to get you started:
- Welcome Email
- Newsletter
- Marketing Promo
- Account Notification
Tech Stack
- Framework: Next.js 16
- UI Library: React 19
- Email Engine: MJML Browser
- State Management: Zustand
- Drag & Drop: dnd-kit
- Code Editor: Monaco Editor
- Styling: Tailwind CSS 4
- UI Components: Radix UI
Deploy Your Own
You can deploy this template to Vercel with the button below:
Running locally
Prerequisites
- Node.js 18+
- pnpm (recommended)
Installation
# Clone the repository
git clone https://github.com/wzc520pyfm/mail-studio.git
cd mail-studio
# Install dependencies
pnpm install
# Start the development server
pnpm dev
Open http://localhost:3000 with your browser to see the editor.
Available Scripts
# Development
pnpm dev # Start development server
# Build
pnpm build # Create production build
pnpm start # Start production server
# Code Quality
pnpm lint # Run ESLint
pnpm lint:fix # Fix ESLint errors
pnpm format # Format code with Prettier
pnpm format:check # Check code formatting
Usage
Editor Modes
| Mode | Description |
|---|---|
| Canvas | Visual drag-and-drop editing with component sidebar |
| Edit | Focused editing mode for quick content changes |
| Code | Direct MJML code editing with Monaco Editor |
| Preview | See the final rendered email output |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl/⌘ + Z | Undo |
Ctrl/⌘ + Shift + Z | Redo |
Delete / Backspace | Delete selected component |
Escape | Deselect component |
Configuration
Email Sending
To enable email sending, configure your environment variables:
# For Resend
RESEND_API_KEY=your_resend_api_key
# Or for Nodemailer
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=your_username
SMTP_PASS=your_password
Project Structure
mail-studio/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ ├── page.tsx # Main editor page
│ │ └── layout.tsx # Root layout
│ ├── components/
│ │ └── ui/ # Reusable UI components
│ └── features/
│ └── editor/ # Editor feature module
│ ├── components/ # Editor components
│ │ ├── canvas/ # Canvas view components
│ │ ├── code-editor/# Monaco code editor
│ │ ├── edit-mode/ # Edit mode components
│ │ ├── preview/ # Preview component
│ │ ├── properties/ # Properties panel
│ │ ├── sidebar/ # Component sidebar
│ │ └── toolbar/ # Top toolbar
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and MJML schema
│ ├── stores/ # Zustand stores
│ └── types/ # TypeScript types
├── public/ # Static assets
└── package.json
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
This project is open source and available under the MIT License.