LMX - Loops

To manage Loops with an AI agent, connect Loops to Claude, or install the Loops CLI and agent skills for Claude Code, Codex, or Cursor.

LMX (Loops Markup Language) is an XML-based format for writing email content in Loops. Every piece of content is represented by an explicit PascalCase tag. LMX can be used with the Content API to create and update campaign, workflow, and transactional email messages programmatically. LMX sits between the API and our editor, making it possible to edit emails across both the editor and API. You can keep LMX in your codebase and update draft email messages through the Content API or email messages CLI. Fetch the current contentRevisionId, edit the LMX in Git, and send the update back with revision protection.

Campaign content examples

Create campaigns, query themes and components, and update email messages with LMX.

Update email message API

Send serialized LMX through the Content API for campaign, workflow, and transactional email messages.

Create campaign API

Create a draft campaign and email message before adding LMX content.

Loops CLI

Use the CLI for local setup, authentication, and Content API workflows.

Themes API

Find theme IDs and style attributes for the LMX <Style /> tag.

Components API

Find reusable components for the LMX <Component /> tag.

LMX examples

Here are some examples of how to use LMX tags to create emails.

<H1>Hello</H1>
<Paragraph>World</Paragraph>

A list

<H2>Release checklist</H2>
<OrderedList>
  <ListItem>Finish QA</ListItem>
  <ListItem>Prepare announcement</ListItem>
  <ListItem>Notify teams</ListItem>
</OrderedList>

Two-column layout

<Columns>
  <ColumnItem>
    <H3>Starter</H3>
    <Paragraph>Best for new projects.</Paragraph>
    <Button href="https://loops.so/pricing">Start free</Button>
  </ColumnItem>
  <ColumnItem>
    <H3>Pro</H3>
    <Paragraph>Advanced automation and analytics.</Paragraph>
    <Button href="https://loops.so/pricing">Upgrade</Button>
  </ColumnItem>
</Columns>

Full campaign example

<Style themeId="st_default"
  bodyColor="#1F2937"
  bodyYPadding="24" />
<Component componentId="logo" />
<H1>Hi {contact.firstName}, your weekly update is ready</H1>
<Paragraph fontSize="16" lineHeight="150">
  Here is your weekly account summary. Read <Link href="https://loops.so/docs">the docs</Link> for the full changelog.
</Paragraph>
<Button href="https://app.example.com/account/{contact.userId}" align="center" bgColor="#000000" textColor="#ffffff">
  Open dashboard, {contact.firstName}
</Button>
<Divider />
<H2>Top priorities</H2>
<OrderedList>
  <ListItem>Fix onboarding drop-off on step 2</ListItem>
  <ListItem>Publish changelog for API v2</ListItem>
  <ListItem>Review deliverability metrics</ListItem>
</OrderedList>
<Columns gap="24" widths="50,50" verticalAlignment="top">
  <ColumnItem>
    <H3>Docs</H3>
    <Paragraph>Start with the quickstart.</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Image src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg" dynamicSrc="{contact.avatarUrl}" alt="{contact.firstName}" width="180" />
  </ColumnItem>
</Columns>
<Section blockColor="#F8FAFC" blockBorderRadius="12" paddingTop="16" paddingBottom="16">
  <Paragraph>Review your latest activity and <Strong>update your settings</Strong>.</Paragraph>
</Section>
<Paragraph>
  Need help? <Link href="https://example.com/support">Contact support</Link>.
</Paragraph>
<Icons>
  <Icon name="x-twitter" href="https://twitter.com/loops" />
  <Icon name="linkedin" href="https://www.linkedin.com/company/sendwithloops/" />
</Icons>

Workflow email example

<Style themeId="st_default" bodyColor="#ffffff" backgroundColor="#f3f4f6" bodyYPadding="24" />
<H1>Thanks for your order, {contact.firstName}</H1>
<Paragraph fontSize="16" lineHeight="150">
  Your order total was {event.orderTotal}. We will send updates to {contact.email}.
