# EmailUX Gmail HTML Inserter (Chrome Extension)
Source: https://docs.emailux.com/addins/gmail-html-inserter

Paste and insert HTML directly into Gmail compose using the EmailUX Chrome extension.

The **EmailUX Gmail HTML Inserter** is a Chrome extension that lets you paste HTML and insert it directly into a Gmail compose window. Perfect for sending designed templates, announcements, or any custom HTML content through Gmail.

***

## How It Works

1. Install the Chrome extension named **"EmailUX HTML Inserter"** from the Chrome Web Store.
2. Open Gmail and click **Compose** to start a new email.
3. In the compose window, you will see an option labeled **EmailUX Insert HTML**.
4. Paste your HTML into the provided input.
5. Click **Insert HTML**.
6. Your HTML will be inserted into the email body instantly.

***

## What You Can Use It For

* Sending HTML email templates
* Adding formatted announcements
* Using EmailUX-designed templates
* Sending custom layouts inside Gmail

***

## Support

If you need help or have any questions, visit our support page:

👉 **[https://www.emailux.com/support](https://www.emailux.com/support)**

We’re happy to assist you.


# EmailUX Outlook HTML Import Add-in
Source: https://docs.emailux.com/addins/outlook-html-import

How to use Outlook HTML Import Add-in

The **EmailUX Outlook HTML Import Add-in** allows you to easily paste HTML code and insert it directly into a new Outlook email. This is useful when you want to send designed templates, announcements, or any custom HTML content through Outlook.

***

## How It Works

1. Install the add-in in Outlook.
2. Open a new email.
3. On the right side, open **EmailUX Outlook HTML Import**.
4. Paste your HTML into the box.
5. Click **Insert HTML**.
6. Your HTML will appear instantly inside the email body.

***

## What You Can Use It For

* Sending HTML email templates
* Adding formatted announcements
* Using EmailUX-designed templates
* Sending custom layouts inside Outlook

***

## Support

If you need help or have any questions, visit our support page:

👉 **[https://www.emailux.com/support](https://www.emailux.com/support)**

We’re happy to assist you.


# API client (@emailux/api-client)
Source: https://docs.emailux.com/api/api-client

TypeScript client for EmailUX render and deliver APIs.

The [`@emailux/api-client`](https://www.npmjs.com/package/@emailux/api-client) package calls the EmailUX HTTP API: **`render`** (HTML by template) and **`deliver`** (render + send via a provider).

## Installation

<CodeGroup>
  ```sh npm theme={null}
  npm install @emailux/api-client
  ```

  ```sh yarn theme={null}
  yarn add @emailux/api-client
  ```

  ```sh pnpm theme={null}
  pnpm add @emailux/api-client
  ```

  ```sh bun theme={null}
  bun add @emailux/api-client
  ```
</CodeGroup>

## Default base URL

All requests use:

`https://render.emailux.com`

Override with `baseUrl` in the client options if you use a custom deployment.

**OpenAPI (Swagger):** The live spec for your deployment is at **`{baseUrl}/swagger.json`** (for example [`https://render.emailux.com/swagger.json`](https://render.emailux.com/swagger.json)). Use it for the latest paths, headers, bodies, and response codes.

## Client options

| Option                | Description                                                                                     |
| --------------------- | ----------------------------------------------------------------------------------------------- |
| `apiKey`              | Required. Sent as `x-api-key`.                                                                  |
| `baseUrl`             | Optional. Defaults to `https://render.emailux.com` (trailing slash is stripped).                |
| `defaultLocale`       | Optional. Default `en-US`; used when `locale` is omitted on `deliver` / `render`.               |
| `fetchImplementation` | Optional. Custom `fetch` (e.g. for tests or edge runtimes).                                     |
| `timeoutMs`           | Optional. Request timeout via `AbortSignal`.                                                    |
| `provider`            | One of `sendgrid`, `gmail`, or `smtp`. Affects **deliver** defaults (see below).                |
| `sendgridDomain`      | Required when using SendGrid (default provider). Your SendGrid-authenticated domain identifier. |

**Render** in this package is only supported with a **SendGrid domain** configured (`sendgridDomain` is required for `render()`). Delivery can use **SendGrid**, **Gmail**, or **SMTP** via `provider` and optional per-call overrides.

**HTTP mapping:** The client sends your domain as the `x-sendgrid-domain` header on render/deliver. The public API may also document this as `x-domain`; behavior depends on your EmailUX API version.

## `render()` — HTML only

Calls `POST /v1/render` with a JSON body:

* `experience_id` (required)
* `version` (optional)
* `locale` (optional; falls back to `defaultLocale`)
* `data` (object; defaults to `{}`)

### Response codes (`/v1/render`)

| Status | Meaning                                         |
| ------ | ----------------------------------------------- |
| `200`  | Success. JSON includes `ok`, `html`, `subject`. |
| `400`  | Validation error                                |
| `401`  | Unauthorized                                    |
| `404`  | Not found                                       |

On success, the client returns `{ ok: true, status, html?, subject? }`. On failure, `{ ok: false, status, error }` with `error.message` and optional `error.body`.

### Example (SendGrid domain — required for render)

```ts theme={null}
import { EmailUxApiClient } from '@emailux/api-client';

const client = new EmailUxApiClient({
  apiKey: process.env.EMAILUX_API_KEY!,
  sendgridDomain: 'mail.yourdomain.com', // your EmailUX / SendGrid domain
});

const result = await client.render({
  experienceId: 'welcome-email',
  version: 1,
  locale: 'en-US',
  data: { firstName: 'Ada' },
});

if (result.ok) {
  console.log(result.subject, result.html?.slice(0, 200));
} else {
  console.error(result.status, result.error);
}
```

## `deliver()` — render and queue send

Calls `POST /v1/deliver` with a JSON body:

* `experience_id` (required)
* `tenant` — not set by this client; use API keys and headers if your backend requires it when `x-domain` is omitted (see `swagger.json` for your deployment).
* `version`, `locale` (optional)
* `channel_data` (required): `toEmail`, `fromEmail`, optional `toEmailName`, `fromEmailName`
* `data` (object; defaults to `{}`)

Optional headers the client may send:

* `x-provider`: `gmail` or `smtp` when using those providers (SendGrid uses the domain header path, so `x-provider` is omitted for SendGrid).

### Response codes (`/v1/deliver`)

| Status | Meaning                                 |
| ------ | --------------------------------------- |
| `200`  | Success. JSON includes `ok`, `message`. |
| `400`  | Validation error                        |
| `401`  | Unauthorized                            |
| `404`  | Not found                               |
| `502`  | Provider error                          |

### SendGrid

Default provider is SendGrid; `sendgridDomain` is required on the client.

```ts theme={null}
import { EmailUxApiClient } from '@emailux/api-client';

const client = new EmailUxApiClient({
  apiKey: process.env.EMAILUX_API_KEY!,
  provider: 'sendgrid',
  sendgridDomain: 'mail.yourdomain.com',
});

const result = await client.deliver({
  experienceId: 'order-confirmation',
  channelData: {
    toEmail: 'customer@example.com',
    toEmailName: 'Customer',
    fromEmail: 'orders@yourdomain.com',
    fromEmailName: 'Your Store',
  },
  data: { orderId: '12345' },
});

if (result.ok) {
  console.log(result.message);
} else {
  console.error(result.status, result.error);
}
```

You can omit `provider: 'sendgrid'`; the client still requires `sendgridDomain` for that configuration.

### Gmail

```ts theme={null}
import { EmailUxApiClient } from '@emailux/api-client';

const client = new EmailUxApiClient({
  apiKey: process.env.EMAILUX_API_KEY!,
  provider: 'gmail',
});

const result = await client.deliver({
  experienceId: 'order-confirmation',
  channelData: {
    toEmail: 'customer@example.com',
    fromEmail: 'noreply@yourdomain.com',
  },
  data: { orderId: '12345' },
});
```

Per-call override:

```ts theme={null}
await client.deliver({
  ...params,
  provider: 'gmail',
});
```

### SMTP

```ts theme={null}
import { EmailUxApiClient } from '@emailux/api-client';

const client = new EmailUxApiClient({
  apiKey: process.env.EMAILUX_API_KEY!,
  provider: 'smtp',
});

const result = await client.deliver({
  experienceId: 'order-confirmation',
  channelData: {
    toEmail: 'customer@example.com',
    fromEmail: 'noreply@yourdomain.com',
  },
  data: { orderId: '12345' },
});
```

## Errors and non-HTTP failures

* HTTP `4xx` / `5xx` responses set `ok: false` and include `status` and `error` (with parsed body when JSON).
* Network timeouts, aborts, or other thrown errors surface as `ok: false`, `status: 0`, and `error.message` from the thrown error.

## Requirements

Node.js **>= 18** (native `fetch`).

## Source and license

Package source lives under [`packages/api-client`](https://github.com/iClasser/emailux/tree/main/packages/api-client) in the EmailUX monorepo. License: MIT.


# A component
Source: https://docs.emailux.com/components/a

Create A component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { A } from "@emailux/a";

export default function EmailTemplate() {
  return <>
      <A href='#' color='blue'>Docs</A>
  </>
}
```

## Props

| Name         | Type                | Required | Default               | Description                                                         |
| ------------ | ------------------- | -------- | --------------------- | ------------------------------------------------------------------- |
| children     | any                 | No       |                       |                                                                     |
| dir          | "ltr" \| "rtl"      | No       | "ltr"                 | Text direction for the content                                      |
| color        | string              | No       |                       | Hex color                                                           |
| noDecoration | boolean             | No       | false                 |                                                                     |
| style        | React.CSSProperties | No       |                       |                                                                     |
| rel          | string              | No       | 'noopener noreferrer' |                                                                     |
| spacing      | string              | No       | -                     | Spacing bottom, and the anchor tag will be a block component if set |


# Badge component
Source: https://docs.emailux.com/components/badge

Create Badge tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Badge } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <Badge varient='default'>
        <span>Text</span>
     </Badge>
  </>
}
```

## Props

| Name      | Type            | Required | Default                                                                              | Description                                                      |   |
| --------- | --------------- | -------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------- | - |
| children  | React.ReactNode | string   | Yes                                                                                  | —                                                                | - |
| dir       | "ltr" \| "rtl"  | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction for the wrapper cell                              |   |
| spacing   | string          | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop |   |
| varient   | string          | No       | `default`                                                                            | —                                                                |   |
| padding   | string          | No       | `6px 8px`                                                                            | inside padding                                                   |   |
| noPadding | boolean         | No       | false                                                                                | —                                                                |   |


# Body component
Source: https://docs.emailux.com/components/body

Create Body wrapper tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Body } from "@emailux/components";

export default function EmailTemplate() {
  return <Body>
    <title>Some title</title>
  </Body>;
}
```

## Props

| Name                    | Type                | Required | Default                                                                  | Description                                                                                                                                                      |
| ----------------------- | ------------------- | -------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children                | React.ReactNode     | Yes      | —                                                                        | Content of the email document                                                                                                                                    |
| dir                     | "ltr" \| "rtl"      | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr` | Text direction                                                                                                                                                   |
| background              | string              | Yes      | —                                                                        | —                                                                                                                                                                |
| backgroundColor         | string              | Yes      | —                                                                        | —                                                                                                                                                                |
| style                   | React.CSSProperties | No       | -                                                                        | -                                                                                                                                                                |
| width                   | number or "100%"    | No       | —                                                                        | width of container                                                                                                                                               |
| padding                 | string              | No       | `12px 20px`                                                              | inner padding                                                                                                                                                    |
| outerBgColor            | string              | No       | —                                                                        | When whidth is not `100%` and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside |
| borderRadius            | string              | No       |                                                                          |                                                                                                                                                                  |
| footer                  | React.ReactNode     | No       |                                                                          |                                                                                                                                                                  |
| footerWidth             | number or "100%"    | No       | —                                                                        | width of footer                                                                                                                                                  |
| footerPadding           | string              | No       | `0px 20p`                                                                | footer padding                                                                                                                                                   |
| footerOuterBgColor      | string              | No       | —                                                                        |                                                                                                                                                                  |
| footerBackgroundColor   | string              | No       | —                                                                        |                                                                                                                                                                  |
| footerStyle             | React.CSSProperties | No       | -                                                                        | -                                                                                                                                                                |
| backgroundPosition      | string              | no       | "bottom"                                                                 | when there is background image url this is css property for position                                                                                             |
| backgroundRepeat        | string              | no       | "no-repeat, no-repeat"                                                   | when there is background image url this is css property for repeat                                                                                               |
| bgImageTakesAllWrappers | string              | no       | false                                                                    | when there is background image url takes all if width is not 100%, but with 100% it already takes all                                                            |
| borderWidth             | number              | No       | —                                                                        | border width of the body                                                                                                                                         |
| borderColor             | string              | No       | —                                                                        | Border will work if border width is greater than 0                                                                                                               |
| openCounter             | boolean             | No       | `true`                                                                   | When enabled, appends `<custom type="tracking"/>` at the end of the body content. This tag has no visual effect on the rendered email.                           |

All other standard attributes for the `<body>` element are supported.

## Open counter tracking

By default, `Body` appends a `<custom type="tracking"/>` tag as the last element inside `<body>`. This tag does not affect how the email looks in inboxes and is intended for open-counter tracking in downstream email pipelines.

```tsx theme={null}
// Tracking tag is included by default
<Body>...</Body>

// Disable the tracking tag
<Body openCounter={false}>...</Body>
```


# BodyContent component
Source: https://docs.emailux.com/components/body-contents

Create BodyContent wrapper tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { BodyContent } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <BodyContent>
          <title>Header</title>
      </BodyContent>

      <BodyContent>
          <title>Body</title>
      </BodyContent>

      <BodyContent>
          <title>Footer</title>
      </BodyContent>
  </>
}
```

## Props

| Name                    | Type                | Required | Default                                                                  | Description                                                                                                                                                      |
| ----------------------- | ------------------- | -------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children                | React.ReactNode     | Yes      | —                                                                        | Content of the email document                                                                                                                                    |
| dir                     | "ltr" \| "rtl"      | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr` | Text direction                                                                                                                                                   |
| background              | string              | Yes      | —                                                                        | —                                                                                                                                                                |
| backgroundColor         | string              | Yes      | —                                                                        | —                                                                                                                                                                |
| style                   | React.CSSProperties | No       | -                                                                        | -                                                                                                                                                                |
| width                   | number or "100%"    | No       | —                                                                        | width of container                                                                                                                                               |
| padding                 | string              | No       | `12px 20px`                                                              | inner padding                                                                                                                                                    |
| outerBgColor            | string              | No       | —                                                                        | When whidth is not `100%` and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside |
| borderRadius            | string              | No       |                                                                          |                                                                                                                                                                  |
| className               | string              | no       | —                                                                        | —                                                                                                                                                                |
| backgroundPosition      | string              | no       | "bottom"                                                                 | when there is background image url this is css property for position                                                                                             |
| backgroundRepeat        | string              | no       | "no-repeat, no-repeat"                                                   | when there is background image url this is css property for repeat                                                                                               |
| bgImageTakesAllWrappers | string              | no       | false                                                                    | when there is background image url takes all if width is not 100%, but with 100% it already takes all                                                            |
| borderWidth             | number              | No       | —                                                                        | border width                                                                                                                                                     |
| borderColor             | string              | No       | —                                                                        | Border will work if border width is greater than 0                                                                                                               |


# Box component
Source: https://docs.emailux.com/components/box

Create Box wrapper tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Box } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <Box 
        width='120px' 
        padding='10px 16px'
        center 
        borderRadius='10px'
        backgroundColor='#fff' 
        spacing='20px'
        backgroundImageUrl='https://example.com/image.png'
        >
          <Text>
      </Box>
  </>
}
```

## Props

| Name               | Type                | Required | Default                                                                  | Description                                                          |
| ------------------ | ------------------- | -------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
| children           | React.ReactNode     | Yes      | —                                                                        | Content of the email document                                        |
| dir                | "ltr" \| "rtl"      | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr` | Text direction                                                       |
| backgroundColor    | string              | Yes      | —                                                                        | —                                                                    |
| style              | React.CSSProperties | No       | -                                                                        | -                                                                    |
| width              | number or "100%"    | No       | —                                                                        | width of container                                                   |
| padding            | string              | No       | `10px 16px`                                                              | inner padding                                                        |
| className          | string              | no       | —                                                                        | —                                                                    |
| borderRadius       | string              | No       |                                                                          |                                                                      |
| backgroundImageUrl | string              | no       |                                                                          | Box background image                                                 |
| backgroundPosition | string              | no       | "bottom"                                                                 | when there is background image url this is css property for position |
| backgroundRepeat   | string              | no       | "no-repeat, no-repeat"                                                   | when there is background image url this is css property for repeat   |
| itemCenter         | boolean             | no       | true                                                                     | Inner items will be aligned center                                   |
| center             | boolean             | no       | true                                                                     | The box will be positioned center of email                           |
| borderWidth        | number              | No       | —                                                                        | border width                                                         |
| borderColor        | string              | No       | —                                                                        | Border will work if border width is greater than 0                   |


# Button component
Source: https://docs.emailux.com/components/button

Create Button component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Button } from "@emailux/components";

<Button
 text='Submit'
 href='https://example.com'
 backgroundColor='#000'
 textColor='#ffff'
 borderRadius='20px'
 style={{
  paddingBottom: '20px'
 }}
/>
```

## Props

| Name            | Type           | Required | Default                                                                              | Description                                                      |
| --------------- | -------------- | -------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
| src             | string         | Yes      | ""                                                                                   | Path or URL to the image                                         |
| dir             | "ltr" \| "rtl" | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction                                                   |
| spacing         | string         | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| href            | string         | Yes      | ""                                                                                   |                                                                  |
| icon            | object         | No       |                                                                                      | `{ url, alt, width, height }`                                    |
| backgroundColor | string         | Yes      | ""                                                                                   |                                                                  |
| align           | string         | No       | "center"                                                                             |                                                                  |
| direction       | string         | No       | "ltr"                                                                                |                                                                  |
| textColor       | string         | No       |                                                                                      | css color hex                                                    |
| borderRadius    | string         | No       |                                                                                      |                                                                  |
| style           | string         | No       |                                                                                      | CSS style                                                        |
| borderWidth     | string         | No       |                                                                                      | CSS border width                                                 |
| borderColor     | string         | No       |                                                                                      | CSS border color                                                 |


# Card component
Source: https://docs.emailux.com/components/card

Create Card component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Text } from "@emailux/components";
import { Card } from "@emailux/card";

export default function EmailTemplate() {
  return <>
      <Card 
        header={<Text>Some header</Text>}
        content={<Text>Some content</Text>}
        footer={<Text>Some footer</Text>}
        headerBackgroundColor='#fff'
        contentBackgroundColor='#fff'
        footerBackgroundColor='#fff'
        borderRadius='24px' 
        padding='12px 15px'
        width='100%'
        spacing='20px' 
     />
  </>
}
```

## Props

| Name                   | Type            | Required | Default                                                                              | Description                                                      |
| ---------------------- | --------------- | -------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
| header                 | React.ReactNode | No       | —                                                                                    |                                                                  |
| dir                    | "ltr" \| "rtl"  | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction                                                   |
| spacing                | string          | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| content                | React.ReactNode | No       | —                                                                                    |                                                                  |
| footer                 | React.ReactNode | No       | —                                                                                    |                                                                  |
| headerBackgroundColor  | string          | No       | #fff                                                                                 | —                                                                |
| contentBackgroundColor | string          | No       | #fff                                                                                 | —                                                                |
| footerBackgroundColor  | string          | No       | #fff                                                                                 | —                                                                |
| borderRadius           | string          | No       | `24px`                                                                               | —                                                                |
| padding                | string          | No       | \`\`                                                                                 | inner padding                                                    |
| width                  | string          | No       | `100%`                                                                               |                                                                  |
| headerCenter           | boolean         | No       | undefined                                                                            |                                                                  |
| contentCenter          | boolean         | No       | undefined                                                                            |                                                                  |
| footerCenter           | boolean         | No       | undefined                                                                            |                                                                  |


# Css component
Source: https://docs.emailux.com/components/css

Create Css component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Html, Head } from "@emailux/components";
import { Css } from "@emailux/css";
// Can also be imported from "@emailux/components"
// import { Css } from "@emailux/components";

export default function EmailTemplate() {
  return <Html>
  <Head>
    <Css 
      selector={['body', '.emailux-table']} 
      style={{ fontSize: '12px', lineHeight: '24px', color: '#000' }}
      />
  <Head>
</Html>
```

## Props

| Name     | Type                              | Required | Default | Description                   |
| -------- | --------------------------------- | -------- | ------- | ----------------------------- |
| children | React.ReactNode                   | Yes      | —       | Content of the email document |
| style    | React.CSSProperties               | Yes      | —       | -                             |
| selector | Array of strings of css selectors | No       | —       |                               |

All other standard Head attributes for the `<css>` element are supported.


# Font component
Source: https://docs.emailux.com/components/font

Create Font component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Font } from "@emailux/components";

