Design Studio

You write a notification here rather than in code, and a product manager can edit the wording after you ship it. One template holds every channel the message goes out on, each with its own content.

Design Studio: the channel rail and blocks panel on the left, the canvas in the center, and the styles panel on the right

Design a template

Create a Template

Open , select Add template, and choose Design Studio v2. Name it and create it.

This page documents Design Studio v2. The other editor in the console is .

Pick a channel and its routing

Select the Email channel tab to activate it. Open the routing selector in the toolbar to choose which Provider delivers it. Routing configurations are reusable across Templates, so a change applies everywhere. See .

Add content

Drag blocks onto the canvas: Text for the message, Button for the call to action, plus Heading, Image, Divider, and Spacer. Select a block to edit it inline. Use the settings panel for alignment, size, and color. Courier auto-saves.

The template editor: channel rail and blocks on the left, canvas in the center, styles panel on the right

Insert a variable

Type {{ to open the variable picker, or select the variable icon in the block toolbar. Variables are double-braced:

{{profile.name}} for a Profile field
{{data.invite_url}} for send data
{{tenant.name}} and {{tenant.properties.tier}} for the on the send
{{urls.preferences}} and {{urls.unsubscribe}} for the built-in links

Every variable needs its namespace prefix. A bare {{invite_url}} does not fall back to data, so the editor marks it invalid. See .

Build per-channel variants

Switch channel tabs to build variants for SMS, push, in-app, and chat. Each channel gets an editor built for its format. Courier adapts shared content to each channel’s requirements.

Preview and send a test

Select Preview & Test, create a test event, then fill the data and profile objects with values matching your variables:

{
  "data": { "invite_url": "https://www.acme-corp.com/invite" },
  "profile": { "email": "sarah@acme-corp.com", "name": "Sarah Bennett" }
}

The preview renders every channel variant with your data. A variable still showing as raw {{...}} means the path does not match your test event. Send Test delivers a live copy to yourself, so you catch broken links before publishing.

Apply a Brand and publish

Optionally apply a from the toolbar for a consistent logo, colors, header, and footer. Then select Publish. Edits stay in the draft until you publish.Copy the Template ID from the top of the editor.

Layout

Three areas, left to right:

Channel tabs switch between Email, SMS, Push, In-App, Slack, and MS Teams.
Canvas is where you drag blocks and edit content.
Settings holds the selected block’s options.

The toolbar carries the Brand selector, routing selector, version history, Preview & Test, and (name, alias, subscription Topic, message tags).

Channels

Not every block works on every channel.

Channel	Blocks	Notes
Email	All	Full HTML, images, HTML blocks, Brand header and footer, and custom
SMS	Text only	No formatting. Variables work. Carrier character limits apply.
Push	Text only	Title and body. Length limits vary by platform.
In-App	Text only	Renders in the .
Slack	Subset
Microsoft Teams	Subset

Available blocks

Block	What it does	Notes
Heading	Large text for titles and section headers	Choose the heading level (H1, H2, H3). A heading is a text block with a heading level, so it also supports variables and alignment.
Text	Paragraphs of body copy	Rich formatting (bold, italic, links, lists) on email. Variables work on every channel, with plain text on SMS, push, and Inbox.
Image	Embeds an image	Set the image URL (or a variable), alt text for accessibility, an optional link, and width or alignment.
Button	Clickable call-to-action button	See Buttons for label, link, and style settings.
Spacer	Adds vertical space between blocks	Adjust the height in the block settings.
Divider	Horizontal line between sections	Set color, thickness, and corner radius in the block settings.
List	Bulleted or numbered list	See Lists for ordered vs. unordered types and looping over a data array.
Column	Multi-column layout	See Columns for column count and per-cell styling.
HTML	Raw HTML for custom markup	See HTML for inline blocks and whole-email HTML.
Blockquote	Quoted or highlighted text for testimonials and pull quotes	Not in the default sidebar yet. Add it from the slash menu or when it is enabled for your workspace.

Adding blocks

Select a channel

Pick a channel from the left sidebar.

Drag a block onto the canvas

Drag a block from the block sidebar to the spot you want.

Reorder as needed

Drag blocks up or down to reorder them.

Block sidebar in Design Studio — Block Sidebar

Block settings

Select a block and its settings open in the right panel. is the reference for every setting each block exposes, with its default. Click a block to open its settings in the right panel. They vary by block type and may include:

Frame: padding and margin.
Border: border style and radius.
Alignment: text and content alignment.
Colors: background and text colors.

Copying and removing blocks

When you select a block, action icons appear:

Copy: duplicate the block directly below.
Delete: remove the block from the canvas.

Copy and delete block actions — Block Actions

Buttons

Select a button block to open its settings:

Label: text on the button. work here (e.g. View {{data.product_name}}).
Link URL: where the button goes. Variables work here too.
Alignment: left, center, or right.
Background color: button fill color.
Border radius: corner rounding.
Border size: outline thickness.
Padding: space around the button.

Button block in Design Studio — Button Block

Lists

Select a List block to open its settings:

Type: toggle between Unordered (bulleted) and Ordered (numbered).
Padding: horizontal and vertical padding in pixels.
Loop on: repeat the list for each item in a data array (see below).

List block settings panel showing type, padding, and loop on toggle — List Settings

Looping over data

The Loop on toggle repeats the list for each item in a data array you send on the call.

Enable Loop on

Select the List block and turn on Loop on.

Set the data path

Enter a Data path pointing to an array in your data payload (e.g. data.order_items). The path must start with data..

Reference the current item

In list item text, reference fields on the current item as {{$.item.name}} and {{$.item.price}}.

Given this Send API payload:

Send request

{
  "message": {
    "to": { "user_id": "user_123" },
    "template": "nt_01kx4h2jdafq8bk9aftxak4b40",
    "data": {
      "order_items": [
        { "name": "Wireless Mouse", "quantity": 1, "price": "$29.99" },
        { "name": "USB-C Hub", "quantity": 2, "price": "$44.99" },
        { "name": "Laptop Stand", "quantity": 1, "price": "$59.99" }
      ]
    }
  }
}

Set the data path to data.order_items, then use {{$.item.name}}, {{$.item.quantity}}, and {{$.item.price}} in your list item text. Courier expands the list at send time, one item per array entry.

Preview showing expanded list items from a looped data array — List Loop Preview

A data path must start with data. and point to an array. Design Studio validates it against your data, so you catch mismatches before sending. At render time, Courier’s expands every iteration into one list block, so spacing and formatting stay consistent. For loop logic the List block does not support (nested loops, conditional items, custom markup), use an HTML block with raw Handlebars.

Columns

A column block starts as a two-column row with equal widths. Each cell is an independent container that accepts any block type, including nested columns. Select the column block to configure it:

Columns count: choose 1, 2, 3, or 4 columns.
Frame: horizontal and vertical padding (pixels) and background color for each cell.
Border: width, radius, and color for each cell.
Conditions: show or hide the block based on profile or data values.

Frame and border settings apply per cell, so you can style each column independently.

Column layout settings panel in Design Studio — Column Layout Settings

Columns render differently per channel:

Channel	Behavior
Email	Full multi-column layout using MJML for maximum email client compatibility
Push	Columns stack vertically (single-column fallback)
SMS	Not applicable. Content renders as plain text
In-App (Inbox)	Full support with responsive behavior

Mobile email clients usually stack columns vertically, so keep to 2 or 3 columns and write content that reads well both side by side and stacked.

HTML

HTML gives you full control of your markup for custom tables, tracking pixels, or porting an existing HTML email into Courier. There are two ways to use it. Picking the wrong one returns a confusing Invalid input.

Your goal	Use	How
Add one custom section alongside drag-and-drop blocks	Inline HTML block	Add an HTML block in Design Studio
Bring an existing full HTML email into Courier	Whole-email HTML	Set `raw.html` on the email channel
Add HTML to a template programmatically (API)	Whole-email HTML	`raw.html` (the inline block is not writable via the API yet)

Add an inline HTML block

The HTML block gives you a code editor in the right panel. Enter standard HTML (like <div>, <table>, or <img>) and inline CSS. Your changes appear in the canvas preview as you type.

HTML block in Design Studio — HTML Block

An inline HTML block is a fragment, not a full page. Leave out <!DOCTYPE html>, <html>, <head>, and <body>, because Courier composes your markup alongside the other blocks. For a full document, use whole-email HTML. The expand icon in the editor’s top-right corner opens a larger window.

Variables and Handlebars

HTML blocks support in {{variable}} syntax and every , including {{#if}} for conditionals and {{#each}} for arrays. Inside an inline HTML block, Handlebars resolve automatically, with no transformer to configure. This is the place for helper expressions. A rich-text block turns {{ into a variable chip, so a helper call typed there is flagged invalid. An HTML block takes raw Handlebars as written.

<ul>
{{#each data.items}}
  <li>{{this.name}}: {{this.price}}</li>
{{/each}}
</ul>

Use this for loop structures beyond the List block’s Loop on feature, such as nested loops or fully custom markup.

Handlebars and variables in HTML block — Handlebars Example

Variables and Handlebars expressions resolve on send, so shows the raw syntax rather than sample values.

Send a full HTML email

To use a complete HTML document, put it on the email node’s raw.html. Declare the handlebars transformer so your {{variables}} resolve. The meta title sets the subject line, and raw.html replaces that channel’s rendered body.

{
  "content": {
    "version": "2022-01-01",
    "elements": [
      {
        "type": "channel",
        "channel": "email",
        "elements": [
          { "type": "meta", "title": "Your order confirmation" }
        ],
        "raw": {
          "transformers": ["handlebars"],
          "html": "<!DOCTYPE html><html><body><h1>Hi {{name}}</h1><p>Your order shipped.</p></body></html>"
        }
      }
    ]
  }
}

This shape works with and , and renders your markup as written.

The inline type: "html" block is not writable through the Templates API yet, and sending one to or returns Invalid input. Use whole-email raw.html instead.

Get started

Send messages

Journeys

Broadcasts

Design

Recipients

Tenants

Monitoring

Workspaces

Resources

Design a template

Layout

Channels

Available blocks

Adding blocks

Block settings

Copying and removing blocks

Buttons

Lists

Looping over data

Columns

HTML

Add an inline HTML block

Variables and Handlebars

Send a full HTML email

​Design a template

​Layout

​Channels

​Available blocks

​Adding blocks

​Block settings

​Copying and removing blocks

​Buttons

​Lists

​Looping over data

​Columns

​HTML

​Add an inline HTML block

​Variables and Handlebars

​Send a full HTML email

Design a template

Layout

Channels

Available blocks

Adding blocks

Block settings

Copying and removing blocks

Buttons

Lists

Looping over data

Columns

HTML

Add an inline HTML block

Variables and Handlebars

Send a full HTML email