Communications · Page template

Email Engine

Template editor + send queue + delivery log — the transactional-email surface for a B2B app.

app.example.com/customers
What it is

When to reach for it.

Three-pane workspace for managing transactional emails. Template list on the left, editor in the middle (subject + body + variable picker), and a preview + delivery log on the right. Includes variable substitution preview so the marketer or ops user can verify before sending.

  • Building the admin surface for transactional email templates (invoices, password resets, notifications).
  • Replacing scattered template management with a single workspace.
  • Anywhere ops needs to edit copy + preview substitution without involving engineering.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Template list

    Left rail with templates grouped by type.

    ListFilterChip
  2. 2

    Editor

    Subject line, body, variable picker, save state.

    RichTextEditorForm
  3. 3

    Variable preview

    Rendered with sample values so what-you-see-is-what-the-customer-sees.

    Card
  4. 4

    Delivery log

    Recent sends with delivery status, opens, clicks.

    DataGridWithFilters
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

RichTextEditorFormListFilterChipDataGridWithFiltersCard
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
templateScopeTransactionalTemplate list grouping
variableSetuserName, accountName, invoiceUrlVariable picker options
providerLabelSendGridDelivery log source column
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Email Engine layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.