export default function EmailTemplate() {
  return <Font 
            family='Inter'
            url='https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2'
            type='woff2'
            fallback='Arial'
            style='normal'
            weight='400'
            targetSelectors={['body', '.emailux-table']}
          />
}
```

## Props

| Name            | Type                          | Required | Default | Description                   |
| --------------- | ----------------------------- | -------- | ------- | ----------------------------- |
| children        | React.ReactNode               | Yes      | —       | Content of the email document |
| family          | String                        | Yes      | —       | -                             |
| url             | String                        | Yes      | —       | -                             |
| type            | String                        | Yes      | —       | "woff2" or "woff"             |
| style           | String                        | Yes      | —       | -                             |
| weigth          | String                        | Yes      | —       | 400                           |
| targetSelectors | Array of css selector strings | No       | —       |                               |

All other standard Head attributes for the `<head>` element are supported.


# Head component
Source: https://docs.emailux.com/components/head

Create Head wrapper component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Head } from " @emailux/components";

export default function EmailTemplate() {
  return <Head>
    <title>Some title</title>
  </Head>;
}
```

## Props

| Name       | Type            | Required | Default                   | Description                            |
| ---------- | --------------- | -------- | ------------------------- | -------------------------------------- |
| children   | React.ReactNode | Yes      | —                         | Content of the email document          |
| title      | React.ReactNode | No       | —                         | Title                                  |
| defaultCss | string          | No       | Pre-written CSS for email | You can replace this with your own css |

