> ## Documentation Index
> Fetch the complete documentation index at: https://loops.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# LMX

> Author email content with Loops Markup Language (LMX), a structured markup for sections, components, variables, and themed styling in Loops emails.

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 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](/docs/api-reference/update-email-message) or
[email messages CLI](/docs/cli/email-messages). Fetch the current
`contentRevisionId`, edit the LMX in Git, and send the update back with
revision protection.

<CardGroup cols={2}>
  <Card title="Campaign content examples" icon="code" href="/docs/api-reference/examples/campaigns">
    Create campaigns, query themes and components, and update email messages with LMX.
  </Card>

  <Card title="Update email message API" icon="square-pen" href="/docs/api-reference/update-email-message">
    Send serialized LMX through the Content API for campaign and transactional email messages.
  </Card>

  <Card title="Create campaign API" icon="send" href="/docs/api-reference/create-campaign">
    Create a draft campaign and email message before adding LMX content.
  </Card>

  <Card title="Loops CLI" icon="rectangle-terminal" href="/docs/cli">
    Use the CLI for local setup, authentication, and Content API workflows.
  </Card>

  <Card title="Themes API" icon="palette" href="/docs/api-reference/list-themes">
    Find theme IDs and style attributes for the LMX `<Style />` tag.
  </Card>

  <Card title="Components API" icon="box" href="/docs/api-reference/list-components">
    Find reusable components for the LMX `<Component />` tag.
  </Card>
</CardGroup>

## LMX examples

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

```xml theme={"dark"}
<H1>Hello</H1>
<Paragraph>World</Paragraph>
```

**A list**

```xml theme={"dark"}
<H2>Release checklist</H2>
<OrderedList>
  <ListItem>Finish QA</ListItem>
  <ListItem>Prepare announcement</ListItem>
  <ListItem>Notify teams</ListItem>
</OrderedList>
```

**Two-column layout**

```xml theme={"dark"}
<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**

```xml theme={"dark"}
<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>
```

**Transactional email example**

```xml theme={"dark"}
<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 `{DATA_VARIABLE:resetLink}` or unprefixed `{firstName}`). Use `{contact.X}` for campaign contact properties and `{data.X}` 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 (`&lt;`, `&amp;`, `&quot;`).

<Note>
  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.
</Note>

## Tags

Top-level tags define the structure of an email.

| 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               |                               |

Child-only structural tags are valid only inside their parent tags.

