> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# HTML Layers

# 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

```json
{
  "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

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