All other standard Head attributes for the `<head>` element are supported.


# Hr component
Source: https://docs.emailux.com/components/hr

Create Hr component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Hr } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <Hr />
  </>
}
```

## Props

| Name    | Type                | Required | Default                                                                              | Description                                                      |
| ------- | ------------------- | -------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
| color   | string              | No       | `#e5e5e5`                                                                            |                                                                  |
| dir     | "ltr" \| "rtl"      | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction                                                   |
| spacing | string              | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop |
| width   | string              | No       | `100%`                                                                               | width of seperator                                               |
| align   | string              | No       | `center`                                                                             | If width is less than 100% then alignment becomes important      |
| style   | React.CSSProperties | No       |                                                                                      |                                                                  |
| height  | number              | No       | `1`                                                                                  |                                                                  |


# Html component
Source: https://docs.emailux.com/components/html

Create Html wrapper tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Html } from "@emailux/components";

export default function Email() {
  return <Html>Hello</Html>;
}
```

## Props

| Name           | Type                    | Required | Default | Description                                                             |
| -------------- | ----------------------- | -------- | ------- | ----------------------------------------------------------------------- |
| children       | any                     | Yes      | —       | Content of the email document                                           |
| dir            | "ltr" \| "rtl"          | No       | "ltr"   | Text direction for the document, it will affect all components          |
| lang           | string                  | No       | "en"    | Language of the document                                                |
| defaultSpacing | string one value in css | No       | "20px"  | This will set the whole email default spacing (padding bottom defaults) |

All other standard HTML attributes for the `<html>` element are supported.


# Img component
Source: https://docs.emailux.com/components/img

Create Img component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Img } from "@emailux/components";

export default function Email() {
  return <Img src="cat.jpg" alt="Cat" width={300} height={300} />;
}
```

