This API is in preview mode and may experience breaking changes. Apps that use this API will not pass the review process and can't be made available on the Apps Marketplace.

The Design Editor intent enables users to:

Interact with the Canva design editor.
Create specialized editing tools that appear alongside the Canva design surface.
Provide creative assistance directly within the user's design workflow.

Developing a Design Editor intent

The following steps outline how to implement the Design Editor intent.

Step 1: Enable the Design Editor intent

Navigate to an app via the Your apps⁠(opens in a new tab or window) page.
On the Configuration page, find the Intents section.
Toggle Design Editor to the On position.

Step 2: Register the Design Editor intent

Before an intent can be implemented, it needs to be registered. In the case of the Design Editor intent, registration establishes how your app will render its UI within the Canva editor.

To register the intent, call the prepareDesignEditor method as soon as the app loads:

import { prepareDesignEditor } from "@canva/intents/design";

prepareDesignEditor({
  render: async () => {
    // TODO: Implement the logic to render your app's UI
  },
});

Intents must only be registered once. To learn more, see Technical requirements.

Step 3: Render the app's UI

When a user opens your app within the Canva editor, the intent will use the render method to display your app's interface. This method should set up your UI components and make them ready for user interaction.

import { createRoot } from "react-dom/client";
import { AppUiProvider, Rows, Text } from "@canva/app-ui-kit";
import { prepareDesignEditor } from "@canva/intents/design";
import "@canva/app-ui-kit/styles.css";
import * as styles from "styles/components.css";

prepareDesignEditor({
  render: async () => {
    const rootElement = document.getElementById("root");
    const rootElementExists = rootElement instanceof Element;

    if (!rootElementExists) {
      throw new Error("Unable to find element with id of 'root'");
    }

    const root = createRoot(rootElement);

    root.render(
      <AppUiProvider>
        <DesignEditor />
      </AppUiProvider>
    );
  },
});

function DesignEditor() {
  return (
    <div className={styles.container}>
      <Rows spacing="2u">
        <Text>Hello world.</Text>
      </Rows>
    </div>
  );
}

TSX

Next steps

After setting up the Design Editor intent, use the available APIs, such as the Design Editing API, to interact with the user's design.