Embeddable Brand Editor for Tenants

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.

For successful authentication it’s required to generate a JWT with proper brand scopes.*

Basic Setup

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

npm install @trycourier/react-designer
# or
yarn add @trycourier/react-designer

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.

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

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:

<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:

<TemplateEditor brandEditor />

Platform

Developer Tools

Help

Embeddable Brand Editor for Tenants

Basic Setup

Publishing Hook

Theming and Customization

BrandEditor Props

Required Authentication Scopes

Brand + Template Editors

​Basic Setup

​Publishing Hook

​Theming and Customization

​BrandEditor Props

​Required Authentication Scopes

​Brand + Template Editors

Basic Setup

Publishing Hook

Theming and Customization

BrandEditor Props

Required Authentication Scopes

Brand + Template Editors