## Alignment & styling

```tsx theme={null}
<Img
  src="banner.png"
  alt="Banner"
  width={600}
  center
  direction="ltr"
  borderRadius="8px"
  spacing="20px"
/>
```

## Props

| Name         | Type                | Required | Default                                                                              | Description                                                                                                     |
| ------------ | ------------------- | -------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| src          | string              | Yes      | ""                                                                                   | Path or URL to the image                                                                                        |
| alt          | string              | No       | "image"                                                                              | Alternate description for the image                                                                             |
| width        | number \| string    | No       | —                                                                                    | Image width. Numbers are treated as px in style                                                                 |
| height       | number \| string    | No       | —                                                                                    | Image height. Numbers are treated as px in style                                                                |
| center       | boolean             | No       | false                                                                                | Centers the image within the table cell                                                                         |
| borderRadius | string              | No       | —                                                                                    | Applied as CSS border-radius on the image                                                                       |
| dir          | "ltr" \| "rtl"      | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction                                                                                                  |
| spacing      | string              | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop                                                |
| padding      | string              | No       | —                                                                                    | Custom padding for container cell; overrides default bottom spacing. In plain mode, applied to the image style. |
| style        | React.CSSProperties | No       | —                                                                                    |                                                                                                                 |
| plain        | boolean             | No       | false                                                                                | Returns plain image without container and spacing                                                               |
| href         | string              | No       | -                                                                                    | If you want to convert the image to be clickable                                                                |
| maxHeight    | number \| string    | No       | —                                                                                    |                                                                                                                 |
| maxWidth     | number \| string    | No       | —                                                                                    |                                                                                                                 |


