# Visual editor and ready-made templates

> The Couryo block template editor, with {{name}} variables, {{name|fallback}} defaults and sample values, phone and dark mode preview, project brand and the library of Brazilian models (Pix, boleto, invoice) in PT and EN.

Source: https://couryo.com/en/docs/template-editor

The visual editor builds the email with blocks and generates HTML that works in real mailboxes: tables, inline styles, a 600 px max width, buttons that show even in Outlook and the plain-text part. It lives in the dashboard under **Templates** and is on **every plan**, Free included. What it saves is a regular [template](https://couryo.com/en/docs/templates.md): you send it with `template` + `variables`, as always.

## Blocks

| Block | What it is for |
|---|---|
| Heading | three sizes, with alignment |
| Text | simple rich text: `**bold**`, `*italic*`, `[link](https://...)`, `` `code` `` and lists with `- ` |
| Button | highlighted link, in the brand color or its own color |
| Image | by URL (`https://`), with alt text, width and link |
| Divider and spacer | breathing room between parts |
| 2 columns | two sides with headings, texts, buttons or images; on phones, one column below the other |
| Footer | smaller, centered text, with the unsubscribe link |
| HTML | a snippet of yours, inserted as is |

Each block moves up, down, duplicates or goes away with one click. **Code mode** switches to HTML or MJML: the editor generates the HTML of the blocks and you continue from there. A template written in code can come back to the visual editor as an HTML block.

## Variables and sample values

- Write `{{name}}` in any text, in the subject, in links (`{{tracking_url}}`) and even in an image address (`{{pix.qr_code_url}}`).
- For values that can be missing, give a **fallback** after `|`: `Hi {{name|there}}!` reads "Hi there!" when the contact has no name. The fallback can be empty (`{{nickname|}}`) and is plain text, without braces. Details in [Saved templates](https://couryo.com/en/docs/templates.md#fallback-variablefallback).
- Each variable gets a **sample value**, used by the preview and the test send. The **Variables** tab shows which ones have a fallback and warns when one has neither a sample value nor a fallback, because sending by the API **needs a value for every variable without a fallback** (in a sequence, it comes out empty).
- The text of new blocks already uses a fallback: `Hi {{name|there}}!` in English and `Oi, {{nome|tudo bem}}!` in Portuguese.
- `{{unsubscribe_url}}` is filled by Couryo with the one-click unsubscribe link of the first recipient. No need to send it.

## Preview, test and versions

- **Desktop, phone and dark mode.** Blocks bring their dark-mode colors (`prefers-color-scheme`); your own HTML shows inverted, as the Gmail app does.
- **Test send** to the emails of the people in your account, through the same path as a normal send (limits, levels and the content check apply). The subject arrives with `[Test]`.
- **Version history with "restore":** every content change is a version; restoring saves the old content as a new version, with its blocks back.

## Project brand

In **Brand**, set the name, the logo (`https://` URL), the primary color and the font. The brand applies to every block template in the project: the logo on top, the color on buttons and links. When the email app lacks the chosen font, it uses a similar one (every font has safe fallbacks, ending in Arial or Georgia).

## Ready-made templates

In **Templates > Start from a model**, pick a model in Portuguese or English, preview it with your brand and create the template in the project. All of them are made with the block editor and come with sample values.

| Group | Models |
|---|---|
| Account | welcome, email confirmation, password reset, login code (OTP), team invite |
| Billing | receipt, **Pix charge**, **boleto**, **invoice issued (NF-e/NFS-e)**, payment declined, subscription renewed, subscription canceled |
| Store | abandoned cart (marketing, with unsubscribe), order shipped |

What the Brazilian models bring:

- **Pix charge:** the QR code as an image by URL (`{{pix.qr_code_url}}`) and the highlighted copy and paste code (`{{pix.copy_paste}}`), with amount, due date and payment link.
- **Boleto:** the barcode line (`{{boleto.barcode_line}}`) and the boleto link (`{{boleto.url}}`). As a link, never as an attachment: boleto attachments land in spam because of scams.
- **Invoice issued:** number, amount and the PDF (`{{invoice.pdf_url}}`) and XML (`{{invoice.xml_url}}`) links.

After you verify a domain, the dashboard home suggests the library.

## Through the API

The template is still HTML: the editor sends the generated HTML in `html`, the text part in `text` and the blocks in `editor`, kept in every version.

```bash title="Send with the Pix model"
curl https://api.couryo.com/v1/emails \
  -H "Authorization: Bearer $COURYO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "from": "Shop <billing@example.com>",
    "to": "ana@example.com",
    "template": "pix-charge",
    "variables": {
      "name": "Ana",
      "charge": { "amount": "R$ 129.90", "due_date": "Oct 10, 2026" },
      "pix": { "qr_code_url": "https://example.com/pix/1042.png", "copy_paste": "00020126580014br.gov.bcb.pix..." },
      "payment_url": "https://example.com/pay/1042"
    }
  }'
```

- `GET /v1/templates/{id}` and the versions return `editor` (the blocks) or `null` when the template was written in code.
- Sending `"editor": null` in a `PATCH` moves the template to code mode.