App Templates

Overview

App templates are pre-built starter projects that demonstrate common use cases and best practices for building Canva Apps. Each template provides a ready-to-use foundation with example code, UI components, and integration patterns to help you get started quickly.

Compared to our example apps (which are focused on demonstrating specific features or APIs), templates are designed to be comprehensive starting points for building production-ready apps.

You can create a new app from any of these templates using the Canva CLI's canva apps create command, which scaffolds the template's code and configuration files in your local environment.

We provide the following templates for creating new Canva Apps:

Hello World

Create a minimal Canva app as a first example.

The Hello World template is a minimal example app that demonstrates using the design editor intent to implement components and design tokens from the Canva App UI Kit, as well as an Apps SDK API method. You can use it as a base to build your own Canva app.

This article shows you how to install the Hello World template, run it locally, and start building your own app.

Step 1: Create a new app using the Hello World template

Install the Canva CLI globally:
shell
```
npm install -g @canva/cli@latest
```
Log in to the Canva CLI. This command opens an access request page in your browser:
<GlobalContent>
shell
```
canva login
```
</GlobalContent>
<ChinaContent>
shell
```
canva login --cn
```
</ChinaContent>
Click Allow to grant the Canva CLI permission to manage your Canva apps.
Use the following command to create a new app using the Hello World template:
shell
```
canva apps create --template "hello_world"
```
The setup process guides you through the remaining settings:
1. Choose the audience for your app.
2. Enter a name for your app.
3. Choose whether to initialize a git repository for your project.
4. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

shell

cd example-hello-world-app
npm start

Replace example-hello-world-app with your app's name.

Step 2: Preview your app

Run the app locally to see a preview.

In your app's root directory, start the app. The example-hello-world-app directory name will vary based on your app's name.
shell
```
cd example-hello-world-app
npm start
```
After the app starts, the Development URL (Frontend) and Base URL (Backend) local addresses are shown in the output.
In Your apps, select your app, then Code upload > App source > Development URL.
Under Code upload > App source > Development URL confirm that the Development URL (Frontend) address matches the address shown in the Development URL field.
Locate the Preview button at the top right of the page, and click it to open a new tab that loads the Canva editor. A preview of your app loads in the sidebar.
Click Open if prompted. This message only appears when using an app for the first time.

You can now try adding more components, tokens, and methods in the following step, or go to Step 4 to set up your app back end.

Step 3. Customize your app

The app should now be running locally. In the preview, you can see the minimal Canva app. Clicking the Do something cool button creates a new text element in the design.

You can customize the app using more UI Kit components, design tokens, and API methods.

The following example customizes the Hello World template by adding the ability to change text color and size in the design. It uses the following:

A PaintRollerIcon from the App UI Kit icon set.
The secondary color design token.
The editContent API method.

In your IDE, open the src/app.tsx file.

Add PaintRollerIcon to the @canva/app-ui-kit import.

tsx

import { Button, Rows, Text, PaintRollerIcon } from "@canva/app-ui-kit";

Import the editContent method:

tsx

import { editContent } from "@canva/design";

Add the editContent method, and create the following:

A callback with the required contentType and target properties.
The session object, and a sync method for managing content change.
A loop to search through the content items in the design using the readPlaintext and formatParagraph methods:

tsx

export const App = () => {
  const isSupported = useFeatureSupport();
  const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
    isSupported(fn),
  );

  const onClick = () => {
    if (!addElement) {
      return;
    }

    addElement({
      type: "text",
      children: ["Hello world!"],
    });
  };

  async function editOnClick() {
    await editContent(
      {
        contentType: "richtext",
        target: "current_page"
      },
      async (session) => {
        for (const content of session.contents) {
          const plaintext = content.readPlaintext();

          content.formatParagraph(
            { index: 0,
              length: plaintext.length
            },
            { fontWeight: "bold",
              fontSize: 30,
              color: "#008008"
             }
          );
        }
        await session.sync();
      }
    );
  }

Create a new button component after the existing Do something cool button, using the secondary design variant and adding the PaintRollerIcon:

tsx

<Button variant="secondary" onClick={editOnClick} icon={(() => <PaintRollerIcon />)} stretch>
  {intl.formatMessage({
    defaultMessage: "Change the content",
    description: "Change the color and size of text content in the design when pressed.",
  })}
</Button>

When you click on the new button, the text content in the design changes color and size.

Step 4. Connect to a backend

