Email-specific components
Sections, columns, buttons and dividers already exist as components, so a block you drop on the canvas maps to markup that was written for email rather than for a browser.
GrapesJS + MJML
Build Your Own Email Builder with GrapesJS
Create responsive emails visually with MJML, export production-ready HTML, and keep your templates, data and integrations in your own infrastructure.
Open sourceBSD-3-Clause coreMJML via grapesjs-mjmlSelf-hosted$0 platform fee
26k+
GitHub stars
100+
Plugins on GJS.Market
10 years
Active development
$0
License fee, always
Why build your own
An email editor is a dozen subsystems, not a canvas
Dragging blocks around is the part everyone pictures. The work that actually consumes a roadmap is everything sitting behind the canvas — and it is the same list whether you are adding email to a CRM, an ecommerce platform or a marketing SaaS.
What sits behind the canvas
- Responsive layout engine
- CSS inlining
- Outlook conditional markup
- Dark-mode variants
- Merge tags and personalisation
- Unsubscribe and preference links
- Image hosting and tracking pixels
- Template versioning
- Draft and autosave state
- Role and permission rules
- Provider hand-off
- Render testing across clients
Build the editor yourself
Months
- You own every subsystem above
- Email quirks land on your roadmap
- Each new block is engineering work
- Maintenance never ends
- Nothing here is your product
Start from GrapesJS
Days
- Canvas, blocks and style manager exist
- MJML handles the email-specific markup
- Plugins cover storage, assets and export
- You extend rather than originate
- Your team builds the product around it
Your email builder should work around your product — not the other way around.
Why MJML
Why Use MJML for Email?
Email HTML does not behave like web HTML. MJML is a markup language designed for email: you write semantic components, and its compiler emits the table-based, inlined HTML that mail clients expect. It is what turns a visual editor into an email editor.
Responsive layout, compiled
Column stacking and media-query handling are produced by the compiler instead of being hand-maintained per template.
Styles inlined for you
The compile step inlines CSS, which is what most mail clients need. You do not wire a separate inliner into the pipeline.
A sane authoring layer
MJML source is readable and diffable, so a template change reviews like code rather than like a wall of nested tables.
Still plain HTML at the end
The output is ordinary HTML. Anything that can send an HTML email can send it — no runtime dependency on MJML at send time.
Open source, both halves
mjml is MIT; the grapesjs-mjml plugin that brings it into GrapesJS is BSD-3-Clause. Neither adds a licence fee.
MJML vs raw HTML
What the compiler does that you would otherwise do
Both paths end in HTML. The difference is how much of the email-specific work you maintain by hand, and how much is generated for you on every save.
| Concern | MJML | Hand-written HTML |
|---|---|---|
| Responsive layout | Generated from components | Maintained manually per template |
| Email-specific components | Provided by the language | You build and maintain your own |
| CSS inlining | Part of the compile step | A separate tool in your pipeline |
| Client quirks | Handled in the compiler, centrally | Handled in each template |
| Authoring | Semantic markup, readable diffs | Nested tables, harder to review |
| Visual editing | Components map cleanly to blocks | More mapping work per block |
| Output | HTML | HTML |
MJML is designed to simplify responsive email development across major email clients. It removes a category of work; it does not remove the need to test what you send.
The pipeline
What Does Your Email Builder Produce?
Three artifacts come out of the editor and each has one job. Knowing which is which is most of the architecture decision.
Stage 01
Visual editor
The user arranges blocks on the canvas. The editor's own project state is JSON — this is what you save so the email can be reopened and edited later.
editor.getProjectData()- serialises to
Stage 02
MJML
The authoring representation. Readable, diffable, and the right thing to version when you want to see what actually changed between two revisions of a template.
editor.runCommand('mjml-code')- compiles to
Stage 03
Responsive HTML
The compiled, table-based, CSS-inlined output. This is the artifact you transmit, and the only one your sending infrastructure has to understand.
editor.runCommand('mjml-code-to-html')- is handed to
Stage 04
Your ESP or API
Delivery stays on your side. Any provider or in-house service that accepts HTML can send it, with your own credentials and your own sending domain.
POST /your-api/campaigns/:id/send
Ownership
Your Email Builder. Your Data. Your Infrastructure.
The editor is one layer. Everything commercially sensitive about email — the list, the sending domain, the reputation you have built with it — stays where it already is.
Your product
- Campaigns and schedules
- Subscriber list and segments
- Sending domain and DKIM
GrapesJS email editor
- Canvas and blocks
- MJML components
- Style manager
- Email blocks
- Template manager
- Asset uploads
Your infrastructure
- Your database
- Your media storage
- Your provider credentials
For the mechanics of mounting the editor inside an existing application, including auth and iframe strategy: See the embeddable page builder guide
Live demo
See a GrapesJS email editor before you build one
The newsletter editor demo published by the GrapesJS project. It loads only when you ask for it, so it costs the page nothing until then.
The open-source newsletter editor demo from grapesjs.com — drag blocks, edit content, and export the HTML.
Demo hosted by the GrapesJS project. It shows the core editing experience, not the plugins listed further down this page.
The workflow
From Template to Sent Email
- 1Step 1
Choose a template
The user starts from a saved template rather than an empty canvas. Templates are rows in your database, so you decide who sees which ones.
- 2Step 2
Edit visually
Blocks are dragged, text edited inline, styles adjusted in the style manager. The editor holds MJML components, so every edit stays inside email-safe markup.
- 3Step 3
Save the draft
Persist the project JSON through the Storage Manager to your own API. Autosave, drafts and version history are your application's behaviour, not the editor's.
- 4Step 4
Preview and test
Render the compiled HTML for review and send test messages through your provider. Client-by-client render testing is a capability you add — it is not built in.
- 5Step 5
Export the HTML
Compile the MJML to inlined HTML. Store it alongside the JSON and MJML so you always know exactly what was sent.
- 6Step 6
Send and track
Hand the HTML to your ESP or your own sending service. Opens, clicks and bounces come back through that provider, into your reporting.
Steps 1, 3, 4 and 6 are your application. GrapesJS and MJML own step 2 and step 5 — which is exactly the part that would otherwise take months.
Use cases
What Can You Build?
The same foundation, pointed at different products. Each of these is an editor plus your own storage, permissions and delivery.
Email marketing SaaS
Give customers a visual campaign builder inside your product instead of asking them to paste HTML from somewhere else.
See the drag-and-drop approachCRM
Let sales and success teams build and adjust outbound emails without filing a ticket with engineering.
See template managementMarketing automation
Author the emails that lifecycle and drip workflows send, with the same editor your users already know.
See the React implementationEcommerce
Promotional sends, order confirmations and cart-recovery emails, all built from one block library and your own brand rules.
See the SaaS architectureSaaS onboarding
Onboarding, activation and retention emails that your product team can change without a deploy.
Browse email pluginsAgencies
Reusable branded email systems per client, running on infrastructure you control rather than a per-seat platform.
See white-label optionsWhy GrapesJS
Why Use GrapesJS for Email?
GrapesJS is an editor framework rather than a hosted product. That distinction is the whole reason it can become your email builder instead of sitting next to it.
Open source
The core is published under BSD-3-Clause and is free for commercial use. You can read it, fork it, and ship it inside a paid product.
Self-hosted
The editor runs inside your own application. No third party sits between your users and their templates.
Extensible
Blocks, components, commands and panels are all extension points. A custom email block is a plugin, not a fork.
MJML support
grapesjs-mjml, maintained in the GrapesJS organisation, brings MJML components into the editor as first-class blocks.
Customisable UI
Panels, icons and theme are yours to change, so the editor looks like part of your product rather than an embedded tool.
Plugin ecosystem
100+ plugins on GJS.Market cover storage, assets, blocks and export, so most of the surrounding work is a purchase rather than a sprint.
GrapesJS vs hosted email builders
GrapesJS vs Unlayer vs Stripo
Unlayer and Stripo are hosted, commercially supported products, and for many teams that is the right trade. This table is about what you control and what you pay, not about which editor is better.
| Concern | GrapesJS | Unlayer | Stripo Plugin |
|---|---|---|---|
| Source available and open source | Yes — BSD-3-Clause | Not publicly documented | Not publicly documented |
| Free tier | Entire editor, $0 | Free plan, $0 | Free plan, $0 |
| Paid plans | None — plugins are one-off | $250/mo / $750/mo / $2,000/mo | $100/mo / $550/mo |
| Self-hosting the editor | Always — it runs in your app | On-premise on Enterprise | Server components on Enterprise |
| MJML as the authoring layer | Yes — grapesjs-mjml | Not publicly documented | Not publicly documented |
| Templates in your own database | Yes — you write the storage layer | Depends on plan and deployment | Depends on plan and deployment |
Vendor plan names and prices were read from the vendors' own public pricing pages on 2026-08-27 and can change at any time — check the source before you budget against them. Sources: Unlayer pricing · Stripo Plugin. "Not publicly documented" means the vendor does not state it publicly. It is not a claim that the capability is absent.
Plugin ecosystem
Extend Your Email Builder with GJS.Market Plugins
Every listing below is a real product with a live price. Together they cover the layers around the canvas — presets, blocks, storage, assets and export.
Blocks
-thumbnail.jpg&w=3840&q=70)
GrapesJS Email Blocky – Premium Responsive Email Blocks
A premium set of responsive email blocks, so your first template is an arrangement rather than a build.
$69.00View plugin
Templates
Templates Manager
Adds a template layer to the editor — save, list and reopen the layouts your users start from.
$39.00View plugin
Recommended stacks
Build the Email Builder Stack You Need
Four assemblies from the listings above. Each is a starting point — swap any layer for your own implementation when you have one.
Marketing email builder
For campaign and newsletter sending
- Newsletter PresetFree
- GrapesJS Email Blocky – Premium Responsive Email Blocks$69.00
- Grapesjs CloudinaryFree
- Export ZipFree
SaaS email builder
For customer-facing editing inside your product
See the SaaS architectureTransactional email editor
For receipts, notifications and system mail
See template managementAgency email builder
For reusable branded systems per client
- Newsletter PresetFree
- Templates Manager$39.00
- GrapesJS Email Blocky – Premium Responsive Email Blocks$69.00
- Grapesjs CloudinaryFree
Prices come live from the catalogue and can change.
Where teams start
Start With a Ready-Made Email
Six shapes cover most of what gets built first. Read them as briefs for your own block library, not as a catalogue.
Welcome
The first message after signup. One clear next action, minimal chrome, and content that still makes sense a week later when it fires late.
Newsletter
Repeating structure — a header, a run of stories, a footer. The template that most benefits from reusable blocks, because it is rebuilt every issue.
Product update
Feature announcements and release notes. Usually a hero, two or three item blocks, and a link into the product.
Promotional
Offer-led layout with a strong hero, product rows and a prominent call to action. The template your marketing team will want to edit most often.
Transactional
Receipts, confirmations and notifications. Data-heavy, mostly generated, and the one where merge tags and locked regions matter most.
Re-engagement
Win-back messages for inactive users, typically with preference and unsubscribe links given more prominence than usual.
These are descriptions of common email types, not products for sale. Start from one of the presets above and build them as your own blocks.
Output formats
Three artifacts, three jobs
Storing only the HTML is the mistake worth avoiding: it is the one representation you cannot reliably edit again.
JSON
Store and restore projects
The editor's own project state. Save it so a user can reopen an email exactly as they left it. This is the artifact your Storage Manager writes.
MJML
The authoring representation
Readable markup that reviews and diffs like code. Version it when you want a history of what changed in a template rather than a history of blobs.
HTML
What you actually send
Compiled, table-based and inlined. Hand this to your sending infrastructure and store the exact copy you sent for the record.
output.jsJS
editor.getProjectData(); // JSON - you store this
editor.runCommand('mjml-code'); // MJML - you version this
editor.runCommand('mjml-code-to-html'); // HTML - you send thisPersist all three. JSON keeps the email editable, MJML keeps it reviewable, HTML keeps it sendable.
Implementation blueprint
How to Build an Email Builder
- 101
Editor
Start with GrapesJS and the MJML plugin. At this point you have a working email canvas and can already produce HTML.
- 202
Templates and blocks
Turn your existing emails into reusable blocks, and decide which regions users may edit and which stay locked.
- 303
Storage
Point the Storage Manager at your API. Save project JSON plus template metadata — owner, name, updated-at, whatever your product needs.
- 404
Preview and validation
Render the compiled HTML for review, and check links, images and required content before anything is queued for delivery.
- 505
Export and delivery
Compile to HTML and hand it to your ESP or your own sending service, then feed the resulting metrics back into your reporting.
Steps 1 and 5 are largely solved by the packages on this page. Steps 2 to 4 are where your product's actual requirements live.
Quick start
Start Building in Minutes
Framework-neutral core plus the official MJML plugin. If you are working in React or Next.js, the framework-specific setup is linked below.
npm install grapesjs grapesjs-mjmleditor.jsJS
import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';
// The editor core plus the official MJML plugin. Both BSD-3-Clause.
const editor = grapesjs.init({
container: '#email-editor',
fromElement: true,
plugins: [grapesjsMjml],
pluginsOpts: {
[grapesjsMjml]: {
// Serve the drag-in placeholder from your own CDN, not a third party.
imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
},
},
});Once the editor is mounted, three commands give you the three artifacts:
export.jsJS
// 1 - the MJML source the editor is currently holding.
const mjml = editor.runCommand('mjml-code');
// 2 - the compiled, table-based, CSS-inlined HTML you actually send.
const { html } = editor.runCommand('mjml-code-to-html');
// 3 - store all three; hand only the HTML to your sending provider.
await fetch(`/api/campaigns/${campaignId}/template`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
project: editor.getProjectData(), // re-openable in the editor
mjml, // diffable source of truth
html, // what your provider receives
}),
});If you do not want a compile step, the newsletter preset is the older, simpler path — table blocks with a CSS inliner and no MJML:
newsletter.jsJS
import newsletter from 'grapesjs-preset-newsletter';
// The pre-MJML path: table blocks and a CSS inliner, no compile step.
const editor = grapesjs.init({
container: '#email-editor',
plugins: [newsletter],
pluginsOpts: {
'grapesjs-preset-newsletter': { inlineCss: true },
},
});
const html = editor.runCommand('gjs-get-inlined-html');Versions verified on 2026-08-27: grapesjs 0.23.6, grapesjs-mjml 1.0.8, grapesjs-preset-newsletter 1.0.2.
Build vs buy
Build an Email Editor From Scratch or Use GrapesJS?
The question is rarely whether you could build an editor. It is which parts of one are worth your team's time.
| Layer | From scratch | GrapesJS + GJS.Market |
|---|---|---|
| Editor canvas | You build and maintain it | Open-source core, BSD-3-Clause |
| Drag and drop | You build and maintain it | Built in |
| Email markup | You solve the client quirks | MJML via grapesjs-mjml |
| Blocks and components | Every block is engineering work | Plugins, plus your own on the same API |
| Storage and assets | You build and maintain it | Plugins, or your own endpoint |
| Backend, database and ESP | Yours | Yours — unchanged |
| Ongoing maintenance | The whole editor | Your extensions |
Build your email product — not another email editor from scratch.
Product value
Turn Email Editing Into a Product Feature
Email editing is not only an engineering decision. Where it lives changes how your product is used.
Fewer engineering requests
Routine copy, image and layout changes stop arriving as tickets, because the people who want them can make them.
A more complete product
Email creation stays inside your application instead of sending users out to a separate tool and back again.
Room for premium tiers
Advanced editing, template libraries or brand controls can sit on higher plans, since you control the feature rather than reselling someone else's.
More reason to stay
Templates, brand rules and history accumulate inside your platform, which makes it the natural place to keep working.
Predictable cost
No per-seat or per-send platform fee sitting between your growth and your margin.
Data stays yours
Recipients, templates and campaign content live in your database, which simplifies both compliance answers and migrations.
These are the outcomes teams build toward. We do not publish conversion or time-saving figures we have not measured.
Who it's for
Built for Teams That Need Email Editing
This page is written for the people who have to decide whether email editing is bought, rented or built.
SaaS founders
Ship email editing without first funding the editor infrastructure underneath it.
CTOs and architects
Keep the data model, the hosting and the delivery path inside decisions you already own.
Product teams
Make email a native feature with your own UX rather than an embedded third-party surface.
Developers
Extend a documented editor API with custom blocks, components and commands.
Ecommerce teams
Run promotional and transactional email off one block library and one set of brand rules.
Agencies
Build reusable branded email systems per client without per-seat platform costs.
Custom development
Need a Custom Email Builder?
Custom blocks, integrations, storage, white-label UI or a complete email builder implementation — we can build it around your product rather than beside it.
Related solutions
Looking for something more specific?
This page is about GrapesJS and MJML as the foundation. These cover the neighbouring questions.
React email builder
The same foundation wired into a React application, with the component lifecycle handled properly.
Build an email editor in ReactDrag-and-drop email builder
The editing experience itself — what your non-technical users see and how it behaves.
See drag-and-drop email editingEmail template builder
Creating, storing and reusing templates across teams and campaigns.
Manage email templatesEmbeddable page builder
The general case: embedding a visual editor of any kind inside a SaaS product.
Embed a visual editorFAQ
Frequently Asked Questions
Get started
Build Your Own Email Builder
Start with GrapesJS and MJML, then add the plugins and integrations your product needs.
Browse email plugins
Presets, blocks, storage, assets and export — real listings with live prices.
Browse email pluginsStart with GrapesJS
Install the open-source core and the MJML plugin, and have an email canvas running today.
Read the tutorialNeed custom development?
Custom blocks, integrations or a complete email builder built around your product.
Discuss your project