# Table component
Source: https://docs.emailux.com/components/table

Create Table component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

### Rows and columns

```tsx theme={null}
import { Table } from "@emailux/components";

export default function ExampleRowsAndCols() {
  return (
    <Table padding="10px" border>
      <Table.Row align="left" valign="middle">
        <Table.Col>Cell 1</Table.Col>
        <Table.Col>Cell 2</Table.Col>
      </Table.Row>
      <Table.Row>
        <Table.Col>Cell 3</Table.Col>
        <Table.Col>Cell 4</Table.Col>
      </Table.Row>
    </Table>
  );
}
```

### Inherit wrapper styles via context

`padding`, `border`, and `borderColor` from `Table` flow to `Table.Row` and `Table.Col` via context.

```tsx theme={null}
export default function ExampleContext() {
  return (
    <Table padding="12px" border borderColor="#ddd">
      <Table.Row>
        <Table.Col>Left</Table.Col>
        <Table.Col>Right</Table.Col>
      </Table.Row>
    </Table>
  );
}
```

### Override per row or col

`Table.Row` can override context for its children; `Table.Col` can override for itself.

```tsx theme={null}
export default function ExampleOverrides() {
  return (
    <Table padding="12px" border borderColor="#ddd">
      <Table.Row padding="6px" borderColor="#bbb">
        <Table.Col>Compact A</Table.Col>
        <Table.Col border={false} padding="16px">Emphasized B</Table.Col>
      </Table.Row>
    </Table>
  );
}
```

