HTML Layers

Embed custom HTML content in your templates.

What are HTML Layers?

HTML layers allow you to insert arbitrary HTML/CSS content that renders as part of your template. Useful for:

• Complex formatted text
• Custom styling not available in standard layers
• Embedding web content
• Dynamic content generation

Adding HTML Layers

In Editor

1. Click HTML in the sidebar
2. An HTML layer is added
3. Double-click to edit the HTML content
4. Write your HTML/CSS

Via API

{
  "layers": {
    "html-content": {
      "html": "<div style='color: red; font-size: 24px;'>Custom <b>HTML</b> content</div>"
    }
  }
}

Supported HTML

• Basic HTML tags (div, span, p, h1-h6, b, i, u)
• Inline CSS styles
• CSS classes (defined inline)
• Images via <img> tag
• Lists (ul, ol, li)
• Tables

Example: Formatted Price

<div style="font-family: Arial; text-align: center;">
  <span style="font-size: 14px; color: #666;">Starting at</span><br/>
  <span style="font-size: 48px; font-weight: bold; color: #000;">$99</span>
  <span style="font-size: 24px; color: #666;">/mo</span>
</div>

Limitations

• No JavaScript execution
• External resources may not load (CORS)
• Complex CSS features may not render
• Performance impact with complex HTML

Best Practices

1. Keep it simple — Use native layers when possible
2. Inline styles — External CSS won't load
3. Test rendering — Preview before production
4. Use for formatting — Not for complex interactivity

Use Cases

• Multi-formatted text blocks
• Custom bullet points/icons
• Complex layouts
• Styled tables
• Formatted quotes

Updated on: 11/01/2026