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…), so 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. Next to any text field, an ✨ Suggest button drafts a few rewrite options with AI — see AI-assisted copy below.

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 React page recipients land on), Mailed — modern and Mailed — 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, so you can check the fallback without owning a copy of Outlook. A dark-mode toggle simulates the live-view tier the way an email client's dark mode would render 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 you and a teammate have the same project open at once, the second save shows a "Changed elsewhere" banner instead of silently overwriting the first — reload to pick up the latest version, or Save as copy to keep your changes as a new project.

Theming

The Theme panel sets a handful of project-wide tokens — brand, accent, text, muted and background colors, a font stack, and the default button corner radius — so a rebrand is one edit instead of hunting down every block's color field. A color field can hold a token reference (shown as a swatch picker alongside the usual color input) or its own literal color; blocks that ship with a token reference (buttons, social icons, form/quiz submit buttons) restyle automatically when you change the token, while any block you've set a literal color on keeps it. Unthemed projects render exactly as before — the panel just makes brand colors explicit instead of copy-pasted hex codes.

Media library

Any field whose whole job is holding 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 — shows 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. Fields that take a link rather than an image — a slide's optional tap-through link, a video/audio block's own file src, a meeting link's Join URL — 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, open the Inspector's Actions tab, and Save as component. It's saved to your account (not just this project) and shows up under My components at the top of the Insert panel in every project from then on — drag or click to insert a fresh, fully independent copy, restyle it however you like, rename or delete the saved component from the same list. This is different from the Prebuilt section's built-in compositions (see Interactive blocks): those ship with MailInApp for everyone, while a saved component is yours, built from your own designs.

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 wording? Click ✨ Suggest next to a heading, text, or button field in the Inspector, or next to the subject line on the send page, and 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.

Size budget

Gmail clips messages larger than about 102KB — and a clipped email loses its <style> block, which silently disables all CSS interactivity. 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.