| 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](/docs/creating-emails/styles#themes) to your email and add custom styles, just like you would in the [Style panel](/docs/creating-emails/styles#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](https://fonts.google.com/) 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.

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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](/docs/creating-emails/lmx#dynamic-content) such as `{contact.firstName}` or `{data.firstName}`. Inline formatting tags are not allowed inside buttons.

```xml theme={"dark"}
<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    | Required | Notes                                                                                   |
| ------------------- | ------- | :------: | --------------------------------------------------------------------------------------- |
| `href`              | url     |          | The button's URL. May contain [dynamic variables](/docs/creating-emails/lmx#dynamic-content) |
| `align`             | string  |          | `"left"` (default), `"center"`, `"right"`                                               |
| `notrack`           | boolean |          | `"true"` disables [link tracking](/docs/creating-emails/editor/links#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](/docs/api-reference/create-upload) and use the returned URL as `src`.

For an externally hosted dynamic image, see [Dynamic images](#dynamic-images) below.

```xml theme={"dark"}
<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}` or `{data.avatarUrl}`). The image URL should come from a [contact property](/docs/contacts/properties) or [data variable](/docs/transactional#add-data-variables).

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](/docs/creating-emails/editor/images#dynamic-images).

```xml theme={"dark"}
<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](/docs/api-reference/create-upload). User-hosted URLs are not supported.                                     |
| `dynamicSrc`        | string  |          | Per-recipient image URL from a contact property, such as `{contact.avatarUrl}`. See [dynamic images](/docs/creating-emails/editor/images#dynamic-images). |
| `notrack`           | boolean |          | `"true"` disables [link tracking](/docs/creating-emails/editor/links#link-tracking)                                                                       |
| `alt`               | string  |          | Alt text                                                                                                                                             |
| `href`              | url     |          | Add a link to the image. May contain [dynamic variables](/docs/creating-emails/lmx#dynamic-content)                                                       |
| `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.

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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) |

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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.**

```xml theme={"dark"}
<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](/docs/creating-emails/components).

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.

```xml theme={"dark"}
<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.

```xml theme={"dark"}
<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    | Required | Notes                                                                                   |
| ------------------- | ------- | :------: | --------------------------------------------------------------------------------------- |
| `href`              | url     |          | Section link URL. May contain [dynamic variables](/docs/creating-emails/lmx#dynamic-content) |
| `notrack`           | boolean |          | `"true"` disables [link tracking](/docs/creating-emails/editor/links#link-tracking)          |
| `blockColor`        | hex     |          |                                                                                         |
| `blockBorderRadius` | number  |          |                                                                                         |
| `paddingTop`        | number  |          |                                                                                         |
| `paddingRight`      | number  |          |                                                                                         |
| `paddingBottom`     | number  |          |                                                                                         |
| `paddingLeft`       | number  |          |                                                                                         |

### 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).

```xml theme={"dark"}
<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](/docs/creating-emails/editor/social-icons#available-icons)) |
| `href`    | url     |          | A URL for the icon                                                                              |
| `notrack` | boolean |          | `"true"` disables [link tracking](/docs/creating-emails/editor/links#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>`.

```xml theme={"dark"}
<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](/docs/creating-emails/lmx#dynamic-content)          |
| `<Link>`      | `notrack`   | boolean |          | `"true"` disables [link tracking](/docs/creating-emails/editor/links#link-tracking) |

## Dynamic content

You can add dynamic content like contact properties by using a tag syntax with a prefix, for example `{contact.firstName}`.

Dynamic tags can be added to [email message](/docs/api-reference/update-email-message) `lmx` bodies and also in other fields like `subject`, `previewText`, `fromName`, `fromEmail` and `replyToEmail`.

LMX campaign content uses contact properties and the public unsubscribe URL. Transactional email content uses data variables.

<Warning>
  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:...}` for [event properties](/docs/events/properties) in workflow emails and `{DATA_VARIABLE:...}` for [data variables](/docs/transactional#add-data-variables) in transactional emails.

  These placeholders are still valid in [MJML emails](/docs/creating-emails/uploading-custom-email) and in the [Loops editor](/docs/creating-emails/editor). In the future, all variables will require a prefix.
</Warning>

| Syntax                      | Variable type                                      | Use case                            | Example                     |
| --------------------------- | -------------------------------------------------- | ----------------------------------- | --------------------------- |
| `{contact.X}`               | [Contact property](/docs/contacts/properties)           | Campaign personalization            | `{contact.firstName}`       |
| `{data.X}`                  | [Data variable](/docs/transactional#add-data-variables) | Transactional email personalization | `{data.resetLink}`          |
| `{system.unsubscribe_link}` | System URL                                         | Public unsubscribe link             | `{system.unsubscribe_link}` |

### Contact properties

Use `{contact.<apiName>}` for campaign personalization, for example `{contact.firstName}`.

Default contact properties include `firstName`, `lastName`, `email`, `notes`, `source`, `userGroup`, `userId`, `subscribed`, and `createdAt`.

```xml theme={"dark"}
<H1>Hi {contact.firstName}, your weekly update is ready</H1>
<Paragraph>Your account ID is {contact.userId}.</Paragraph>
```

### 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](/docs/api-reference/send-transactional-email).

```xml LMX content theme={"dark"}
<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>
```

```json Send transactional email payload theme={"dark"}
{
  "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](/docs/transactional#optional-data-variables).

### 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`

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`

`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}` 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}`, `{contact.firstName:there}`, `{contact.firstName ?? "there"}`, and `fallback="there"` on variable attributes.

Use plain variable references in LMX (for example, `{contact.firstName}` or `{data.firstName}`). For contact properties, configure fallback values through the Loops editor. 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.