LMX

LMX and related Content API endpoints are currently in a closed alpha and are subject to change.

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 emails programmatically. LMX sits between the API and our editor, making it possible to edit emails across both the editor and API.

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 email 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://example.com/avatar-placeholder.png" 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>

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>) or MJML dynamic tag syntax in LMX documents.
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. Unknown attributes are allowed but reported as warnings.
Attribute values are quoted strings. Numbers and booleans are passed as strings.
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.

Block tags

Block 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
`<Br />`	Line break	yes
`<OrderedList>`	Numbered list container
`<UnorderedList>`	Bulleted list container
`<ListItem>`	List item
`<Columns>`	Multi-column container
`<ColumnItem>`	Column content container
`<Component>`	Component container	yes, but can contain children
`<Section>`	Section container
`<Icons>`	Social icon group
`<Icon />`	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 textColor="#000000" /> will override <Style buttonBodyColor="#CCCCCC" />). 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}. Inline formatting tags are not allowed inside buttons.

<Button href="https://app.example.com/users/{contact.userId}">
  Open profile, {contact.firstName}
</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. The image must be hosted somewhere and have a public URL.

Only existing images are supported. Image upload is coming soon.

Self-closing tag.

<Image
  src="https://images.example.com/launch-banner.png"
  alt="Launch banner"
  href="https://example.com/changelog"
  width="560"
  align="center"
  borderRadius="10"
/>

Dynamic images

If you want to create a dynamic image URL for each contact, set dynamicSrc to a URL containing a variable (for example, {contact.avatarUrl}). The image URL should come from a contact property. You must also set src to a static placeholder URL (this image will render in the Loops editor). When the email is generated for each recipient, the resolved dynamicSrc value is injected as the image src. More about dynamic images.

<Image
  src="https://example.com/avatar-placeholder.png"
  dynamicSrc="{contact.avatarUrl}"
  alt="{contact.firstName}"
  width="180"
  align="center"
/>

Attribute	Type	Required	Notes
`src`	url	yes	Image URL. Always required. When `dynamicSrc` is set, `src` is a placeholder for the editor; at send time the resolved `dynamicSrc` value is used as the image URL.
`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.

<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.example.com/product-shot.png" 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
`align`	string		`"left"` (default), `"center"`, `"right"`
`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
`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).

<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 like contact properties by using a tag syntax with a prefix, for example {contact.firstName}. Unprefixed placeholders like {firstName} are not valid in LMX. Neither are other Loops variable prefixes used in MJML or the editor:

{EVENT_PROPERTY:...} for event properties in workflow emails
{DATA_VARIABLE:...} for data variables in transactional emails

LMX campaign content uses {contact.apiName} only.

Unprefixed placeholders like {firstName} and prefixed forms like {EVENT_PROPERTY:firstName} are still valid in MJML emails and in the Loops editor. They are not valid in LMX. In the future, all variables will require a prefix.

Syntax	Variable type	Use case	Example
`{contact.X}`	Contact property	Campaign personalization	`{contact.firstName}`

Variables are allowed in:

Inline content (headings, paragraphs, quotes, and list items)
Button text
Button href, Link href, Image alt, Image href, Image dynamicSrc, and Section href

Variables are not allowed at the top level or inside <CodeBlock> (they are treated as literal text there).

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 static URL with no variables. Putting a variable like {contact.avatarUrl} in src is not supported and validation returns unsupported_dynamic_attr. When the image URL should vary per contact, set dynamicSrc to a contact property such as {contact.avatarUrl} and keep src as a static 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}), and configure fallback values through the Loops editor.

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

Learn

API

CLI

Guides

LMX examples

Core rules

Block tags

Tag reference

Document styles

Headings

Paragraphs

Quotes

Code blocks

Buttons

Images

Dynamic images

Dividers

Line breaks

Lists

List items

Columns

Components

Sections

Icons

Inline tags

Inline tag attributes

Dynamic content

Variables in attributes

Fallback values

Nesting rules

Learn

API

CLI

Guides

Documentation Index

​LMX examples

​Core rules

​Block tags

​Tag reference

​Document styles

​Headings

​Paragraphs

​Quotes

​Code blocks

​Buttons

​Images

​Dynamic images

​Dividers

​Line breaks

​Lists

​List items

​Columns

​Components

​Sections

​Icons

​Inline tags

​Inline tag attributes

​Dynamic content

​Variables in attributes

​Fallback values

​Nesting rules

LMX examples

Core rules

Block tags

Tag reference

Document styles

Headings

Paragraphs

Quotes

Code blocks

Buttons

Images

Dynamic images

Dividers

Line breaks

Lists

List items

Columns

Components

Sections

Icons

Inline tags

Inline tag attributes

Dynamic content

Variables in attributes

Fallback values

Nesting rules