**Html Component — LLM Reference** The `Html` component is the absolute root of the email document. It wraps the entire tree, provides the necessary XML namespaces for legacy Outlook (VML) support, sets the document language, and defines the global background color that fills the email client's viewport. --- ## Position in the Document Tree `Html` is the **root component**. It is the first tag in the generated output and contains exactly two primary children: the `Head` and the `Body`. ```tsx {/* Content */} ``` --- ## ComponentNode JSON Structure ```json { "id": "root_html", "type": "HtmlComponent", "config": { "backgroundColor": "#ffffff", "lang": "en" }, "children": [ { "id": "head_1", "type": "HeadComponent", "config": { ... } }, { "id": "body_1", "type": "BodyComponent", "config": { ... } } ] } ``` --- ## `HtmlConfig` — Full Property Reference | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `backgroundColor` | `string` | No | `"#ffffff"` | The background color of the entire email client canvas (viewport). | | `lang` | `string` | No | `"en"` | Sets the `lang` and `xml:lang` attributes for accessibility. | | `children` | `ComponentNode[]` | Yes | — | Must contain a `Head` and a `Body` component. | --- ## How It Works * **Namespace Injection:** Automatically adds `xmlns:v` and `xmlns:o` to the `` tag. This is critical for rendering vector shapes (VML) and specific office-based fixes in Outlook 2003-2019. * **Legacy Backgrounds:** Uses the `bgcolor` attribute on the `` tag. While modern web dev uses CSS, many email clients (especially older Outlook versions) rely on the `bgcolor` attribute on the root to render the canvas color correctly. * **React Implementation:** Uses `React.createElement` internally to bypass JSX validation rules that occasionally flag colon-namespaced attributes (like `xmlns:v`). --- ## React Usage ```tsx import Html from './Html'; import Head from './Head'; import Body from './Body'; {/* Email Rows */} ``` --- ## Common Patterns & Examples ### 1. Minimal Root Structure The standard entry point for every email generated by the builder. ```json { "id": "email_root", "type": "HtmlComponent", "config": { "backgroundColor": "#ffffff" }, "children": [ { "type": "HeadComponent", "id": "h", "config": {} }, { "type": "BodyComponent", "id": "b", "config": {} } ] } ``` ### 2. Dark Mode Preview Background Setting a dark global background for high-contrast or themed templates. ```json { "id": "email_root_dark", "type": "HtmlComponent", "config": { "backgroundColor": "#1a1a1a", "lang": "en" }, "children": [...] } ``` --- ## Rules & Constraints * **Strict Hierarchy:** An `Html` node must be the top-most node in the JSON `DocumentTree`. * **Required Children:** It should always contain exactly one `Head` and one `Body`. * **Accessibility:** Always ensure the `lang` property matches the primary language of the email content for screen reader compatibility. * **Background Sync:** For the best visual experience, the `backgroundColor` of the `Html` component should either match the `Body` background or be a complementary "outer" color (e.g., a light gray `Html` background with a white `Body` container).