To add more capabilities to your new app, connect the app to your backend. For more information, see Using a backend.

Step 5. Add user authentication

Update your app to add user authentication. You can use frictionless or OAuth authentication:

Frictionless: To implement frictionless authentication, add App ID and JWT verification middleware to your app. This approach uses the auth.getCanvaUserToken() method to receive a JWT. For more information, see JSON Web Tokens. For an example, see the authentication example in the canva-apps-sdk-starter-kit repository.
OAuth: Alternatively, you can configure your app to use OAuth authentication through a third-party service.

Localization

To localize this template for all supported locales:

Ensure that the app has otherwise been localized in accordance with the recommended localization workflow.
Use the latest version of the @canva/app-components package.

Literal strings added to a SearchableListView component will be localized automatically as long as your app follows the localization workflow and uses the latest version of @canva/app-components.

Next steps

To dive deeper into building and customizing design editor apps, explore the design editor intent documentation.
When your app is ready, you can submit it for review through the Developer Portal. For more information, see Submitting apps.

Generative AI

Create a generative AI app on Canva with a focus on user experience

You can build a generative AI app quickly using Canva's Generative AI template, which is available through the @canva/cli command-line interface (CLI).

The Generative AI template is a starting point for implementing the design editor intent to build an AI app, and helps you get started with setting up a user interface (UI). The template doesn't connect to an AI service, but provides an image generation mock-up UI, which lets you explore the UI without a potentially lengthy AI integration step.

This article shows you how to install the Generative AI template, run it locally, and customize it.

Step 1: Create a new app using the Generative AI template

Install the Canva CLI globally:
shell
```
npm install -g @canva/cli@latest
```
Log in to the Canva CLI. This command opens an access request page in your browser:
<GlobalContent>
shell
```
canva login
```
</GlobalContent>
<ChinaContent>
shell
```
canva login --cn
```
</ChinaContent>
Click Allow to grant the Canva CLI permission to manage your Canva apps.
Use the following command to create a new app using the Generative AI template:
shell
```
canva apps create --template "gen_ai"
```
The setup process guides you through the remaining settings:
1. Choose the audience for your app.
2. Enter a name for your app.
3. Choose whether to initialize a git repository for your project.
4. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

shell

cd example-gen-ai-app
npm start

Replace example-gen-ai-app with your app's name.

Step 2: Preview your app

You can now start the app preview to explore the UI.

In the root directory for your app, start the app preview with the following command:
shell
```
npm start
```
After the app has started, the Development URL (Frontend) and Base URL (Backend) local addresses are shown in the output.
In Your apps, select your app, then Code upload > App source > Development URL.
Under Code upload > App source > Development URL confirm that the the Development URL (Frontend) address matches the address shown in the Development URL field.
Locate the Preview button in the top right of the page, and click it to open a new tab that loads the Canva editor with a preview of your app.
Click Open if prompted. This message only appears when using an app for the first time.

Step 3: Understand the AI user experience

With the Generative AI app running locally, you can explore the overall user experience. The following list explains some of the essential user experience features and components that you can build on:

Word filtering: An obscenity filter provides basic restrictions against potentially offensive or harmful inputs.
Loading states: Since generating AI assets and media can take some time to load, providing placeholders, waiting time messages, and a progress bar communicates the request status to users.
Thumbnails previews: Providing thumbnails means your app gives faster visual feedback, and contributes to reducing load time.
A credit system: The demo credit system allows for users to make some free requests before they need to log in and purchase more credits to continue generating assets.
State management: React Context manages state changes for the example app user experience. For apps that need more complex state management, a more comprehensive library is recommended.
Routing: React Router provides routing and navigation for the example app.

Test out the Generative AI app by entering a prompt, pressing the Generate image button, and observing how the user experience essentials work together.

Step 4: Customize your app

Change the displayed text

This procedure explains how to change the text displayed in the app's FormField component:

Open the src/app.messages.ts file.

Change the contents of AppMessages, adjusting the text strings:

typescript