</Paragraph>
<Button href="https://app.example.com/orders/{event.orderId}" align="center" bgColor="#000000" textColor="#ffffff" borderRadius="12">
  View order
</Button>

Transactional email example

<Style themeId="st_default" bodyColor="#ffffff" backgroundColor="#f3f4f6" bodyYPadding="24" />
<H1>Reset your password</H1>
<Paragraph fontSize="16" lineHeight="150">
  Hi {data.firstName}, we received a request to reset your password.
</Paragraph>
<Button href="{data.resetLink}" align="center" bgColor="#000000" textColor="#ffffff" borderRadius="12">
  Reset password
</Button>
<Paragraph fontSize="14" lineHeight="150">
  If you did not request this, you can ignore this email.
</Paragraph>

Core rules

LMX is XML, not HTML or Markdown. Tags are case-sensitive (for example, <Paragraph>, not <paragraph>).
LMX is not MJML. Do not use MJML tags (such as <mj-text>).
Do not use the editor’s dynamic tag syntax in LMX documents (for example {EVENT_PROPERTY:orderId} or {DATA_VARIABLE:resetLink} or unprefixed {firstName}). Use {contact.*} for contact properties, {event.*} for workflow event properties, and {data.*} for transactional email data variables.
A document is a sequence of top-level block tags, optionally with one top-level <Style />.
Text is not allowed at the top level. Wrap top-level text in a block tag like <Paragraph>.
Top-level inline tags and variables are invalid.
Required attributes must be present (for example, <Image /> requires src).
Self-closing tags must end with /> (for example, <Image ... />, <Br />).
Unknown tags are rejected. Use only documented attributes in public LMX examples.
Attribute values are quoted strings. Numbers and booleans are passed as strings.
Whitespace in text content collapses like HTML, except inside <CodeBlock>, where interior whitespace is preserved. Use <Br /> for explicit line breaks.
Whitespace between block tags is ignored, so pretty-printing is safe.
Escape text and attributes as needed (<, &, ").

Emails automatically have a footer appended, so you don’t need to include your address or unsubscribe link at the bottom of your LMX content.

Source control

You can keep LMX files alongside the rest of your application code (for example, in an emails/ directory in your repo) and sync them with Loops through the CLI or Content API. LMX is plain text, so it diffs and reviews cleanly in pull requests. A typical Git-based workflow:

Pull the latest content before editing. Run loops email-messages get <id> to fetch the current LMX and contentRevisionId, and save the LMX to a file in your repo.
Edit the .lmx file locally and commit your changes.
Push back to Loops with loops email-messages update <id>, passing --expected-revision-id set to the contentRevisionId from step 1 and --lmx-file ./path/to/email.lmx. The update is rejected if the email was edited in Loops in the meantime, so you don’t overwrite concurrent changes.
Resolve conflicts by pulling again with loops email-messages get and re-applying your edits. Use --force instead of --expected-revision-id only when you intentionally want to overwrite the server copy.

The owning campaign must be in Draft status for updates to apply. The same flow works through the Update email message API if you prefer to call the API directly from CI.

Tag	Description	Self-closing
`<Style />`	Style metadata (top-level only)	yes
`<H1>`, `<H2>`, `<H3>`	Heading blocks
`<Paragraph>`	Paragraph block
`<Quote>`	Quote block
`<CodeBlock>`	Code block
`<Button>`	Button block
`<Image />`	Image block	yes
`<Divider />`	Divider block	yes
`<OrderedList>`	Numbered list container
`<UnorderedList>`	Bulleted list container
`<Columns>`	Multi-column container
`<Component>`	Component container	yes, but can contain children
`<Section>`	Section container
`<Icons>`	Social icon group

Tag	Parent tag	Description	Self-closing
`<Br />`	Inline-content blocks	Line break	yes
`<ListItem>`	`<OrderedList>`, `<UnorderedList>`	List item
`<ColumnItem>`	`<Columns>`	Column content container
`<Icon />`	`<Icons>`	Individual icon	yes

Tag reference

Document styles

Use the optional top-level <Style /> tag to style the email. Use this to apply a theme to your email and add custom styles, just like you would in the Style panel in the editor. Use a combination of themeId and other attributes to bring in defaults while also overriding specific styles. You can also style individual elements in your email using tag attributes (for example, <Button bgColor="#000000">Open account</Button> overrides <Style buttonBodyColor="#CCCCCC" /> for that button). Styles applied in <Style /> will apply to all content in the email. For example, defining buttonBodyColor in the <Style /> tag will apply to all buttons in the email. Self-closing tag. At most one per document.

Attribute	Notes
`themeId`	Theme preset ID to load as the base style before applying overrides.
`backgroundColor`	Outer email hex background color around the body container.
`backgroundXPadding`	Left and right spacing (px) between the outer background and body container.
`backgroundYPadding`	Top and bottom spacing (px) between the outer background and body container.
`bodyColor`	Main body container hex background color.
`bodyXPadding`	Left and right inner padding (px) inside the body container.
`bodyYPadding`	Top and bottom inner padding (px) inside the body container.
`bodyFontFamily`	Font family from Google Fonts e.g. `"Inter"`, `"Noto Sans"`
`bodyFontCategory`	Fallback font category. Must be one of: `"ui-sans-serif"`, `"ui-serif"`, `"ui-monospace"`, `"sans-serif"`, `"serif"`, `"monospace"`.
`borderColor`	Default hex border color for the body container.
`borderWidth`	Border width (px) for the body container.
`borderRadius`	Corner radius (px) for the body container.
`buttonBodyColor`	Default hex background color applied to buttons.
`buttonBodyXPadding`	Default left and right internal button padding (px).
`buttonBodyYPadding`	Default top and bottom internal button padding (px).
`buttonBorderColor`	Default hex border color for buttons.
`buttonBorderWidth`	Default button border width (px).
`buttonBorderRadius`	Default button corner radius (px).
`buttonTextColor`	Default hex text color used in buttons.
`buttonTextFontSize`	Default button text size (px).
`dividerColor`	Default hex line color used by `<Divider />`.
`dividerBorderWidth`	Default line thickness (px) used by `<Divider />`.
`textBaseColor`	Default hex color for paragraph, quote, and list text.
`textBaseFontSize`	Default font size (px) for paragraph, quote, and list text.
`textBaseLineHeight`	Default line height (percentage) for body text.
`textBaseLetterSpacing`	Default letter spacing (px) applied to body text.
`textLinkColor`	Default hex text color for inline `<Link>`.
`heading1Color`	Default hex text color for `<H1>`.
`heading1FontSize`	Default font size (px) for `<H1>`.
`heading1LineHeight`	Default line height (percentage) for `<H1>`.
`heading1LetterSpacing`	Default letter spacing (px) for `<H1>`.
`heading2Color`	Default hex text color for `<H2>`.
`heading2FontSize`	Default font size (px) for `<H2>`.
`heading2LineHeight`	Default line height (percentage) for `<H2>`.
`heading2LetterSpacing`	Default letter spacing (px) for `<H2>`.
`heading3Color`	Default hex text color for `<H3>`.
`heading3FontSize`	Default font size (px) for `<H3>`.
`heading3LineHeight`	Default line height (percentage) for `<H3>`.
`heading3LetterSpacing`	Default letter spacing (px) for `<H3>`.

Headings

Use <H1>, <H2>, and <H3> for headings.

<H1 align="center" fontSize="34" lineHeight="120">
  Welcome to Loops
</H1>
<H2 paddingTop="16" fontSize="24">
  Your weekly summary
</H2>
<H3 blockColor="#F3F4F6" blockBorderRadius="8" paddingLeft="12" paddingRight="12">
  Highlights
</H3>

Attribute	Type	Notes
`fontSize`	number
`lineHeight`	number	Percentage value such as `"150"`
`align`	string	`"left"` (default), `"center"`, `"right"`
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Paragraphs

Use <Paragraph> for paragraph text.

<Paragraph fontSize="16" lineHeight="160" align="left" paddingBottom="12">
  Thanks for trying Loops. Here is what changed this week.
</Paragraph>

Attribute	Type	Notes
`fontSize`	number
`lineHeight`	number	Percentage value such as `"150"`
`align`	string	`"left"` (default), `"center"`, `"right"`
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Quotes

Use <Quote> for blockquote content.

<Quote blockColor="#F9FAFB" blockBorderRadius="8" paddingLeft="16" paddingRight="16">
  Great emails feel personal and timely.
</Quote>

Attribute	Type	Notes
`fontSize`	number
`lineHeight`	number	Percentage value such as `"150"`
`align`	string	`"left"` (default), `"center"`, `"right"`
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Code blocks

Use <CodeBlock> for code blocks. Note: inline tags and variable parsing are disabled inside code blocks.

<CodeBlock>
  curl -X POST https://app.loops.so/api/v1/events/send
</CodeBlock>

Attribute	Type	Notes
`fontSize`	number
`lineHeight`	number	Percentage value such as `"150"`
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Buttons

Use <Button> for buttons. Button content may contain plain text and dynamic content variables such as {contact.firstName}, {event.orderId}, or {data.firstName}. Inline formatting tags are not allowed inside buttons.

<Button href="https://app.example.com/users/{contact.userId}">
  Open profile, {contact.firstName}
</Button>

<Button href="{data.resetLink}" align="center" bgColor="#000000" textColor="#ffffff">
  Reset password
</Button>

Attribute	Type	Notes
`href`	url	The button’s URL. May contain dynamic variables
`align`	string	`"left"` (default), `"center"`, `"right"`
`notrack`	boolean	`"true"` disables link tracking
`bgColor`	hex
`textColor`	hex
`borderRadius`	number
`borderWidth`	number
`borderColor`	hex
`innerXPadding`	number	Inner padding of the button content
`innerYPadding`	number	Inner padding of the button content
`fontSize`	number
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number	Padding of the container block
`paddingRight`	number	Padding of the container block
`paddingBottom`	number	Padding of the container block
`paddingLeft`	number	Padding of the container block

Images

Use <Image /> for images. src must be a Loops-hosted image. Upload images using the Uploads API endpoints and use the returned URL as src. For an externally hosted dynamic image, see Dynamic images below.

<Image
  src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg"
  alt="Launch banner"
  href="https://example.com/changelog"
  width="560"
  align="center"
  borderRadius="10"
/>

Dynamic or externally hosted images

If you want a per-recipient image URL, set dynamicSrc to a URL containing a variable (for example, {contact.avatarUrl}, {event.avatarUrl}, or {data.avatarUrl}). The image URL should come from a contact property, event property, or data variable. You must also set src to a Loops-hosted static placeholder (this image renders in the Loops editor). When the email is generated for each recipient, the resolved dynamicSrc value is injected as the image src. For images hosted on an external host, set src to a Loops-hosted static placeholder, then set dynamicSrc to the external image URL. Dynamic image URLs must be publicly accessible and use an email-safe image extension like .jpg or .png. More about dynamic images.

<Image
  src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg"
  dynamicSrc="{contact.avatarUrl}"
  alt="{contact.firstName}"
  width="180"
  align="center"
/>

Attribute	Type	Required	Notes
`src`	url	yes	Loops-hosted image URL from the Uploads API. User-hosted URLs are not supported.
`dynamicSrc`	string		Per-recipient image URL from a contact property, such as `{contact.avatarUrl}`. See dynamic images.
`notrack`	boolean		`"true"` disables link tracking
`alt`	string		Alt text
`href`	url		Add a link to the image. May contain dynamic variables
`width`	number		Pixel width, maximum is 600px. Default is full width (600px). If you add padding, width will auto-adjust to be maximum 600px.
`align`	string		`"left"` (default), `"center"`, `"right"`
`borderRadius`	number
`borderWidth`	number
`borderColor`	hex
`blockColor`	hex		Background color of the container block
`blockBorderRadius`	number		Border radius of the container block
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Dividers

Use <Divider /> for divider lines. Self-closing tag.

<Divider align="center" width="80" borderWidth="1" color="#E5E7EB" />

Attribute	Type	Notes
`align`	string	`"left"` (default), `"center"`, `"right"`
`width`	number	Percentage value
`borderWidth`	number
`color`	hex	Color of the divider line
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Line breaks

Use <Br /> for line breaks in inline contexts. It is not valid at the top level. Self-closing tag.

<Paragraph>
  Thanks for reading.<Br />
  See you next week.
</Paragraph>

Lists

Use <OrderedList> or <UnorderedList> with <ListItem> children only. These tags must contain at least one <ListItem>.

Attribute	Type	Notes
`align`	string	`"left"` (default), `"center"`, `"right"`
`start`	number	Item number to start at (ordered lists only)

<OrderedList>
  <ListItem>Review campaign draft</ListItem>
  <ListItem>Send internal preview</ListItem>
</OrderedList>

<UnorderedList>
  <ListItem>Open rate up 12%</ListItem>
  <ListItem>Clicks up 18%</ListItem>
</UnorderedList>

List items

Use <ListItem> for list items. Only valid inside <OrderedList> and <UnorderedList> tags. Can only contain inline content.

<UnorderedList>
  <ListItem fontSize="15" lineHeight="150" paddingBottom="8">
    Use clear call-to-action labels.
  </ListItem>
</UnorderedList>

Attribute	Type	Notes
`fontSize`	number
`lineHeight`	number	Percentage value such as `"150"`
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Columns

Use <Columns> for columns. Must contain between two and four <ColumnItem> children. No other tags are allowed. Nested <Columns> tags are not supported.

<Columns gap="16" widths="60,40" verticalAlignment="top" stackOnMobile="true">
  <ColumnItem>
    <H3>What shipped</H3>
    <Paragraph>New audience filters and event export support.</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Image src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg" alt="Product screenshot" width="220" />
  </ColumnItem>
</Columns>

Attribute	Type	Notes
`gap`	number	Space between columns (px)
`widths`	string	Comma-separated percentages, one for each column, must total 100.
`verticalAlignment`	string	`"top"`, `"middle"`, `"bottom"`
`stackOnMobile`	boolean
`reverseOnMobile`	boolean
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Use <ColumnItem> for column content containers. Only valid inside a <Columns> tag. No attributes.

<Columns>
  <ColumnItem>
    <Paragraph>Left column content</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Paragraph>Central column content</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Paragraph>Right column content</Paragraph>
  </ColumnItem>
</Columns>

Components

Use <Component> to add a component. Can be self-closing, or can contain block elements, which will override the component’s default content. Children are block tags. Nested <Component> tags are not supported.

<Component componentId="header-hero" />

<Component componentId="feature-section">
  <H2>Updated override title</H2>
  <Paragraph>This content replaces the component's defaults.</Paragraph>
</Component>

Attribute	Type	Required	Notes
`componentId`	string	yes	The component’s ID
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Sections

Use <Section> to group related block content in a shared clickable or styled container. Children are block tags. Nested <Section> tags are not supported.

<Section
  href="https://example.com/account/{contact.userId}"
  blockColor="#F8FAFC"
  blockBorderRadius="12"
  paddingTop="16"
  paddingBottom="16"
>
  <H2>Account summary</H2>
  <Paragraph>Review your latest activity and settings.</Paragraph>
</Section>

Attribute	Type	Notes
`href`	url	Section link URL. May contain dynamic variables
`notrack`	boolean	`"true"` disables link tracking
`if`	variable	Condition variable. Show the section only when it matches. See conditional sections
`ifOperation`	string	Comparison operator for `if`. Defaults to `not_empty`. See conditional sections
`ifValue`	string	Value to compare against. Required for operators like `equal` or `contains`
`blockColor`	hex
`blockBorderRadius`	number
`blockBorderWidth`	number	Border width in pixels. Only renders when `blockBorderColor` is also set
`blockBorderColor`	hex	Border color. Only renders when `blockBorderWidth` is also set
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Conditional sections

Use the if attribute to show a section only for some recipients. if must be a single, prefixed variable reference, for example if="{contact.plan}", if="{event.orderId}", or if="{data.isPromo}". By default the section shows when that variable has a value (not_empty). Add ifOperation to compare it, and ifValue when the operator needs something to compare against:

<Section blockColor="#F8FAFC" blockBorderRadius="12" if="{contact.email}" ifOperation="not_contains" ifValue="loops.so">
  <H2>It's your lucky day</H2>
  <Paragraph>Use code LUCKY for 20% off.</Paragraph>
</Section>

Supported ifOperation values (which apply depends on the variable’s type; data variables are always text):

Type	Operators
Text	`not_empty`, `empty`, `equal`, `not_equal`, `contains`, `not_contains`
Number	`not_empty`, `empty`, `numeric_equal`, `numeric_not_equal`, `greater_than`, `less_than`
Boolean	`not_empty`, `empty`, `true`, `false`

equal, not_equal, contains, not_contains, numeric_equal, numeric_not_equal, greater_than, and less_than require an ifValue. The presence operators (empty, not_empty) and boolean operators (true, false) ignore it. The section is included when the condition is true. A missing condition variable never fails the send, it just hides the section, so condition variables are optional at send time. Notes:

if must be a single variable. Expressions and multiple variables (for example if="{data.plan} == 'pro'") are not supported; use ifOperation/ifValue instead.
Unprefixed values such as if="{plan}" are invalid. Use {contact.}, {event.}, or {data.}.
ifOperation and ifValue are ignored without an if variable, and validation rejects an unsupported operator or a value-requiring operator with no ifValue.
Content inside a hidden section is dropped entirely, including any variables it contains.

Icons

Use <Icons> for lists of icons. Children must be <Icon /> with no other tags allowed. At least one <Icon /> child is required (maximum 100).

<Icons align="center" gap="12" size="20" color="#000000">
  <Icon name="x-twitter" href="https://twitter.com/loops" />
  <Icon name="linkedin" href="https://www.linkedin.com/company/sendwithloops/" />
</Icons>

Attribute	Type	Notes
`align`	string	`"left"` (default), `"center"`, `"right"`
`gap`	number	Space between icons (px)
`size`	number	Icon size (px)
`color`	hex	`#000000` (black, default), `#808080` (gray), `#FFFFFF` (white)
`blockColor`	hex
`blockBorderRadius`	number
`paddingTop`	number
`paddingRight`	number
`paddingBottom`	number
`paddingLeft`	number

Use <Icon /> for individual icons. Self-closing tag. Only valid inside an <Icons> tag.

Attribute	Type	Required	Notes
`name`	string	yes	Icon name (available icons listed here)
`href`	url		A URL for the icon
`notrack`	boolean		`"true"` disables link tracking

Inline tags

Inline tags format text content inside block elements.

Tag	Description
`<Strong>`	Bold text
`<Em>`	Italic text
`<Underline>`	Underlined text
`<Code>`	Inline code
`<Strike>`	Strikethrough text
`<Text>`	No format, useful for `textColor`
`<Link href="...">`	Link with URL

Inline tags are valid only inside inline-content blocks such as <Paragraph>, headings, <Quote>, and <ListItem>.

<Paragraph>
  <Strong textColor="#111827">Important:</Strong>
  <Em textColor="#4B5563"> review your campaign settings</Em>
  <Underline textColor="#111827"> before sending</Underline>.
  Use <Code textColor="#7C3AED">audience_filters</Code> for targeting,
  remove outdated copy with <Strike textColor="#6B7280">old messaging</Strike>,
  and keep defaults with <Text textColor="#374151">plain text</Text>.
  Read more in
  <Link href="https://loops.so/docs/creating-emails" notrack="true"> the docs</Link>.
</Paragraph>

Inline tag attributes

Tag	Attribute	Type	Required	Notes
`<Strong>`	`textColor`	hex
`<Em>`	`textColor`	hex
`<Underline>`	`textColor`	hex
`<Code>`	`textColor`	hex
`<Strike>`	`textColor`	hex
`<Text>`	`textColor`	hex
`<Link>`	`href`	url	yes	May contain dynamic variables
`<Link>`	`notrack`	boolean		`"true"` disables link tracking

Dynamic content

You can add dynamic content by using a prefixed tag syntax, for example {contact.firstName} or {event.orderTotal}. Dynamic tags can be added to email message lmx bodies and also in other fields like subject, previewText, fromName, fromEmail and replyToEmail. Campaign content uses contact properties. Workflow email content uses contact and event properties. Transactional email content uses data variables.

Unprefixed placeholders like {firstName} or {resetLink} are not valid in LMX. Neither are other Loops variable prefixes used in MJML or the editor, including {EVENT_PROPERTY:...} and {DATA_VARIABLE:...}.These placeholders are still valid in MJML emails and in the Loops editor. In the future, all variables will require a prefix.

Syntax	Variable type	Use case	Example
`{contact.*}`	Contact property	Campaign and workflow personalization	`{contact.firstName}`
`{event.*}`	Event property	Workflow email personalization	`{event.orderTotal}`
`{data.*}`	Data variable	Transactional email personalization	`{data.resetLink}`

Contact properties

Use {contact.<apiName>} for campaign and workflow personalization, for example {contact.firstName}. Default contact properties include firstName, lastName, email, notes, source, userGroup, userId, subscribed, and createdAt.

<H1>Hi {contact.firstName}, your weekly update is ready</H1>
<Paragraph>Your account ID is {contact.userId}.</Paragraph>

Event properties

Use {event.<apiName>} in workflow emails. Event properties come from the event that triggered the workflow. Property names must match the API names defined in Events settings. You must configure fallbacks for event properties in your emails, either with eventPropertiesFallbacks when using the Content API, or in the editor side panel.

<H1>Thanks for your order, {contact.firstName}</H1>
<Paragraph>Your order total was {event.orderTotal}.</Paragraph>
<Button href="https://app.example.com/orders/{event.orderId}">View order</Button>

Send event payload

{
  "email": "user@example.com",
  "eventName": "orderPlaced",
  "eventProperties": {
    "orderTotal": "$49.00",
    "orderId": "ord_123"
  }
}

Event property rules:

Only valid in workflow email LMX. Using {event.*} in campaign or transactional emails fails validation.
Names are case-sensitive and must match the event property API name.
Configure fallback values in the Loops editor or via eventPropertiesFallbacks in the Content API.

Data variables

Use {data.<variableName>} in transactional email LMX. The name after data. must match a key in the dataVariables object when sending the email.

LMX content

<H1>Reset your password, {data.firstName}</H1>
<Paragraph>Click the button below to choose a new password.</Paragraph>
<Button href="{data.resetLink}" align="center">Reset password</Button>

Send transactional email payload

{
  "transactionalId": "cll42l54f20i1la0lfooe3z12",
  "email": "user@example.com",
  "dataVariables": {
    "firstName": "Alex",
    "resetLink": "https://app.example.com/reset/abc123"
  }
}

Transactional data variable rules:

Names are case-sensitive. {data.resetLink} and {data.ResetLink} are different variables.
Names may contain only letters, numbers, underscores, and dashes.
API values may be string or number.
Non-optional variables must be present in dataVariables or the send fails.
Optional variables may be omitted from the request or sent as an empty string "" (null does not work). Mark a data variable as optional in the Loops editor.

Where variables are allowed

Variables are allowed in:

Inline content (headings, paragraphs, quotes, list items, and inline tags)
Button text
Supported dynamic attributes: Button href, Link href, Image alt, Image href, Image dynamicSrc, and Section href
Section if, which takes a whole variable reference and no surrounding text (see conditional sections)

Variables are not allowed:

At the top level
Inside <CodeBlock> (braces are literal text)
In unsupported attributes such as Image src

Variables in attributes

Only these attribute values may include variables:

Button href
Image alt, href, and dynamicSrc
Link href
Section href
Section if (the whole value must be a single prefixed variable)

Image src must be a Loops-hosted static URL with no variables. User-hosted URLs are not supported in src. Putting a variable like {contact.avatarUrl} in src is not supported and validation returns unsupported_dynamic_attr. When the image URL should vary per recipient (including externally hosted URLs), set dynamicSrc to a variable such as {contact.avatarUrl}, {event.avatarUrl}, or {data.avatarUrl} and keep src as a Loops-hosted placeholder; at send time, the resolved dynamicSrc value replaces src.

Fallback values

LMX does not support inline fallback syntax in variable references. These forms are not valid in LMX: {contact.firstName|there}, {event.orderTotal|0}, {contact.firstName:there}, {contact.firstName ?? "there"}, and fallback="there" on variable attributes. Use plain variable references in LMX (for example, {contact.firstName}, {event.orderTotal}, or {data.firstName}). For contact and event properties, configure fallback values through the Loops editor or Content API. For transactional emails, mark a data variable as optional in the editor instead of inventing inline fallback syntax.

Nesting rules

LMX validates structure, not just syntax. A few key rules:

Root-level content must use supported top-level block tags (H1, H2, H3, Paragraph, Quote, CodeBlock, Button, Image, Divider, OrderedList, UnorderedList, Columns, Component, Section, Icons, Style).
Inline tags cannot appear at the top level.
<ListItem> and <Quote> only accept inline content.
<Columns> can only contain <ColumnItem> tags.
<ColumnItem> can contain block content, but not nested <Columns> or other <ColumnItem> tags.
<Style /> is metadata and is only allowed at the top level.

If a tag, attribute, or nesting pattern is invalid, validation issues are returned so problems can be fixed before sending.

Campaign content examples

Update email message API

Create campaign API

Loops CLI

Themes API

Components API

​LMX examples

​Core rules

​Source control

​Tags

​Tag reference

​Document styles

​Headings

​Paragraphs

​Quotes

​Code blocks

​Buttons

​Images

​Dynamic or externally hosted images

​Dividers

​Line breaks

​Lists

​List items

​Columns

​Components

​Sections

​Conditional sections

​Icons

​Inline tags

​Inline tag attributes

​Dynamic content

​Contact properties

​Event properties

​Data variables

​Where variables are allowed

​Variables in attributes

​Fallback values

​Nesting rules

LMX examples

Core rules

Source control

Tags

Tag reference

Document styles

Headings

Paragraphs

Quotes

Code blocks

Buttons

Images

Dynamic or externally hosted images

Dividers

Line breaks

Lists

List items

Columns

Components

Sections

Conditional sections

Icons

Inline tags

Inline tag attributes

Dynamic content

Contact properties

Event properties

Data variables

Where variables are allowed

Variables in attributes

Fallback values

Nesting rules