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

PropTypeDefaultDescription
autoSavebooleantrueAutomatically save changes as they’re made
autoSaveDebouncenumber200msDelay before triggering auto-save
hidePublishbooleanfalseHides the “Publish Changes” button
onChange(value: BrandSettings) => void—Callback when brand settings are modified
themeThemeObj / cssClass—Theme object or CSS class name
valueBrandSettings—Initial values like colors, logos, and links
variablesRecord<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 />