wzc520pyfm / mail-studio
A modern email editor, easily create beautiful and responsive email.
View on GitHubAI Architecture Analysis
This repository is indexed by RepoMind. By analyzing wzc520pyfm/mail-studio in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Overview (README excerpt)
Crawler viewMail 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 Open http://localhost:3000 with your browser to see the editor. Available Scripts 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 | | -------------------- | ------------------------- | | | Undo | | | Redo | | | Delete selected component | | | Deselect component | Configuration Email Sending To enable email sending, configure your environment variables: Project Structure Contributing Contributions are welcome! Please feel free to submit a Pull Request. • Fork the repository • Create your feature branch ( ) • Commit your changes ( ) • Push to the branch ( ) • Open a Pull Request License This project is open source and available under the MIT License. Acknowledgments • MJML - The framework that makes responsive emails easy • Next.js - The React framework for production • dnd-kit - Modern drag and drop for React • Radix UI - Unstyled, accessible components