​
Basic Setup

To start, install the package:

Minimal supported React version is 18.2.0.
npm install @trycourier/react-designer
# or
yarn add @trycourier/react-designer

Import the required components and styles:

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

Use the components in your app:

function App() {
  return (
    <TemplateProvider templateId="template-123" tenantId="tenant-123" token="your-jwt-token">
      <TemplateEditor />
    </TemplateProvider>
  );
}
The TemplateProvider creates the template automatically if it does not already exist.

​
Publishing Hook

Users can override the default publish button with custom logic:

import { TemplateEditor, TemplateProvider, useTemplateActions } from "@trycourier/react-designer";

function SaveButtonComponent() {
  const { publishTemplate } = useTemplateActions();

  const handlePublishTemplate = async () => {
    // Your custom logic here
    await publishTemplate();
  };

  return (
    <TemplateProvider templateId="template-123" tenantId="tenant-123" token="your-jwt-token">
      <TemplateEditor hidePublish />
      <button onClick={handlePublishTemplate}>Save Template</button>
    </TemplateProvider>
  );
}

​
Theming Support

You can customize the editor’s appearance using the theme prop:

<TemplateEditor
  theme={{
    background: "#ffffff",
    foreground: "#292929",
    border: "#DCDEE4",
    primary: "#ffffff",
    primaryForeground: "#696F8C",
    radius: "6px",
    // Add more theme variables as needed
  }}
/>

​
Disabling Auto-Save

By default, the Courier Create editor auto-saves content. To disable this feature, configure the provider as follows:

const { saveTemplate, publishTemplate } = useTemplateActions();

const handleSaveTemplate = async () => {
  await saveTemplate(); // Save first
  await publishTemplate(); // Then publish
};

<TemplateProvider templateId="template-123" tenantId="tenant-123" token="your-jwt-token">
  <TemplateEditor autoSave={false} hidePublish />
  <button onClick={handleSaveTemplate}>Save Template</button>
</TemplateProvider>

​
Using Variables

Variables are placeholders in your template that get replaced with actual data when the email is sent. For example, instead of writing Hello customer you can write Hello {{user.firstName}}, which will display the recipient’s actual name.

The Courier Embedabble editor supports nested variable structures:

<TemplateEditor
  variables={{
    user: {
      firstName: "John",
      lastName: "Doe",
      email: "john@example.com",
    },
    company: {
      name: "Acme Inc",
      address: {
        street: "123 Main St",
        city: "San Francisco",
      },
    },
  }}
/>

​
How to Insert Variables

  1. When editing text, type {{ to open the variable suggestions dropdown. Select the variable you want to insert from the list.
  2. Via curly braces {} icon in top toolbar (if the variables are available for selected element).

​
Sending a Message

Ensure you include the tenant_id in the message context and template identifier.
import { CourierClient } from "@trycourier/courier";

const courier = new CourierClient({ authorizationToken: "your-auth-token" });

const { requestId } = await courier.send({
  message: {
    context: {
      tenant_id: "tenant-123",
    },
    to: {
      email: "user@example.com",
      data: {
        name: "Spike Spiegel",
      },
    },
    template: "tenant/template-123", //`tenant/` must be prefixed with the template_id
  },
});

​
Overview

Your sample implementation will look something like this:

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

// Replace with your own values
const token = process.env.REACT_APP_COURIER_TOKEN;
const tenantId = "test-tenant";
const templateId = "template-123";

function App() {
  return (
    <div>
      <TemplateProvider templateId={templateId} tenantId={tenantId} token={token}>
        <TemplateEditor 
         variables={{
				  "user": {
				    "firstName": "John",
				    "lastName": "Doe",
				    "email": "john@example.com"
				  },
				  "company": {
				    "name": "Acme Inc",
				    "address": {
				      "street": "123 Main St",
				      "city": "San Francisco"
				    }
				  }
				}}
        />
      </TemplateProvider>
    </div>
  );
}

export default App;

Embeddable Designer Preview