Courier Create

Courier Create is a template and brand editor you mount in your React app. Your customers design and publish their notifications without leaving your product. Two editors, each wrapped by a provider that handles auth and state:

TemplateProvider wraps TemplateEditor for content.
BrandProvider wraps BrandEditor for logo, colors, and footer.

Everything they write is a Tenant-scoped Template. Email is fully supported.

Template editor

Mount it, restrict channels, switch templates, offer variables, publish.

Brand editor

Logo, colors, and footer, with their own scopes.

Tenant Templates API

The endpoints both editors write through.

Install the package

Requires React 18.2.0 or newer.

npm install @trycourier/react-designer

import "@trycourier/react-designer/styles.css";
import { TemplateProvider, TemplateEditor } from "@trycourier/react-designer";

Import the stylesheet once in your app. An editor mounted without it renders unstyled, which reads as a broken layout rather than a missing import.

Issue a scoped token

The editor runs in the browser, so it authenticates with a JWT, never your API key. Issue one from your backend with , scoped to the Tenant the customer may edit: is the source of truth for the mint-and-sign-in flow. The scopes below are the designer’s own, and they differ from the Inbox scopes documented there.

const { token } = await client.auth.issueToken({
  scope: "user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write",
  expires_in: "30 days",
});

response = client.auth.issue_token(
    scope="user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write",
    expires_in="30 days",
)

curl --request POST \
  --url https://api.courier.com/auth/issue-token \
  --header "Authorization: Bearer $COURIER_API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{
    "scope": "user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write",
    "expires_in": "30 days"
  }'

response = courier.auth.issue_token(
  scope: "user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write",
  expires_in: "30 days"
)

response, err := client.Auth.IssueToken(context.TODO(), courier.AuthIssueTokenParams{
  Scope:     "user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write",
  ExpiresIn: "30 days",
})

AuthIssueTokenParams params = AuthIssueTokenParams.builder()
    .scope("user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write")
    .expiresIn("30 days")
    .build();

var response = client.auth().issueToken(params);

$response = $client->auth->issueToken(
    scope: 'user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write',
    expiresIn: '30 days',
);

var response = await client.Auth.IssueToken(new AuthIssueTokenParams
{
    Scope = "user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write",
    ExpiresIn = "30 days"
});

courier auth issue-token \
  --scope "user_id:user_123 tenant:acme-corp:read tenant:acme-corp:notifications:read tenant:acme-corp:notifications:write" \
  --expires-in "30 days"

With Courier MCP, issue a 30-day token for user_123 that can read and write acme-corp's templates.

Scopes

Scope a token to one Tenant so a customer edits only their own. Plural forms grant workspace-wide access.

Scope	Grants
`tenant:<id>:read`	Read one Tenant
`tenant:<id>:notifications:read` / `:write`	That Tenant’s Templates
`tenant:<id>:brand:read` / `:write`	That Tenant’s Brand
`tenants:read`	All Tenants
`tenants:notifications:read` / `:write`	Templates across Tenants
`tenants:brand:read` / `:write`	Brands across Tenants

The per-Tenant Template scope is notifications, plural. Always include a user_id:<id> scope. A scope that is too narrow fails at save, not at mount. A token with Template scopes and no Brand scopes renders a Brand editor the customer cannot save from. Nothing reports the gap until the write is rejected.

Verify

Mount the editor and confirm it renders. A blank editor means the provider created a new draft. Publish a change, then open the Tenant’s Template in Courier and confirm it reflects what the customer wrote.

Limits & behavior

Issue the token server-side. Shipping your API key to the browser exposes the whole workspace.
A scope grants exactly what it names. A token with only notifications scopes cannot write a Brand, even with the brand editor mounted.
Tenant-scoped, not workspace. These Templates belong to a Tenant. For workspace Templates use the .
Topics are set at send time. Pass preferences.subscription_topic_id on the send. See .

FAQ

What scopes does the token need?

A user_id:<id> scope, plus tenant:<id>:notifications:read and :write for Templates, and tenant:<id>:brand:read / :write if you show the brand editor.

Is my API key exposed in the browser?

The API key never reaches the browser as long as you issue the JWT from your backend and pass only that token to the component.

Can I embed only the brand editor?

Mount BrandProvider with BrandEditor and a token scoped to the Brand. See .

Which channels can my customers edit?

Email is fully supported. Pass routing to limit which channels appear, as describes.

Get started

Send messages

Journeys

Broadcasts

Design

Recipients

Tenants

Monitoring

Workspaces

Resources

Template editor

Brand editor

Tenant Templates API

Install the package

Issue a scoped token

Scopes

Verify

Limits & behavior

FAQ

Template editor

Brand editor

Tenant Templates API

​Install the package

​Issue a scoped token

​Scopes

​Verify

​Limits & behavior

​FAQ

Install the package

Issue a scoped token

Scopes

Verify

Limits & behavior

FAQ