Introduction

What Mail Quilt is, how it works, and what to know before you rely on it.

What it is

Mail Quilt is four packages for building email design into an app. You can take as much of it as you need:

• The Shell is a whole editor page, ready-made. You build nothing. The Playground is one.
• The editor is the <mail-quilt> element: the canvas and the side panel. You build your own page around it.
• The core and the renderer are the email as data, the Commands that change it, and the HTML. The editor is built on them, and you can build on them too.

Most of these docs are about the editor, because that’s where most apps start. Packages says what each of the four is for.

What people can do in the editor

Add <mail-quilt> to a page, and the people using your app can design emails without writing HTML:

• Build an email from Text, Heading, Image, Button, Divider and Spacer Blocks.
• Lay it out in Rows of one to four Columns.
• Drag Blocks in from the side panel, drag them to reorder them or move them to another Column, and drag Rows to reorder them. Everything they can do by dragging, they can also do with the keyboard.
• Make text bold, italic or underlined, add links, and write Merge Tags such as {{first_name}}.
• Change the settings of each Block and Row, and of the email as a whole.
• Undo and redo every change.
• Preview the exact HTML the email will be sent as.

To try it, open the Playground. There’s nothing to install.

How it works

Your app keeps the emails. The editor works on a JSON document, and after every change it hands you the new one. Save it wherever you like, such as in your database, and give it back to the editor to open the email again. The document format page describes it.

When an email is ready, the editor turns it into HTML with MJML, which writes the table-based markup that email clients need. Merge Tags stay in the HTML as written, so the service that sends your email can fill them in.

Mail Quilt doesn’t send email, store emails for you, or run a server. Its packages live in your app.

Add it to your app

• Any framework, or none: @mailquilt/editor registers the <mail-quilt> element. Load it through your bundler, or from a CDN on a page with no build step.
• React: @mailquilt/react wraps it as a MailQuilt component, which also works with server rendering.

The quick start has working code for each, and Packages says what the other two packages are for. Wrappers for Vue and Svelte are planned. To match the editor to your app’s colors and font, set its theme tokens.

Before you rely on it

• Mail Quilt is at version 0.x, so its API can still change between releases.
• The HTML it exports hasn’t been checked in Outlook. The tested email clients page has the details.
• Editing needs a screen at least 640 pixels wide. On a phone, the editor shows a notice instead, and the email can still be previewed.

Where to go next

Follow along

The roadmap says what’s planned and where to comment on it, or to report a problem.