Mailblocks for Loops

Transactional email templates for Loops.

Use Mailblocks designs in Loops: the kit exports MJML bundles with Loops data variables, ready to upload as transactional emails.

Loops imports custom emails as MJML. The kit's --loops build wraps each compiled template in MJML and replaces values like the name and button URLs with Loops data variables.

1
Run pnpm build --loops — it writes dist/loops/<style>/<template>/index.mjml.
2
Zip the template folder and upload it in Loops (Transactional → New → Upload MJML).
3
Publish, then send with the transactional API and the same variable names.

send.ts

await fetch("https://app.loops.so/api/v1/transactional", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.LOOPS_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    transactionalId: "cm_welcome_clean",
    email: user.email,
    dataVariables: {
      firstName: user.firstName,
      dashboardUrl: "https://fieldnote.app/dashboard",
    },
  }),
});

Variables use Loops' {DATA_VARIABLE:name} syntax. Loops documents variables inside mj-text; our export places them in mj-raw, so send yourself a test after uploading.
Lists inside templates (receipt line items, digest themes) stay as sample content in the MJML export — edit them in the file or send those emails through your own code.
Loops recommends its editor for most emails; the MJML route is for teams who want one design system across every sender.

Loops docs: loops.so/docs/creating-emails/uploading-custom-email