**Body Component — LLM Reference**
`Body` serves as the primary visual container for all email content. It defines the main canvas area, handles the central alignment of the email message, and manages the vertical spacing and width constraints required for cross-client compatibility.
---
## Position in the Document Tree
`Body` is a **top-level** structural component. It must be placed directly inside the email root, following the `Head` component. It acts as the parent for the entire `DocumentTree`.
```tsx
{/* Meta and Styles */}
{/* DocumentTree components (Rows, Sections, Images) go here */}
```
---
## ComponentNode JSON Structure
```json
{
"id": "body_root",
"type": "BodyComponent",
"config": {
"width": "600px",
"backgroundColor": "#ffffff",
"padding": "20px 0px 20px 0px"
},
"children": []
}
```
---
## `BodyConfig` — Full Property Reference
| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `width` | `string` | No | `"600px"` | The maximum width of the email content area. |
| `backgroundColor` | `string` | No | `"#ffffff"` | The background color of the inner content canvas. |
| `padding` | `string` | No | `"0px"` | CSS padding for the main container (e.g., "20px"). |
| `fontFamily` | `string` | No | `"sans-serif"` | The default fallback font for all nested components. |
| `children` | `ComponentNode[]` | Yes | `[]` | The array of components that make up the email body. |
---
## How It Works
* **Centering:** Automatically wraps children in a centered table structure (usually `align="center"`) to ensure the email remains in the middle of the viewport.
* **Width Constraints:** Enforces the `width` property using both CSS `max-width` and HTML `width` attributes to support Outlook and older clients.
* **Inheritance:** Sets the base text direction (`dir="ltr"`) and default font family for the entire document.
---
## React Usage
```tsx
import Body from './Body';
import Row from './Row';
{/* Content */}
{/* Content */}
```
---
## Common Patterns & Examples
### 1. Standard Marketing Layout
The most common configuration for newsletters with a standard 600px width.
```json
{
"id": "body_01",
"type": "BodyComponent",
"config": {
"width": "600px",
"backgroundColor": "#ffffff"
},
"children": [ /* Row and Column nodes */ ]
}
```
### 2. Full-Width Transactional Background
Used when the content area needs a specific padding to separate it from the global background defined in `Head`.
```json
{
"id": "body_02",
"type": "BodyComponent",
"config": {
"width": "550px",
"backgroundColor": "#f4f4f4",
"padding": "30px"
},
"children": [ /* Content nodes */ ]
}
```
## Rules & Constraints
* **Single Instance:** Only **one** `Body` component should be active in the root per export.
* **Direct Children:** While technically flexible, it is best practice to only place **structural components** (like Rows or Sections) as direct children of `Body`.
* **Width Limits:** It is highly recommended to keep `width` between `500px` and `800px` for optimal readability across devices.
* **Nesting:** `Body` cannot be nested inside any other component; it is a root-level container only.