### Using colSpan and width

`Table.Col` extends native `td` props, so attributes like `colSpan` work as expected.

```tsx theme={null}
export default function ExampleColSpan() {
  return (
    <Table padding="10px" border>
      <Table.Row>
        <Table.Col colSpan={2} padding="8px">Section Header</Table.Col>
      </Table.Row>
      <Table.Row>
        <Table.Col width="70%">Item A</Table.Col>
        <Table.Col width="30%">$10</Table.Col>
      </Table.Row>
    </Table>
  );
}
```

### Alignment, vertical alignment, and background

```tsx theme={null}
export default function ExampleAlignment() {
  return (
    <Table padding="10px" border>
      <Table.Row align="center" valign="top" backgroundColor="#fafafa">
        <Table.Col>Centered Top</Table.Col>
        <Table.Col>Also Centered</Table.Col>
      </Table.Row>
    </Table>
  );
}
```

## Props

### `Table`

| Name        | Type            | Required | Default                                                                              | Description                                                      |   |         |        |    |          |                                             |
| ----------- | --------------- | -------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------- | - | ------- | ------ | -- | -------- | ------------------------------------------- |
| dir         | "ltr" \| "rtl"  | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction                                                   |   |         |        |    |          |                                             |
| spacing     | string          | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop |   | padding | string | No | `"10px"` | Inner padding applied to cells via context. |
| border      | boolean         | No       | `false`                                                                              | Enables cell borders.                                            |   |         |        |    |          |                                             |
| borderColor | string          | No       | `"#e5e5e5"`                                                                          | Border color when `border` is enabled.                           |   |         |        |    |          |                                             |
| width       | string          | No       | `"100%"`                                                                             | Width of the rendered table.                                     |   |         |        |    |          |                                             |
| children    | React.ReactNode | Yes      | —                                                                                    | Typically one or more `Table.Row`.                               |   |         |        |    |          |                                             |

