Build responsive emails with JavaScript — without the hosted tool pricing
GrapesJS is the most widely used open-source visual builder framework in JavaScript. Combined with the MJML plugin and email-specific extensions from GJS.Market, it becomes a fully self-hosted drag-and-drop email builder that rivals any SaaS product — at zero platform cost. Own your editor, own your templates, and integrate with any email service provider through a clean API.
Browse email plugins →Why Use GrapesJS for Email — 5 Reasons Over Hosted Tools
No per-send pricing
Hosted email builders often charge per email sent or per subscriber. With GrapesJS, the builder is yours — integrate with any ESP and pay only for what you send.
Own your data
Email templates, user preferences, and export history stay on your infrastructure. No third-party access to your templates or customer data.
Custom blocks
Build unlimited custom blocks tailored to your brand — product cards, event banners, dynamic content zones — with full control over the HTML output.
Self-hosted
Deploy the email builder to your own server, VPS, or cloud environment. No SaaS dependency, no pricing tier changes, no feature gating.
Integrate with any API
Connect directly to Mailchimp, SendGrid, Postmark, or your own email delivery service. GrapesJS is agnostic — the output is clean HTML and MJML.
MJML Integration — Why It Solves Email Rendering
Email HTML is notoriously difficult to get right across clients. Gmail strips certain CSS properties. Outlook uses Microsoft Word's rendering engine. Apple Mail handles things differently again. The result: developers spend hours debugging table-based layouts that look broken in one client or another.
MJML solves this by providing a set of semantic components — mj-section, mj-column, mj-text, mj-image — that compile to battle-tested HTML table layouts. The GrapesJS MJML plugin maps these components to draggable blocks, giving your users a visual editor that outputs cross-client responsive email HTML automatically.
GrapesJS Email Preset Initialization
The following example initializes GrapesJS with the newsletter preset plugin and demonstrates how to retrieve HTML, CSS, and MJML output from the editor.
import grapesjs from 'grapesjs';
import grapesjsNewsletterPlugin from 'grapesjs-preset-newsletter';
const editor = grapesjs.init({
container: '#editor',
plugins: [grapesjsNewsletterPlugin],
pluginsOpts: {
[grapesjsNewsletterPlugin]: {
// Newsletter plugin options
modalLabelImport: 'Paste all your code here below and click import',
modalLabelExport: 'Copy the code and use it wherever you want',
},
},
storageManager: false,
});
// Get HTML output
const html = editor.getHtml();
const css = editor.getCss();
// Get MJML output (with MJML plugin)
const mjml = editor.runCommand('mjml-export');Email Builder Plugins on GJS.Market
GrapesJS MJML
Build MJML-based responsive email templates with drag-and-drop
Newsletter Preset
Pre-built newsletter blocks, sections, and column layouts
Email Preview Plugin
Preview emails across desktop and mobile viewports
Dynamic Content Blocks
Merge tag support and conditional content blocks
ESP Export Plugin
Export templates directly to Mailchimp, SendGrid, or Postmark
HTML Email Inliner
Automatically inline CSS for maximum email client compatibility
Email Output Formats
HTML
Most compatibleStandard HTML output with inline styles. Compatible with all email clients. Use editor.getHtml() and editor.getCss() to retrieve the output.
MJML
RecommendedMJML is a markup language that compiles to responsive HTML. Using the GrapesJS MJML plugin, your users build with MJML components and export clean, client-safe HTML.
JSON
For storageGrapesJS stores the canvas as a JSON component tree. Use editor.getProjectData() to save and restore templates programmatically in your database.
Frequently Asked Questions
Ready to build your email editor?
Browse all email builder plugins on GJS.Market and start building today.
Browse email builder plugins →