> ## Documentation Index
> Fetch the complete documentation index at: https://www.courier.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrating the Embeddable Brand Editor

> Manage and customize tenant branding in React apps with Courier Create's Brand Editor. Update logos, colors, and styles using an embeddable, authenticated interface.

The Brand Editor component allows you to customize and manage a tenant's brand settings directly within your application. This brand editor provides an interface for modifying brand colors, logos, and other visual elements that will be applied to your templates.

<Note>For successful authentication it's required to generate a JWT with proper [brand scopes](/platform/create/authentication).\*</Note>

## Basic Setup

To embed the Brand Editor, install and import the required components and styles:

```bash theme={null}
npm install @trycourier/react-designer
# or
yarn add @trycourier/react-designer
```

```jsx theme={null}
import "@trycourier/react-designer/styles.css";
import { BrandEditor, BrandProvider } from "@trycourier/react-designer";

function App() {
  return (
    <BrandProvider tenantId="tenant-123" token="your-jwt-token">
      <BrandEditor />
    </BrandProvider>
  );
}

export default App;
```

## Publishing Hook

Similar to the Template Editor, the Brand Editor also provides a publishing hook that allows you to customize the publishing behavior. You can use the `useBrandActions` hook to programmatically trigger brand updates and integrate them with your application's workflow.

<Note>`useBrandActions` must be used inside of the `<BrandProvider />` context</Note>

```jsx theme={null}
import { BrandEditor, BrandProvider, useBrandActions } from "@trycourier/react-designer";

function SaveBrandComponent() {
  const { publishBrand } = useBrandActions();

  const handlePublishBrand = async () => {
    // Your custom logic
    await publishBrand();
  };

  return (
    <BrandProvider tenantId="tenant-123" token="your-jwt-token">
      <BrandEditor hidePublish />
      <button onClick={handlePublishBrand}>Save Brand</button>
    </BrandProvider>
  );
}
```

## Theming and Customization

Apply visual styles directly to match each tenant's brand:

```jsx theme={null}
<BrandEditor
  theme={{
    background: "#ffffff",
    primary: "#1D4ED8",
    accent: "#E5F3FF",
    radius: "8px",
    destructive: "#FF3363",
    muted: "#D9D9D9",
  }}
/>
```

## BrandEditor Props

| Prop               | Type                             | Default | Description                                    |
| ------------------ | -------------------------------- | ------- | ---------------------------------------------- |
| `autoSave`         | `boolean`                        | `true`  | Automatically save changes as they’re made     |
| `autoSaveDebounce` | `number`                         | `200ms` | Delay before triggering auto-save              |
| `hidePublish`      | `boolean`                        | `false` | Hides the "Publish Changes" button             |
| `onChange`         | `(value: BrandSettings) => void` | —       | Callback when brand settings are modified      |
| `theme`            | `ThemeObj / cssClass`            | —       | Theme object or CSS class name                 |
| `value`            | `BrandSettings`                  | —       | Initial values like colors, logos, and links   |
| `variables`        | `Record<string, any>`            | —       | Variables used in brand content (e.g. footers) |

## Required Authentication Scopes

* `tenant:${TENANT_ID}:brand:read` | Allows the user to read brand data for a specific tenant.

* `tenant:${TENANT_ID}:brand:write` | Allows the user to write brand data for a specific tenant.

## Brand + Template Editors

Courier Create allows you to use both editors in a single interface via the brandEditor prop on TemplateEditor. No need to use BrandProvider separately:

```jsx theme={null}
<TemplateEditor brandEditor />
```