Skip to main content
HTML lets you take full control of your markup — custom tables, tracking pixels, or porting an existing HTML email into Courier. There are two distinct ways to use it, and choosing the right one is the difference between “it just works” and a confusing Invalid input.
  • Inline HTML block (this page): an HTML fragment (e.g. a <div> or <table>) that sits among your other blocks in a channel. Best for mixing one custom section into an otherwise drag-and-drop email.
  • Whole-email HTML: a complete <!DOCTYPE html> document set on the channel’s raw.html, which replaces the rendered body for that channel. Best for porting a legacy HTML email.

​
Which should I use?

​
Adding an inline HTML block

  1. In Design Studio, select a channel.
  2. Add an HTML block from the block sidebar or toolbar.
  3. Enter your HTML in the block editor.
HTML block in Design Studio

HTML Block

An inline HTML block is a fragment, not a full page. Don’t include <!DOCTYPE html>, <html>, <head>, or <body> — Courier composes your markup into the email alongside the other blocks. For a full document, use whole-email HTML instead.

​
HTML editor

The HTML block offers an inline code editor in the right panel. Enter standard HTML (like <div>, <table>, or <img>) and inline CSS for custom layouts or tracking (e.g., analytics pixels).
HTML editor in Design Studio

HTML Editor

Changes in the editor appear instantly in the canvas preview as you type.
HTML example in Design Studio

Rendered Example

Click the expand icon in the top-right corner of the code editor to open a larger editing window.

​
Variables and Handlebars

HTML blocks support variables using the {{variable}} syntax and the full range of Handlebars helpers, including {{#if}} for conditionals and {{#each}} for looping. In an inline HTML block, Handlebars resolve automatically — no transformer configuration required.
This is useful when you need loop structures beyond what the List block’s Loop on feature supports, such as nested loops or fully custom markup.
Handlebars and variables in HTML block

Handlebars Example

Variables and Handlebars expressions in HTML blocks only resolve on actual send; during preview mode, you see the raw syntax, not sample values.

​
Send a full HTML email

To use a complete HTML document — for example, porting a legacy email — put it on the email channel node’s raw.html and declare the handlebars transformer so {{variables}} resolve. The meta title sets the subject line; raw.html replaces the rendered body for that channel.
This shape is accepted by POST /notifications, PUT /notifications/{id}/content, and POST /send, and renders your markup verbatim.

​
Authoring via the API

The inline type: "html" block can be authored in Design Studio and sent inline via POST /send. It is not currently writable through the Templates API write endpoints: sending an inline type: "html" element to POST /notifications or PUT /notifications/{id}/content returns Invalid input.
To add HTML to a stored template via the API today, use the whole-email raw.html approach above rather than an inline type: "html" element.

​
Best practices

  • Use a fragment for inline blocks (no <html>/<head>/<body> wrapper); use whole-email HTML when you need a full document.
  • Keep markup minimal and test across channels and email clients.
  • Use variables for dynamic content rather than hardcoding.

Channel element

Channel-level raw.html and overrides

Manage Templates via API

Create and update templates programmatically

Variables

Dynamic content in code

Email-Safe Formatting

Tips for reliable HTML and CSS
HTML gives you full control of your markup, whether you’re adding a custom section, dropping in a tracking pixel, or porting an existing email into Courier. There are two ways to use it, and picking the right one is the difference between content that renders first try and a confusing Invalid input.

Inline HTML block

An HTML fragment (like a <div> or <table>) placed among your other blocks in a channel. Best for one custom section in an otherwise drag-and-drop email.

Whole-email HTML

A complete <!DOCTYPE html> document on the channel’s raw.html that replaces the rendered body. Best for porting a full HTML email or authoring HTML through the API.

​
When to use each

​
Add an inline HTML block

An inline HTML block is a fragment, not a full page. Leave out <!DOCTYPE html>, <html>, <head>, and <body>: Courier composes your markup into the email alongside the other blocks. For a full document, use whole-email HTML instead.
The HTML block gives you an inline code editor in the right panel. Enter standard HTML (like <div>, <table>, or <img>) and inline CSS for custom layouts or tracking, such as analytics pixels. Your changes appear in the canvas preview as you type. HTML blocks support variables using the {{variable}} syntax, plus the full range of Handlebars helpers, including {{#if}} for conditionals and {{#each}} for looping over arrays. Inside an inline HTML block, Handlebars resolve automatically, with no transformer configuration required.
This helps when you need loop structures beyond what the List block’s Loop on feature supports, such as nested loops or fully custom markup.
Variables and Handlebars expressions in HTML blocks resolve on send. During preview mode, you see the raw syntax, not sample values.

​
Send a full HTML email

To use a complete HTML document, for example when porting an existing email, put it on the email channel node’s raw.html and declare the handlebars transformer so your {{variables}} resolve. The meta title sets the subject line, and raw.html replaces the rendered body for that channel.
This shape works with POST /notifications, PUT /notifications/{id}/content, and POST /send, and it renders your markup as written.

​
Author HTML through the API

You author inline HTML blocks in Design Studio, and you can send one inline with POST /send. The Templates API write endpoints don’t accept an inline type: "html" element yet: sending one to POST /notifications or PUT /notifications/{id}/content returns Invalid input.
To add HTML to a stored template through the API today, use the whole-email raw.html approach instead of an inline type: "html" element.
  • Use a fragment for inline blocks (no <html>, <head>, or <body> wrapper), and use whole-email HTML when you need a full document.
  • Keep your markup minimal and test it across channels and email clients.
  • Use variables for dynamic content instead of hardcoding values.

Channel element

Channel-level raw.html and overrides.

Manage templates via the API

Create and update templates programmatically.

Variables

Add dynamic content to your markup.

Email-safe formatting

Keep your HTML and CSS rendering reliably.