export const AppMessages = {
  .../* Some lines omitted */
  /** Messages related to prompts and user input validation. */
  promptInspireMe: () => "Try some image inspiration prompts",
  promptTryAnother: () => "Try another",
  promptLabel: () => "Describe the image you want to create",
  promptPlaceholder: () => "Enter at least five words to describe your image.",
  promptMissingErrorMessage: () => "Please describe what you want to create",
  promptNoCreditsRemaining: () => "No credits remaining .",
  promptObscenityErrorMessage: () =>
    "Something you typed may result in content that doesn’t meet our policies.",

At the top of the app panel, click ↻ to reload the app.

Modify the loading state time

This procedure explains how to adjust the timing and loading state set with the app Progress Bar component.

Open the src/components/loading_results.tsx file.

Modify the interval duration values:

typescript

const INTERVAL_DURATION_IN_MS = 500;
const TOTAL_PROGRESS_PERCENTAGE = 100;
const LOADING_THRESHOLD_IN_SECONDS = 1;

At the top of the app panel, click ↻ to reload the app.

Adjust the default inspiration prompts

This procedure explains how to adjust the default set of inspiration prompts:

Open the src/components/prompt_input.tsx file.

Adjust the examplePrompts strings:

typescript

/* Some lines omitted */
const examplePrompts: string[] = [
  "Cats ruling a parallel universe",
  "Futuristic city with friendly robots",
  "Magical forest with unicorns and dragons",
  "Underwater kingdom with colorful fish and mermaids",

Modify the image generation mock-up

The image generation mock-up works by returning the same image set in response to each prompt. This procedure explains how to modify the app's image set. Note that to set up an AI integration and connect to an API, you can modify backend/routers/image.ts as a starting point.

Open the backend/routers/image.ts file.

Modify the imageUrls list values:

typescript

/* Some lines omitted */
// In a real-world scenario, these URLs would point to dynamically generated images.
const imageUrls: ImageResponse[] = 
  {
    fullsize: {
      width: 1280,
      height: 853,
      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_1280.jpg",
    },
    thumbnail: {
      width: 640,
      height: 427,
      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_640.jpg",
    },
  },

Step 5: Connect to a backend

Since the Generative AI app uses an Express server as a sample backend, when moving to production, it's recommended to change the Express server to a higher capacity production backend. See [Using a backend for more information.

Step 6: Add user authentication

To add user authentication, you can use frictionless or OAuth authentication methods:

Frictionless: Add App ID and JWT verification middleware to your app. This approach uses the auth.getCanvaUserToken() method to receive a JWT. For more information, see JSON Web Tokens. For an example, see the authentication example in the canva-apps-sdk-starter-kit repository.
OAuth: Alternatively, you can configure your app to use OAuth authentication through a third-party service.

Next steps

To dive deeper into building and customizing design editor apps, explore the design editor intent documentation.
When your app is ready, you can submit it for review through the Developer Portal. For more information, see Submitting apps.

Digital Asset Management

Retrieve content from a backend and make it available to a Canva app.

You can build a digital asset management (DAM) app that retrieves content from a backend and makes it available to a Canva app.

To help you get started, Canva has created a template DAM app that implements the design editor intent, which you can install and customize.

This article shows you how to install the DAM app template, run it locally on your machine, and start adding customizations.

Step 1: Create a new app using the DAM app template

Install the Canva CLI globally:
shell
```
npm install -g @canva/cli@latest
```
Log in to the Canva CLI. This command opens an access request page in your browser:
<GlobalContent>
shell
```
canva login
```
</GlobalContent>
<ChinaContent>
shell
```
canva login --cn
```
</ChinaContent>
Click Allow to grant the Canva CLI permission to manage your Canva apps.
Use the following command to create a new app using the DAM template:
shell
```
canva apps create --template "dam"
```
The setup process guides you through the remaining settings:
1. Choose the audience for your app.
2. Enter a name for your app.
3. Choose whether to initialize a git repository for your project.
4. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

shell

cd example-dam-app
npm start

Replace example-dam-app with your app's name.

Step 2: Preview your app

Run the app locally to see a preview.

Navigate to your app's directory and start the app. The example-dam-app directory name will vary based on your app's name.
shell
```
cd example-dam-app
npm start
```
After the app starts, the Development URL (Frontend) and Base URL (Backend) local addresses are shown in the output.
In Your apps, select your app, then Code upload > App source > Development URL.
Under Code upload > App source > Development URL confirm that the the Development URL (Frontend) address matches the address shown in the Development URL field.
Locate the Preview button in the top right of the page, and click it to open a new tab that loads the Canva editor, with a preview of your app in the sidebar.
Click Open if prompted. This message only appears when using an app for the first time.

Step 3: Customize the DAM app

The DAM app template should now be running locally. In the preview, you can see tabs called All, Collection, and Assets. This procedure demonstrates how to rename a tab.

<Note> To customize the view, container type, layout, search, and more, see the SearchableListView component. </Note>

In your IDE, open the src/config.ts file and change label: "Folders", to label: "My Folders",

tsx

containerTypes: [
   {
      value: "folder",
      label: "Folders",
      listingSurfaces: [
      { surface: "HOMEPAGE" },
      {
         surface: "CONTAINER",
         parentContainerTypes: ["folder"],
      },
      { surface: "SEARCH" },
      ],
      searchInsideContainer: {
      enabled: true,
      placeholder: "Search for resources inside this folder",
      },
   },
],

Save the changes to config.ts.
Click ↻ to reload the app. The renamed tab should now be visible in the preview.

Step 4: Connect to a backend

To retrieve digital assets, connect the app to your backend. For more information, see Using a backend.

Step 5: Add user authentication

Update your app to add user authentication. You can use frictionless or OAuth authentication:

Frictionless: To implement frictionless authentication, add App ID and JWT verification middleware to your app. This approach uses the auth.getCanvaUserToken() method to receive a JWT. For more information, see JSON Web Tokens. For an example, see the authentication example in the canva-apps-sdk-starter-kit repository.
OAuth: Alternatively, you can configure your app to use OAuth authentication through a third-party service.

Localization

To localize this template for all supported locales:

Ensure that the app has otherwise been localized in accordance with the recommended localization workflow.
Use the latest version of the @canva/app-components package.

The literal strings in the SearchableListView component will be localized automatically as long as your app follows the localization workflow and uses the latest version of @canva/app-components.

Next steps

To dive deeper into building and customizing design editor apps, explore the design editor intent documentation.
When your app is ready, you can submit it for review through the Developer Portal. For more information, see Submitting apps.

Data Connector

Create a data connector app on Canva that imports data from external sources.

You can build a Data Connector app quickly using Canva's Data Connector template, available through the @canva/cli command-line interface (CLI).

The Data Connector template is a starting point for building an app that lets users import data from external sources into Canva. The template provides a working example that demonstrates how to implement the Data Connector intent to authenticate, select a data source, configure queries, and return data in a table format for use in Canva designs.

This article shows you how to install the Data Connector template, run it locally, and customize it for your own data sources.

Step 1: Create a new app using the Data Connector template

Install the Canva CLI globally:
shell
```
npm install -g @canva/cli@latest
```
Log in to the Canva CLI. This command opens an access request page in your browser:
<GlobalContent>
shell
```
canva login
```
</GlobalContent>
<ChinaContent>
shell
```
canva login --cn
```
</ChinaContent>
Click Allow to grant the Canva CLI permission to manage your Canva apps.
Use the following command to create a new app using the Data Connector template:
shell
```
canva apps create --template "data_connector"
```
The setup process guides you through the remaining settings:
1. Choose the audience for your app.
2. Enter a name for your app.
3. Choose whether to initialize a git repository for your project.
4. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

shell

cd example-data-connector-app
npm start

Replace example-data-connector-app with your app's name.

Step 2: Set up authentication

Set up the Canva Connect API authentication as described in the generated README. This ensures your app data source can connect to Canva and function correctly during preview.

Step 3: Preview your app

You can now start the app preview to explore the UI.

In the root directory for your app, start the app preview with the following command:
shell
```
npm start
```
After the app has started, the Development URL (Frontend) and Base URL (Backend) local addresses are shown in the output.
In Your apps, select your app, then Code upload > App source > Development URL.
Under Code upload > App source > Development URL confirm that the Development URL (Frontend) address matches the address shown in the Development URL field.
Locate the Preview button in the top right of the page, and click it to open a new tab that loads the Canva editor with a preview of your app.
Click Open if prompted. This message only appears when using an app for the first time.

Step 4: Understand the Data Connector user experience

With the Data Connector app running locally, you can explore the overall user experience. The template demonstrates:

Data source selection: Users can browse and select from available data sources (for example, designs, brand templates, or your own API).
Configurable queries: Users can apply filters, search criteria, or sort options to refine the data they want to import.
Tabular data import: The app fetches data from the external source and returns it as a table, ready to be used in Canva.
State management: The template uses React Context for state management. For more complex apps, you may consider libraries like Redux or MobX.
Routing: React Router is integrated to manage multiple views or pages, such as list/detail flows for data sources.
App UI Kit: The template uses the App UI Kit for a consistent Canva look and feel. This helps you comply with design guidelines.

Test out the Data Connector app by selecting a data source, configuring your query, and importing data. Observe how the UI guides the user through each step.

Step 5: Customize your app

Change data source labels and configuration

To change the labels, filters, or configuration options for your data sources:

Open the src/api/data_sources/ directory.
Edit or add data source files to define new sources, filters, or display columns.
Update the UI components to reflect your data source options.

Edit data table columns and formatting

To customize the columns and formatting of the imported data table:

Open the relevant data source handler (see src/api/data_source.ts).
Adjust the logic for mapping API responses to data table columns and cell types (string, number, date, boolean, media, and so on).
Use column configs to set column names and types for the table returned to Canva.

Modify authentication and API integration

The template demonstrates OAuth authentication with the Canva Connect API, but you can adapt it for your own API:

Update src/api/oauth.ts to set the correct OAuth scopes and endpoints for your API.
Adjust API calls in your data source handlers to fetch data from your chosen external system.

Handle data size limits and errors

Use the limit parameter in the selection UI and data fetching logic to respect Canva's data size constraints.
Implement error handling for authentication, network, and data issues, returning the appropriate status (completed, app_error, remote_request_failed, or outdated_source_ref).

UI and state management

Update UI components in src/components/ to change the look and feel, add new fields, or improve the user experience.
Use React Context or your preferred state management solution for complex flows.
Add or modify routes using React Router for multi-step or multi-source flows.

Next steps

To dive deeper into building and customizing Data Connector apps, explore the Data Connector intent documentation.
When your app is ready, you can submit it for review through the Developer Portal. For more information, see the guide on submitting apps.

Content Publisher

Create a content publishing app that integrates with external platforms.

You can build a content publishing app quickly using Canva's Content Publisher template, which is available through the @canva/cli command-line interface (CLI).

The Content Publisher template is a starting point for implementing the Content Publisher intent, which enables users to publish Canva designs directly to external platforms like social media, blogs, or newsletters. The template provides a mock publishing flow with settings and preview UIs, allowing you to explore the user experience before integrating with your platform's APIs.

This article shows you how to install the Content Publisher template, run it locally, and customize it.

Step 1: Create a new app using the Content Publisher template

Install the Canva CLI globally:
shell
```
npm install -g @canva/cli@latest
```
Log in to the Canva CLI. This command opens an access request page in your browser:
<GlobalContent>
shell
```
canva login
```
</GlobalContent>
<ChinaContent>
shell
```
canva login --cn
```
</ChinaContent>
Click Allow to grant the Canva CLI permission to manage your Canva apps.
Use the following command to create a new app using the Content Publisher template:
shell
```
canva apps create --template "content_publisher"
```
The setup process guides you through the remaining settings:
1. Choose the audience for your app.
2. Enter a name for your app.
3. Choose whether to initialize a git repository for your project.
4. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

shell

cd example-content-publisher-app
npm start

Replace example-content-publisher-app with your app's name.

Step 2: Preview your app

You can now start the app preview to explore the UI.

In the root directory for your app, start the app preview with the following command:
shell
```
npm start
```
After the app starts, the Development URL (Frontend) local address is shown in the output.
In Your apps, select your app, then Code upload > App source > Development URL.
Under Code upload > App source > Development URL confirm that the Development URL (Frontend) address matches the address shown in the Development URL field.
Locate the Preview button at the top right of the page, and click it to open a new tab that loads the Canva editor.
Click Open if prompted. This message only appears when using an app for the first time.

Step 3: Understand the Content Publisher user experience

With the Content Publisher app running locally, you can explore the publishing flow. The template implements all 4 required functions of the Content Publisher intent:

Settings UI: A form where users configure publishing options, such as entering a caption. The settings UI validates required fields and enables or disables the publish button accordingly.
Preview UI: A mock social media post preview showing how the content will appear after publishing. This helps users visualize their post before committing.
Output type configuration: Defines the "Feed Post" output type with image specifications, including aspect ratio constraints and file format requirements.
Publish handler: A placeholder function that returns a mock success response. In production, this connects to your platform's APIs.

Test the Content Publisher app by entering a caption in the settings panel, observing the preview update, and clicking the publish button to see the mock response.

Step 4: Customize your app

Add additional settings fields

To add more configuration options to the settings UI:

Open the src/intents/content_publisher/types.ts file.

Add new fields to the PublishSettings interface:

typescript

export interface PublishSettings {
  caption: string;
  visibility: "public" | "private";
}

Open the src/intents/content_publisher/settings_ui.tsx file.
Update the initial state and add new form controls for the additional fields.
Update the validatePublishRef function to validate the new fields.

Customize the preview appearance

To modify the preview to match your platform's design:

Open the src/intents/content_publisher/post_preview.tsx file.
Modify the PostPreview component to match your platform's visual style, including colors, layout, and branding elements.
Update the styles/preview_ui.css file to apply custom styles.

Configure output types

To modify the supported publishing formats:

Open the src/intents/content_publisher/index.tsx file.

Modify the getPublishConfiguration function to define your platform's supported formats:

tsx

return {
  status: "completed",
  outputTypes: [
    {
      id: "story",
      displayName: intl.formatMessage({
        defaultMessage: "Story",
        description: "Label for story format",
      }),
      mediaSlots: [
        {
          id: "media",
          displayName: "Media",
          fileCount: { exact: 1 },
          accepts: {
            image: {
              format: "png",
              aspectRatio: { min: 9 / 16, max: 9 / 16 },
            },
          },
        },
      ],
    },
  ],
};

Step 5: Add user authentication

Most publishing platforms require user authentication to post content. You can use OAuth authentication to connect user accounts:

Configure OAuth settings in the Developer Portal for your app.
Implement the OAuth flow to obtain access tokens for your platform.
Store tokens securely and use them when making API calls in the publishContent function.

For more information, see Authenticating users.

Step 6: Implement platform integration

To complete your content publishing app, replace the placeholder implementation with actual API calls:

Open the src/intents/content_publisher/index.tsx file.

In the publishContent function, add your platform's API integration:

tsx

async function publishContent(
  request: PublishContentRequest,
): Promise<PublishContentResponse> {
  // Parse the settings from publishRef
  const settings = JSON.parse(request.publishRef);

  // Upload media to your platform
  // const uploadedMedia = await uploadToYourPlatform(request.outputMedia);

  // Create the post on your platform
  // const post = await createPost({
  //   media: uploadedMedia,
  //   caption: settings.caption,
  // });

  return {
    status: "completed",
    externalId: "your-platform-post-id",
    externalUrl: "https://your-platform.com/post/123",
  };
}

Update the preview UI in src/intents/content_publisher/preview_ui.tsx to fetch and display the authenticated user's profile information.

Next steps

To dive deeper into building content publishing apps, explore the Content Publisher intent documentation.
Review the Content Publisher design guidelines to ensure your app provides a great user experience.
When your app is ready, you can submit it for review through the Developer Portal. For more information, see the guide on submitting apps.

Multiple Listing Service

Learn how to build an app that integrates MLS data into Canva

The MLS reference app is a starting point for building an app that lets users browse real estate listings and add the listing information and assets to their designs. It demonstrates how to display a searchable list of properties and handle drag-and-drop interactions.

This article shows you how to set up the MLS reference app, run it locally, and start building your own app.

Step 1: Create the app

Install the Canva CLI globally:
shell
```
npm install -g @canva/cli@latest
```
Log in to the Canva CLI. This command opens an access request page in your browser:
<GlobalContent>
shell
```
canva login
```
</GlobalContent>
<ChinaContent>
shell
```
canva login --cn
```
</ChinaContent>
Click Allow to grant the Canva CLI permission to manage your Canva apps.
Use the following command to create a new app using the MLS reference app:
shell
```
canva apps create --template="mls"
```
The setup process guides you through the remaining settings:
1. Choose any optional configs you want to add to your project.
2. Choose the audience for your app.
3. Enter a name for your app.
4. Choose whether to initialize a git repository for your project.
5. Choose whether your project should use npm to install its dependencies.

After the setup process has completed, the output lists the steps for running the new app. For example:

shell

cd mls-app-solution
npm start

Replace mls-app-solution with your app's name.

Step 2: Preview your app

Run the app locally to see a preview.

In your app's root directory, start the app.
shell
```
cd mls-app-solution
npm start
```
After the app starts, the output shows a direct link to preview the app.
Click the link in the terminal to open the app in the Canva editor.
Click Open if prompted. This message only appears when using an app for the first time.

The app should now be running locally. In the preview, choose a property listing and drag the images or text to your design.

Step 3: Connect to real MLS data

The reference app uses dummy data by default. To build a production app, you need to connect to your MLS provider's data.

Most MLS providers require authentication and shouldn't be accessed directly from the frontend to avoid exposing your API keys. You should set up a backend to proxy requests to the MLS provider.

Set up a backend: Use the backend guide or your own backend infrastructure.
Fetch data: Open src/adapter.ts. This file contains the logic for fetching listings and agents.

Replace the mock data implementation in fetchListings with a call to your backend.

// src/adapter.ts

export const fetchListings = async (
  office?: Office | null,
  query?: string,
  propertyType?: string | null,
  sortBy?: string | null,
  continuation?: string,
): Promise<{ listings: Property[]; continuation?: string }> => {
  const params = new URLSearchParams({ query: query ?? "" });
  // Replace with your backend endpoint
  const response = await fetch(
    `https://api.example.com/listings?${params}`
  );
  return await response.json();
};

For more information on backend integration, see Using a backend.

Next steps

Explore the App UI Kit to add more components to your app.
Learn about Drag and Drop to improve how users interact with listings.
Submit your app to the Canva Apps Marketplace.

App Templates ​

Overview ​

Hello World ​

Step 1: Create a new app using the Hello World template ​

Step 2: Preview your app ​

Step 3. Customize your app ​

Step 4. Connect to a backend ​

Step 5. Add user authentication ​

Localization ​

Next steps ​

Generative AI ​

Step 1: Create a new app using the Generative AI template ​

Step 2: Preview your app ​

Step 3: Understand the AI user experience ​

Step 4: Customize your app ​

Change the displayed text ​

Modify the loading state time ​

Adjust the default inspiration prompts ​

Modify the image generation mock-up ​

Step 5: Connect to a backend ​

Step 6: Add user authentication ​

Next steps ​

Digital Asset Management ​

Step 1: Create a new app using the DAM app template ​

Step 2: Preview your app ​

Step 3: Customize the DAM app ​

Step 4: Connect to a backend ​

Step 5: Add user authentication ​

Localization ​

Next steps ​

Data Connector ​

Step 1: Create a new app using the Data Connector template ​

Step 2: Set up authentication ​

Step 3: Preview your app ​

Step 4: Understand the Data Connector user experience ​

Step 5: Customize your app ​

Change data source labels and configuration ​

Edit data table columns and formatting ​

Modify authentication and API integration ​

Handle data size limits and errors ​

UI and state management ​

Next steps ​

Content Publisher ​

Step 1: Create a new app using the Content Publisher template ​

Step 2: Preview your app ​

Step 3: Understand the Content Publisher user experience ​

Step 4: Customize your app ​

Add additional settings fields ​

Customize the preview appearance ​

Configure output types ​

Step 5: Add user authentication ​

Step 6: Implement platform integration ​

Next steps ​

Multiple Listing Service ​

Step 1: Create the app ​

Step 2: Preview your app ​

Step 3: Connect to real MLS data ​

Next steps ​

App Templates

Overview

Hello World

Step 1: Create a new app using the Hello World template

Step 2: Preview your app

Step 3. Customize your app

Step 4. Connect to a backend

Step 5. Add user authentication

Localization

Next steps

Generative AI

Step 1: Create a new app using the Generative AI template

Step 2: Preview your app

Step 3: Understand the AI user experience

Step 4: Customize your app

Change the displayed text

Modify the loading state time

Adjust the default inspiration prompts

Modify the image generation mock-up

Step 5: Connect to a backend

Step 6: Add user authentication

Next steps

Digital Asset Management

Step 1: Create a new app using the DAM app template

Step 2: Preview your app

Step 3: Customize the DAM app

Step 4: Connect to a backend

Step 5: Add user authentication

Localization

Next steps

Data Connector

Step 1: Create a new app using the Data Connector template

Step 2: Set up authentication

Step 3: Preview your app

Step 4: Understand the Data Connector user experience

Step 5: Customize your app

Change data source labels and configuration

Edit data table columns and formatting

Modify authentication and API integration

Handle data size limits and errors

UI and state management

Next steps

Content Publisher

Step 1: Create a new app using the Content Publisher template

Step 2: Preview your app

Step 3: Understand the Content Publisher user experience

Step 4: Customize your app

Add additional settings fields

Customize the preview appearance

Configure output types

Step 5: Add user authentication

Step 6: Implement platform integration

Next steps

Multiple Listing Service

Step 1: Create the app

Step 2: Preview your app

Step 3: Connect to real MLS data

Next steps