Skip navigation

Skip to main content

Localization
Localization

Localize outside React components

Use Canva-provided translations outside React components with the initIntl function.

For strings used outside React components, use the initIntl function from @canva/app-i18n-kit. This is useful for scenarios like localizing intent configurations or other non-React code.

Using initIntl

import { initIntl } from "@canva/app-i18n-kit";


const intl = initIntl();


// Example: Localizing Content Publisher intent configuration
async function getPublishConfiguration() {
  return {
    status: "completed",
    outputTypes: [
      {
        id: "post",
        displayName: intl.formatMessage({
          defaultMessage: "Feed Post",
          description:
            "Label shown in the output type dropdown for publishing to social media feeds",
        }),
        mediaSlots: [
          {
            id: "media",
            displayName: intl.formatMessage({
              defaultMessage: "Media",
              description:
                "Label for the media slot where users upload images or videos",
            }),
            // ... other configuration
          },
        ],
      },
    ],
  };
}
TYPESCRIPT

Call initIntl() once at module level. The returned intl object can then be used throughout your non-React code.

More information