Notes:

* When `spacing` is provided, an outer wrapper table is used to apply spacing.
* `padding`, `border`, and `borderColor` are provided to descendants via context and can be overridden by `Table.Row` or `Table.Col`.
* Borders are applied per cell with side-specific rules to avoid double borders (top/left on first row/column; right/bottom on all cells).

### `Table.Row`

| Name            | Type                            | Required | Default    | Description                                           |
| --------------- | ------------------------------- | -------- | ---------- | ----------------------------------------------------- |
| dir             | "ltr" \| "rtl"                  | No       | "ltr"      | Text direction for the content                        |
| children        | React.ReactNode                 | Yes      | —          | One or more `Table.Col`.                              |
| backgroundColor | string                          | No       | —          | Background color for the row.                         |
| align           | `"left" \| "center" \| "right"` | No       | `"left"`   | Horizontal text alignment for cells in the row.       |
| valign          | `"top" \| "middle" \| "bottom"` | No       | `"middle"` | Vertical alignment for cells in the row.              |
| padding         | string                          | No       | —          | Overrides context `padding` for this row's cells.     |
| border          | boolean                         | No       | —          | Overrides context `border` for this row's cells.      |
| borderColor     | string                          | No       | —          | Overrides context `borderColor` for this row's cells. |

### `Table.Col`

| Name            | Type            | Required | Default | Description                                                                             |
| --------------- | --------------- | -------- | ------- | --------------------------------------------------------------------------------------- |
| dir             | "ltr" \| "rtl"  | No       | "ltr"   | Text direction for the content                                                          |
| children        | React.ReactNode | Yes      | —       | Content for the cell.                                                                   |
| backgroundColor | string          | No       | —       | Background color for the cell.                                                          |
| padding         | string          | No       | —       | Padding for the cell (defaults from context if not provided).                           |
| border          | boolean         | No       | —       | Whether to set a border on the cell (defaults from context if not provided).            |
| borderColor     | string          | No       | —       | Color for the cell border when `border` is set (defaults from context if not provided). |
| width           | string          | No       | —       | Width of the cell.                                                                      |
| align           | string          | No       | —       | alignment of cell                                                                       |

Additional:

* `Table.Col` extends native `td` props, so attributes like `colSpan` and `rowSpan` are supported.


# Text component
Source: https://docs.emailux.com/components/text

Create Text component

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Text } from "@emailux/components";

export default function EmailTemplate() {
  return <Text spacing='10px' fontWeight='400' fontFamily='Arial' fontSize='20px'>
  Hello world!
  </Text>;
}
```

## Props

| Name          | Type                     | Required | Default                                                                              | Description                                                                                |
| ------------- | ------------------------ | -------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| children      | React.ReactNode          | Yes      | —                                                                                    | Content of the email document                                                              |
| color         | string                   | No       | —                                                                                    | `#000`                                                                                     |
| fontSize      | string                   | No       | —                                                                                    |                                                                                            |
| fontWeight    | string                   | No       | —                                                                                    |                                                                                            |
| lineHeight    | string                   | No       | —                                                                                    |                                                                                            |
| fontFamily    | string                   | No       | —                                                                                    |                                                                                            |
| className     | string                   | No       | —                                                                                    |                                                                                            |
| dir           | "ltr" \| "rtl"           | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction for the wrapper cell                                                        |
| spacing       | string                   | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop                           |
| style         | React.CSSProperties      | No       | —                                                                                    |                                                                                            |
| plain         | boolean                  | No       | false                                                                                | Used when you don't want to use table or margin bottom just a paragraph without spacing    |
| letterSpacing | string                   | No       | —                                                                                    |                                                                                            |
| inline        | boolean                  | No       | false                                                                                | Used when you want to write something in one line inside another component without spacing |
| href          | string                   | No       | -                                                                                    | If you want to convert the text to link                                                    |
| padding       | CSS padding style string | No       | ""                                                                                   | Only works if its either inline or plain and you can add a css string                      |

