Studio overview

The studio is MailInApp's visual email builder. Every project on your dashboard opens into it.

Starting from a purpose

New projects can start from a purpose: survey, promotion, newsletter, event, transactional, dashboard, classroom, or sports team, picked when you create the project. Choosing one opens a carousel of that topic's real starter templates, each a large, actual rendered preview rather than a mockup. Step through and pick one, and it seeds the canvas with a starter layout built from ordinary blocks (a rating block for surveys, a hero and coupon for promotions, and so on). There's nothing special about them afterward: edit, remove, or add to them like any other block. Start blank skips this and opens the plain default canvas.

See Quickstart for the picker, Responses & webhooks for how purpose shapes the responses dashboard, and Starter templates & your own library for saving your own templates privately or publishing them to the community gallery.

The workspace

Canvas — the center of the screen: a live rendering of your email. Click any element to select it; a breadcrumb bar shows the path from the email body down to it, and every ancestor is clickable.
Left rail — four panels, opened one at a time by clicking their icon: Insert (the block library — drag layout blocks like section, text, image, button, divider, spacer, and interactive blocks like carousel, poll, form, countdown, quiz onto the canvas; a search box filters everything by name), Tree (the full email structure — reorder blocks, select nested elements like a single carousel slide, collapse containers, hide a block from the output with its eye toggle without deleting it, or leave yourself a note via double-click rename; any container also carries a + that opens a searchable picker of exactly the child types it accepts — a form's expands into the same input variants as the Insert panel's Inputs section — so you can add without dragging, and the same picker appears in place of an empty container's "Drop here" placeholder on the canvas), Data (Data sources & merge tags — connect sources, pick the audience, browse fields), and Theme (see Theming below).
Inspector — the right-hand panel for whatever's selected, split into four tabs: Content (text, links, block-specific fields like a poll's choices), Style (colors, spacing, borders, custom CSS), Logic (repeat binding, display conditions), and Actions (move, duplicate, delete, ⧉ Wrap in… — the inverse of the Tree panel's +: drop the current selection into a fresh Section, Columns, Repeat or HTML element that legally holds it right where it sits, e.g. giving a lone button its own background, or turning one block into a two-column layout — and Save as component, see Reusable components). A search box above the tabs filters fields across all four at once.

Preview modes

Above the canvas, an Edit / Preview switch controls what you're looking at:

Edit — the block structure, selectable and editable.
Preview resolves merge tags, display conditions and repeats against a chosen recipient row, with a tier selector underneath: Live view (the same page recipients land on), Mailed and Outlook render the actual compiled HTML your recipients' inboxes would receive (the Outlook tier forces the same conditional-comment branches a real Outlook client would take), and Clients simulates one email app from real-inbox measurements. A dark-mode toggle shows each tier in dark mode.

The Device switch shows the email at desktop width or on a phone, and interactive blocks can be previewed after someone has answered. See Preview & test for all of it.

A zoom control (50–150%, or fit-to-width) scales the canvas without changing the underlying design.

Undo, redo & autosave

Every edit to the design — dragging a block, typing in a field, changing a color — is undoable with Ctrl/Cmd+Z (redo: Shift+Ctrl/Cmd+Z or Ctrl/Cmd+Y), including from inside a text field. Rapid edits (typing a sentence, dragging a slider) coalesce into a single undo step instead of one per keystroke.

The studio autosaves continuously — there's no save button, and closing the tab loses nothing; the project reopens exactly where you left it. If a teammate (or you, in another tab) edits the same email, changes to different blocks are merged as each of you saves. Only when you both change the same block does autosave pause and ask what to do. See Version history, comments & approval, which also covers restoring an earlier version.

Theming

The Theme panel holds the email's colors, type scale, button styles, link style, layout and dark mode, so a rebrand is one edit instead of hunting down every block's color field. A color field can hold a theme color, shown as a swatch picker alongside the usual color input, or its own literal color. Blocks that use a theme color restyle automatically when you change it, while any block you've set a literal color on keeps it. See Theme, phones & dark mode for every setting, your brand kit and fonts.

Media library

Some fields exist purely to hold an image: the Image block, a Video/Audio block's poster/cover image, a Carousel slide's image, a Flashcard's front/back image, and the Product block's photo. Those show a thumbnail and a Choose image… button in the Inspector instead of a URL box. Clicking it opens a grid of everything you've already uploaded to your account (not just this project), with an Upload new button right there for a PNG, JPEG, WebP or GIF up to 5MB. Pick one and it's written into the field immediately, the same as if you'd typed a URL. The picker is purely an authoring convenience, so nothing about how the block renders in mail, the live view, or the canvas changes.

Uploads are shared across every project on your account: upload a logo or product photo once and reuse it anywhere the picker appears. The full library is also browsable from Media in the dashboard nav, where you can upload, view, and delete assets outside of any specific project. Deleting an asset removes it from the library only — a block that already had its URL keeps rendering the image until you swap it for something else yourself.

Storage counts against your plan's quota (see pricing), shown as a meter alongside your other usage in Settings. Some fields take a link rather than an image instead — a slide's optional tap-through link, a video/audio block's own file src, a meeting link's Join URL. Those stay plain URL boxes: MailInApp only stores images, not video/audio files or arbitrary pages.

Reusable components

Built something worth using again — a styled header, a coupon section, a product row? Select it and choose Save as component… from the right-click menu or the Inspector's Actions tab. It's saved to your account and shows up under My components in the Insert panel's Sections tab in every email. Insert a fresh, independent copy, or keep it synced so an edit to the component reaches every email that uses it. See Editing on the canvas.

Live view

The Live view ↗ toolbar button opens the hosted web version of the email — a fully interactive page rendered from your current design. It's both a preview tool for you and the universal fallback recipients get when their email client can't render interactivity. The link is signed and valid for 30 days; see Live view links.

AI-assisted copy

Stuck on a subject line? Click ✨ Suggest next to the subject field on the send page. MailInApp drafts a few options grounded in the project's name, its purpose, and a short excerpt of the email's existing copy.

Suggestions are click-to-fill only — nothing is ever written into your project automatically. Suggestion requests count against your account's monthly allowance (see pricing), shared across every project and everyone editing them. For building or editing the email itself — not just one field — see Mia AI.

Size budget

Gmail clips messages larger than about 102KB and hides the rest behind "View entire message", including the footer and unsubscribe link. The studio tracks your email's compiled size against this budget while you build and warns you before it becomes a problem. More in Export & send.