# A Drag-and-Drop Email Builder That Starts From Your Brand

> Broadcast 2.34 adds a drag-and-drop email builder for broadcasts, templates and sequences, with a channel brand kit, a preview as any subscriber, and emails rendered as table-based HTML that works in Outlook.

Source: https://sendbroadcast.net/blog/drag-and-drop-email-builder-with-a-brand-kit

Up to now, there were two ways to write an email in [Broadcast](/). You could use the rich text editor, which is fine for a plain letter but has no columns and no real buttons. Or you could write the HTML yourself, which can do anything, provided you know which table attributes Outlook still respects.

A lot of newsletters sit somewhere in the middle. Logo at the top, a heading, an image, two or three short sections, a button, a footer. It takes a few minutes to sketch and much longer to hand-code so it holds up in every inbox. 2.34 adds a third option for exactly that kind of email.

## Building with blocks

When you start a broadcast, a template or a sequence step, you can now pick **Drag and Drop**. The editor opens in its own window. The blocks are on the left: heading, text, image, image with text, button, columns, divider, spacer, video, social links, a brand header and a footer. You drag them into the email or click to add them, and clicking a block in the email brings up its settings on the right.

![The drag-and-drop editor with the block palette on the left, a newsletter in the middle with a Read the story button selected, and the button settings on the right showing its colour follows the theme](https://sendbroadcast.net/assets/blog/drag-and-drop-email-editor-window-75cd083f.png)

Changes save as you go. Each save carries a version number, so if two people have the same design open, the second person to save is told the design changed instead of overwriting the first person's work. There's undo, a mobile view, and personalisation tags such as `{{ first_name }}` in any text field, which behave the same as they do everywhere else in Broadcast.

Behind the scenes, a design is stored as a document and Broadcast turns it into email HTML on the server. The output uses tables for layout, puts every style inline, draws buttons that Outlook can display, and stacks columns on narrow screens. The editor canvas, the preview, test emails and real sends all use that same code, so the email that goes out matches what you built.

## The brand kit

Anyone who has used an email builder knows the routine of setting the same colours and font on every new email. So there's now a **Design** page in your channel settings where you enter them once: logo, colours, font, corner radius, website and social profiles.

New drag-and-drop emails pick all of that up. The brand header block shows your logo linked to your website, buttons use your accent colour, and the social links block already has your profiles filled in. The page has a live preview, so you can see an example email change as you edit.

![The Design settings page with website and social links filled in, a warm orange accent colour, and a live preview of an email using that brand](https://sendbroadcast.net/assets/blog/brand-kit-design-settings-a8a8ec88.png)

You can still change a colour or the font for one particular email without touching the kit. You can also use the kit on your unsubscribe page, your double opt-in confirmation page and new opt-in forms. Each of those is a separate switch at the bottom of the Design page, and they all start off, so upgrading doesn't change anything your subscribers see.

## Previewing as a subscriber

Personalisation tags are hard to trust until you've seen them filled in. In the editor you can search for a subscriber by name or email, and the email is redrawn the way they'll get it, with their name, their custom fields, and any tag-based blocks shown or hidden for them.

![The editor previewing as ada.lovelace@gmail.com, with a yellow banner saying personalisation and visibility rules are applied, and the email greeting reading Hi Ada](https://sendbroadcast.net/assets/blog/email-editor-preview-as-subscriber-8a59d9e9.png)

Editing is switched off while the preview is showing. That way you can't type into the preview by mistake and end up saving someone's name into the design.

## What it doesn't do

Rich text and HTML emails work exactly as before. If you already have HTML templates you're happy with, there's no reason to move them.

I kept the builder simple on purpose. Blocks can go inside columns, but columns can't go inside columns, because deeply nested layouts are the ones that break in older email clients. If you need something the blocks can't do, there's an HTML block, and anything you paste into it has scripts and event handlers removed first.

The free [email template builder](/tools/free-email-template-builder) on this site uses the same document format. Inside Broadcast, though, the builder works with your channel's own images, subscribers and brand settings rather than keeping copies of its own.

## A few examples

A monthly newsletter. You set up the brand kit, then build the September issue from a brand header, a heading, two image-and-text sections and a button, and save it as a template. In October you start from that template, and most of your time goes into writing.

A welcome sequence. The first step is a drag-and-drop email with a Footer block, which brings in your address and unsubscribe link from Sender Details. Before turning the sequence on, you preview it as someone who signed up through your opt-in form and check that their plan name shows up in the greeting.

A promotion for regular customers. You send one broadcast to your whole list, but the block with the discount code is only shown to subscribers tagged `vip`. Previewing as a tagged subscriber shows the offer, and previewing as anyone else shows the email without it.

The builder arrived in 2.34. It's a new option you choose when you start an email, and the brand kit stays off your public pages unless you turn it on.

---

*The [drag-and-drop email builder documentation](/docs/block-email-builder) goes through every block and setting. If you're wondering how new features like this get introduced after an upgrade, there's a post on [the What's New tour](/blog/whats-new-tour-after-upgrade).*