All other standard attributes for the `<text>` element are supported.


# Ul component
Source: https://docs.emailux.com/components/ul

Create Ul wrapper tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { Ul } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <Ul spacing='20px' fontSize='14px' >
          ....
      </Ul>
  </>
}
```

## Props

| Name          | Type            | Required | Default                                                                              | Description                                                                             |
| ------------- | --------------- | -------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
| children      | React.ReactNode | Yes      | —                                                                                    | Content of the email document                                                           |
| dir           | "ltr" \| "rtl"  | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr`             | Text direction for the wrapper cell                                                     |
| spacing       | string          | No       | Comes from wrapping `Html` component's `defaultSpacing` context prop which is `20px` | Spacing bottom, by default comes from `Html` defaultSpacing prop                        |
| color         | string          | No       | —                                                                                    | `#000`                                                                                  |
| fontSize      | string          | No       | —                                                                                    |                                                                                         |
| lineHeight    | string          | No       | —                                                                                    |                                                                                         |
| fontWeight    | string          | No       | —                                                                                    |                                                                                         |
| className     | string          | No       | —                                                                                    |                                                                                         |
| plain         | boolean         | No       | false                                                                                | Used when you don't want to use table or margin bottom just a paragraph without spacing |
| letterSpacing | string          | No       | —                                                                                    |                                                                                         |
| paddingLeft   | string          | No       | `20px`                                                                               |                                                                                         |


# EmailUX Setup
Source: https://docs.emailux.com/getting-started/setup

Create a brand-new with EmailUX.

## 1. Create directory

Create a new folder called `emailux-email-starter` and initialize a new npm project:

```sh theme={null}
mkdir emailux-email-starter
cd emailux-email-starter
npm init
```

## 2. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```sh npm theme={null}
  npm install @emailux/components
  ```

  ```sh yarn theme={null}
  yarn add @emailux/components
  ```

  ```sh pnpm theme={null}
  pnpm add @emailux/components
  ```

  ```sh bun theme={null}
  bun add @emailux/components
  ```
</CodeGroup>

## 3. Write an email template

Create a new folder called `emails`, create a file inside called `my-email.tsx`, and add the following code:

```jsx emails/email-template.tsx theme={null}
import { Button, Html, Body, Head } from "@emailux/components";
import * as React from "react";

export default function EmailTemplate({ name }) {
  return (
    <Html>
      <Head></Head>
      <Body previewText='here are some details.'>
        <Text>Hello, {name}</Text>
        <Button href="https://example.com">Click here</Button>
      </Body>
    </Html>
  );
}
```

## 4. Use the template to convert and send email

```jsx parser.tsx theme={null}
import EmailTemplate from 'emails/email-template';
import { getHtml } from "@emailux/components";

export default function hanlder(req, resp){
  try{
    // convert template to Html

    const name = 'John';
    const { html, error } = getHtml(<EmailTemplate name={name} />);
    if(!error){
      // handle error
    }

    // handle html
    // send email `sendEmail(html)` using your provider like sendGrid or EmailUX
    // ....
    

  } catch (error){

  }
}
```


# EmailUX Email
Source: https://docs.emailux.com/introduction

Build and send emails using EmailUX Email.

## Getting Started

EmailUX Email is tested and designed to make your job easier to author emails

<CardGroup>
  <Card title="Setup" icon="flower" href="/getting-started/setup">
    Create a brand-new folder with packages powered by EmailUX Email.
  </Card>
</CardGroup>

## Components

These are some standard components build using table-based structure. So that you don't have to deal with.

<CardGroup>
  <Card title="HTML" icon="file-code" href="/components/html">
    A React html component to wrap emails.
  </Card>

  <Card title="Body" icon="grid" href="/components/body">
    The main wrapper that hold your content.
  </Card>

  <Card title="Button" icon="b" href="/components/button">
    A React button component to help build emails.
  </Card>

  <Card title="Text" icon="text-size" href="/components/text">
    A block of text separated by blank spaces.
  </Card>
</CardGroup>

## Integrations

In order to send EmailUX Emails you have to convert it to an HTML string and then you can send that using your own or our sending provider.

<CardGroup>
  <Card title="API client" icon="cube" href="/api/api-client">
    Call render and deliver from Node with the npm package @emailux/api-client (SendGrid, Gmail, SMTP).
  </Card>
</CardGroup>

## Authors

* Hamed Rohani ([@hmdroh](https://x.com/hmdroh))