drin-build-template

Building cross-client transactional email

Email clients are not browsers. Outlook uses Word to render HTML; Gmail strips `

<!-- preheader: shown in the inbox preview, hidden in the body -->

  {{preheader | default:"A quick update from {{brandName}}"}}


  
    
      
        
          
            Hi {{firstName | default:"there"}},
            {{body}}
            <!-- bulletproof button -->
            
              
                
                  
                    {{ctaLabel | default:"Open"}}
                  
                
              
            
            
              Sent by {{brandName}}. {{#if unsubscribeUrl}}Unsubscribe.{{/if}}
            
          
        
      
    
  

Always produce a matching plain-text version, e.g.:

Hi {{firstName | default:"there"}},

{{body}}

{{ctaLabel | default:"Open"}}: {{ctaUrl}}

Sent by {{brandName}}.

## React Email (TypeScript)

If the project sends from TypeScript, prefer [react-email](https://react.email)
components and render with the Drin SDK helper:

```ts
import { sendReactEmail } from "@drin00/sdk/react-email";
await sendReactEmail(drin, { from, to, subject, react:  });
// renders html + text, then sends

Drin's {{handlebars}} template syntax

When you save a reusable template in Drin (create_template / POST /v1/templates / dashboard), the engine is a safe handlebars subset — no arbitrary code, purpose-built for email:

• {{ path }} — HTML-escaped interpolation (use in the HTML body).
• {{{ path }}} or {{& path }} — raw/unescaped (use sparingly, e.g. pre-sanitized HTML).
• {{ path | default:"x" }}, {{ path | upper }}, {{ path | lower }} — filters.
• {{#if path}} … {{else}} … {{/if}}, {{#unless path}} … {{/unless}}.
• {{#each items}} … {{this}} / {{@index}} / {{@first}} / {{@last}} … {{else}} … {{/each}}.
• {{../x}} — parent scope; {{! comment }} — stripped.

Missing variables render as empty string and are reported. Before sending, call render_template (a saved template) or preview_template (an unsaved draft; templates.preview in the SDK) and check the missing array — fix any required variable that resolved to empty. The subject and text parts render unescaped; the html part is escaped by default.