# Documentation Index - https://www.pagenflow.com/llms/intro.md - https://www.pagenflow.com/llms/data-binding.md - https://www.pagenflow.com/llms/template.md - https://www.pagenflow.com/llms/components/body.md - https://www.pagenflow.com/llms/components/button.md - https://www.pagenflow.com/llms/components/column.md - https://www.pagenflow.com/llms/components/container.md - https://www.pagenflow.com/llms/components/divider.md - https://www.pagenflow.com/llms/components/font.md - https://www.pagenflow.com/llms/components/head.md - https://www.pagenflow.com/llms/components/heading.md - https://www.pagenflow.com/llms/components/html.md - https://www.pagenflow.com/llms/components/icon.md - https://www.pagenflow.com/llms/components/image.md - https://www.pagenflow.com/llms/components/row.md - https://www.pagenflow.com/llms/components/section.md - https://www.pagenflow.com/llms/components/spacer.md - https://www.pagenflow.com/llms/components/table.md - https://www.pagenflow.com/llms/components/text.md # Email Builder — Introduction & LLM Reference Overview This document is the entry point for understanding the email builder system. Read it before consulting any individual component reference. --- ## What This Builder Does This is a **code-driven email builder** that generates HTML email templates compatible with all major email clients, including Outlook Classic (Word rendering engine), Gmail, Apple Mail, and mobile clients. Templates are defined as a JSON `DocumentTree` — a tree of `ComponentNode` objects — which the builder compiles to table-based HTML with inline styles, MSO conditional comments, and responsive media queries. --- ## Document Model Every email is a tree of **ComponentNodes**. Each node has: ```json { "id": "unique-string", "type": "ComponentType", "config": { /* component-specific properties */ }, "bindings": { /* optional: data layer connections */ }, "children": [ /* optional: child ComponentNodes */ ] } ``` The tree always starts with an `Html` root and follows a strict hierarchy. See **SECTION: TEMPLATE** for the full structural contract. > **`id` uniqueness is required.** Every `ComponentNode` in the entire document tree must have a globally unique `id`. Duplicate `id` values anywhere in the tree — across sections, containers, or nested components — will cause undefined rendering behavior. Always use distinct, descriptive identifiers for every node. --- ## Component Types ### Structural (document skeleton) | Component | Role | |---|---| | `Html` | Document root. Contains `Head` and `Body`. | | `Head` | Email ``: meta tags, fonts, global CSS resets. | | `Body` | Email canvas: sets width, background, and centers content. | | `Section` | Full-width horizontal band. Exactly 3 per template (`header`, `content`, `footer`). | ### Layout (arrange content) | Component | Role | |---|---| | `Container` | Primary layout unit. Direct child of `Section`. Distributes children horizontally into columns. Cannot nest inside another Container. | | `Column` | Vertical stacking primitive inside a Container cell. Freely nestable. | | `Row` | Horizontal arrangement primitive. Freely nestable. | ### Leaf (content) | Component | Role | |---|---| | `Text` | Styled HTML text. Primary typography primitive. | | `Heading` | Semantic headings (`h1`–`h6`) with full text styling. | | `Image` | Responsive, email-compatible image with optional link. | | `Button` | Clickable CTA button with Outlook VML support. | | `Icon` | Iconify-powered icon with background and link support. | | `Divider` | Horizontal rule for separating content. | | `Spacer` | Fixed-height vertical whitespace. | | `Font` | Web font declaration for the `Head`. Not a content node. | --- ## Hierarchy at a Glance ``` Html └── Body └── Section (×3, fixed: header / content / footer) └── Container (stacks vertically; no nesting) └── Column / Row (freely nestable) └── Text / Image / Button / Heading / Icon / Divider / Spacer ``` **Key constraints:** - There are **always exactly 3 Sections** per template — never more, never fewer. - A **Container cannot be nested inside another Container** under any circumstance. - **Column and Row can nest freely** inside each other and inside Container cells. - **Leaf nodes are terminal** — they have no structural children. For the full nesting rule set, see **SECTION: TEMPLATE**. --- ## Data Layer & Bindings Any `ComponentNode` from `Section` downward can carry a `bindings` object to connect it to the Data Layer — a structured JSON object provided at render time. ```json "bindings": { "dataList": "products", "itemAlias": "product", "visible": "user.isPremium === true", "propertyMap": { "config.src": "product.image.src", "config.alt": "product.image.alt" } } ``` See **SECTION: DATA-BINDING** for the full reference. --- ## Reference Sections | Section | Contents | |---|---| | `SECTION: INTRO` | This file. System overview and orientation. | | `SECTION: TEMPLATE` | Full structural contract: nesting rules, hierarchy, the 3-section model. | | `SECTION: DATA-BINDING` | Data Layer, `bindings` object, `propertyMap`, `dataList`, `visible`. | | `SECTION: HTML` | `Html` component reference. | | `SECTION: HEAD` | `Head` component reference. | | `SECTION: BODY` | `Body` component reference. | | `SECTION: SECTION` | `Section` component reference. | | `SECTION: CONTAINER` | `Container` component reference. | | `SECTION: COLUMN` | `Column` component reference. | | `SECTION: ROW` | `Row` component reference. | | `SECTION: TEXT` | `Text` component reference. | | `SECTION: HEADING` | `Heading` component reference. | | `SECTION: IMAGE` | `Image` component reference. | | `SECTION: BUTTON` | `Button` component reference. | | `SECTION: ICON` | `Icon` component reference. | | `SECTION: DIVIDER` | `Divider` component reference. | | `SECTION: SPACER` | `Spacer` component reference. | | `SECTION: FONT` | `Font` component reference. |