DEV Community: Canva Developers

Streamlining Real Estate content creation

Meredith Hassett — Tue, 06 May 2025 14:42:51 +0000

In today’s fast-moving real estate market, marketing is constant, high-volume, and essential. Every property—past, present, and future—needs its own set of branded assets: flyers, brochures, social posts, signage, and more. Canva has become a go-to tool for agents, brokers, and marketing teams to create these assets quickly and beautifully.

If you’re in the real estate tech space, building a Canva App can offer a serious competitive advantage, with teams at eXp, Cloze, and Ray White already seeing huge benefits for their teams. Whether you're managing a brokerage platform, CRM, or listing syndication service, integrating directly with Canva lets your users seamlessly access listing assets inside the Canva editor—boosting productivity and brand consistency.

Here’s why and how to do it.

Why Real Estate Professionals Use Canva (And Why You Should Integrate With It)

Real estate teams rely on Canva for:

High-frequency marketing: Each listing needs multiple creative assets.
Design flexibility: Templates, branding kits, and team collaboration tools.
Device flexibility: Mobile-first agents and desktop-based marketers both benefit.

Many companies—large and small—have already built public or private Canva apps to streamline real estate marketing workflows. These apps connect property databases, image libraries, and listing metadata directly into Canva. The result? Less time copy/pasting, more time selling.

Common Use Case: You Need an App That...

Most teams end up needing an integration that:

Pulls listing data (photos, text, metadata) from their system
Supports listings across all statuses (live, pending, sold, etc.)
Organizes content in a structured, browsable format
Works well on both mobile and desktop
Allows users to drag images and text into designs
Optionally, exports finished designs back to their source system

We know many teams end up printing their designs. At the time of publication of this guide, exporting as Print Quality PDF isn't currently supported using the API. If your team needs to print these created resources, it would be best to manually download instead of programatic API export.

Let’s walk through the architecture and some practical implementation tips.

Step 1: Connect to Your Source System

While many Canva apps avoid a login-first flow, real estate integrations are an exception. Users need access to their own listings, which usually requires authentication. Many real estate companies also choose to make their Apps team restricted. Since these apps are specific to the team, the advertising in the Apps Marketplace may not be necessary. For the team restricted real estate app to work best, make sure the organization is all in one Canva Team or Enterprise account.

We recommend using OAuth 2.0 for secure, token-based auth. We’ve created functions to help manage access and token refresh. Remember to register your app on your 3rd party service.

When building out the Auth flow, we know most development teams build it once and then never touch it again. To make it easier to build our auth, we have created auth patterns and samples to simply the UX and token exchange. Check out our sample auth flow on GitHub.

To get started with Auth, simply import the auth resource from the Canva User API:

import { auth } from "@canva/user”

Step 2: Your backend code for your Canva app

When building Canva apps, Canva hosts the frontend/UI of the app in the editor, so any backend services you need will have to be self hosted. You can use any cloud provider or hosting service. Canva frontends use browser fetch to communicate with their backends, so just make sure your backend architecture supports fetch calls.

Many teams handle OAuth in the backend. This adds an additional layer of security, as the browser can always be inspected to find keys or tokens. We have found most teams backends typically consists of an authorization layer, that connects the frontend to the MLS datasource.

After gaining authorization to the MLS datasource, your app will need to pull in the actually listing data. Some data manipulation may also be needed, as listing information can come in different formatting. Also consider any potential sorting, filtering, or paging you may want to do.

Step 3: Organize Listing Resources

Once your user have access to your listing data, it’s time to access those resources in an organized way. Keep in mind real estate assets work best when visually and contextually grouped. One common pattern we see among our real estate apps is organizing listings this way:

Tabs = Listing status
- Active, Pending, In Escrow, Sold, For Rent, Rented, etc
Top-level folders = Properties
Inside folders = Photos and Text Content

We’ve created a pattern called SearchableListView that supports this general structure. SearchableListView lets you to define a layout, which it would be best to use List or Full Width for the real estate listing use case. This makes sure that properties are quickly browsable by agents. It’s supports a tabbed structure to quickly layout the top filter your team may use. To enable tabs, use the containerTypes config, and specify an array similar to below. See all the configs in the documentation.

[
  {
    "value": "collection",
    "label": "Collections",
    "listingSurfaces": ...
  },
  {
    "value": "section",
    "label": "Sections",
    "listingSurfaces": ...
  },
  {
    "value": "folder",
    "label": "Folders",
    "listingSurfaces": ...,
    "icon": "folder"
  }
]

You can also provide filtering and sorting options, which are fully customizable to match your teams need.

When laying out properties, we would recommend keeping a folder like experience with an optional hero image and clear text for the property, most likely it’s address. You can use components like our image cards or horizontal cards. Make sure to use the rows layout component to keep the look and feel clean.

Step 4: Keep the metadata clean

Each property will have both text and image assets. Your user’s properties may also have videos. When an agent clicks into a singular listing, they will need to be able to locate assets quickly and efficiently. Organizing them by type, text or image, the agents will be able to quickly get to the metadata they need.

When building out the individual listing pages, you can also use tabs to make it easy to switch between the types of assets. Tabs are also flexible, so if you need an optional 3rd tab for videos on some listings, it’s easy to include more in the list.

For the assets within the tabs, your users may be on desktop or mobile, so make sure to support both drag and click actions. To support both onDragStart and onClick functions, we’ve created some helpful components:

For the image layout, image cards can be used in a masonry layout. Masonry is the best way to optimize screen layout utilization and is responsive to screen and editor size. There’s a great example of the masonry component in our GitHub sample code library.

<ImageCard
  onClick={() => {}}
  onDragStart={() => {}}
  thumbnailUrl=”ADD YOUR URL HERE”
/>

  <TypographyCard
    onClick={() => {}}
    onDragStart={() => {}}
  >
    <Text> ADD YOUR TEXT HERE </Text>
  </TypographyCard>

Step 5: Exporting Designs Back to Your System (if needed)

Want to close the loop? You can include an export capability so that users can save their finished Canva designs (e.g., brochures or social posts) back to your platform or listing CMS. The Canva design API lets you to request design exports as common file types like PNG, PDF, video, and PPTX. Once an export is complete, you will receive an export blob. Make sure your source system can accept the exported blob. As a reminder, this API at time of publishing this guide doesn't support exporting as print quality PDF, so if these resources will be printed, it is best to manually export.

To get started with exporting, import the requestExport resource from the design API.

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

There’s sample code available on GitHub.

Templates and Sample Code

Much of this logic is already encapsulated in our Digital Assets Management template and accessible in the Canva CLI. You’ll find:

Auth flow examples
Container and card layouts
Tabbed views and filters
Drag-and-drop image and text components

Try out using the DAM template to help you get started. You can quickly spin up the DAM example directly from your command line tool of choice. Make sure you have node and npm installed and run this command to install our CLI.

npm install -g @canva/cli@latest

Once the CLI is installed, you can run the create command to generate all the code needed for the DAM template.

canva apps create --template "dam"

And as always you can find more sample code in our GitHub repo. Each new API we release always comes accompanied by sample code, as well as some of our more complex UI patterns.

Closing out

For real estate tech platforms, Canva integration isn’t just a nice-to-have—it’s a productivity unlock for agents and teams under constant marketing pressure. By meeting your users where they already work (Canva), and feeding them the assets they already own (listings), you reduce friction and boost results.

Ready to build your Canva app? Talk with your team about their requirements first. And then explore all the tools we have like the CLI and templates, and use this guide to structure your integration with some of Canva’s best practices.

Introducing the Canva Dev MCP Server

Meredith Hassett — Wed, 16 Apr 2025 00:00:00 +0000

AI coding assistants can significantly boost developer velocity but can struggle when they lack platform-specific knowledge. For example, Canva developers face the frustration of having to repeatedly teach AI assistants about Canva's unique components, patterns, and best practices in every new session.

To help solve this, we're excited to introduce the Canva Dev MCP Server: a tool designed to transform your AI assistants from generic coding helpers into Canva development experts.

What is the Canva Dev MCP Server?

Let's first define the Model Context Protocol (MCP):

MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.

— Model Context Protocol Documentation

Building on this foundation, the Canva Dev MCP Server provides comprehensive, real-time Canva development context and tools to LLMs to help you build on Canva faster.

What can you do with the Canva Dev MCP Server?

Let's dive straight into some demos, to give you a glimpse of what you can do with the Canva Dev MCP.

1. Generate Canva apps

With a single prompt, the MCP Server can create a fully structured app that follows established best practices, by invoking the Canva CLI app generator. Then, once your app is created, it can help you add new features using various methods from the Apps SDK.

Video demo of generating Canva Apps with prompts in VS Code

2. Adopt the App UI Kit

Migrate your existing UI to the App UI Kit components, to ensure consistency in both functionality and aesthetics across your app.

Video demo of applying the Canva UI Kit to your app in VS Code

3. Localize your app

Integrate your app with our App I18n Kit, to rewrite your UI to be localizable with clear translator notes.

Video demo of updating your app to include i18n strings

4. Comply with Canva's design guidelines

Run our Design Review tool to ensure your app UI adheres to Canva's standards. The MCP Server can generate a report with must/should/could recommendations based on Canva's design guidelines, and even give suggestions on improvements to your code.

Video demo of doing a quick app review before submitting

5. Integrate with AI chat assistants

The MCP Server can also be integrated with AI chat assistants like Claude, where you can chat about the Canva Apps SDK or Connect APIs.
Your favorite chat assistant can now also be your personal Canva development expert!

Video demo of chatting with Claude to to deep dive into Canva Dev documentation

6. Integrate with Canva via the Connect API

Last but not least, you can build integrations with Canva via the Connect API, by generating Canva Connect API client code to create new designs or upload assets.

Video demo of using Claude to write code for a Canva Integration

There are many more use cases to explore, so we're excited to see what you'll build!

Next steps and future plans

We're just getting started with AI-assisted app development. Expect ongoing enhancements and new capabilities based on your invaluable feedback via our community forum.

Check out the setup guide now to unlock the full power of AI-assisted development for Canva Apps and Integrations.

Happy hacking!

Apply Canva Brand Templates with the Autofill API

Meredith Hassett — Wed, 09 Oct 2024 00:00:01 +0000

Protecting brand integrity means sometimes defending a brand fiercely, and always applying the brand design consistently. If your project or web app can’t provide your customers a consistent way to find and apply brand templates, you risk spending time catching up on repeated request for a brand template feature. Canva Connect API provides the solution, giving your customers consistency in how they:

Access and apply Canva Brand Templates.
Automatically fill out new designs from templates.

This guide shows you how to build an example integration using the Brand template and Autofill APIs to access Canva Brand Templates and apply them consistently to a design. These APIs let your web app apply a Canva Brand Template to a Canva design entirely within your integration. Your customers won’t need to use the Canva editor to edit their design manually.

You can try out the APIs right now:

From the docs page (be aware this sends API requests to your Canva account's live data).
Using the Canva Connect API Starter Kit, which provides a working e-commerce web app showcasing the API's features.

When you're ready to use the Autofill API for your own applications, see the Autofill guide. It explains how to create a Canva Brand Template and apply it to a new design automatically.

Before you begin

Before applying a brand template, you need:

A Canva account: With multi-factor authentication enabled.
An integration in your account: To connect your application to Canva, prepare for authorization, and configure API scopes.
Autofill API access: When you've created your integration, register for access (under Scopes > Data autofill APIs, click the Register for access button).
A Canva Brand Template: To create one, you need a Canva Teams account. A free trial is available.
An access token: To create a token:
1. Create an authorization URL to get an authorization code.
2. Generate an access token using a request to the Authentication API.
Tools:
- Text editor
- Command-line shell with the Node.js CLI (version 18 or higher) installed.

When you have your access token ready, you can use it to test out the Brand template and Autofill APIs.

Access tokens have a limited lifespan. When your current token expires, use the refresh token to request a new access token.

Configure API scopes

Scopes let you specify what actions your integration can perform on behalf of the end user. To grant Brand template and Autofill APIs access to your integration, set the following scope permissions under the Scopes tab:

design:content:write
design:content:read
brandtemplate:content:read
brandtemplate:meta:read.

Step 1. Collect and view brand templates

The example in the following steps uses JavaScript and the node command to make an API call, collect your Canva Brand Templates, and display the response returned by the Canva API in the console. The logged output can give you an idea of what parameters you can parse and display when building your integration.

To collect your Canva Brand Template and view the API response:

Create a new JavaScript file named brandTemplate.js and add the following.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/brand-templates?dataset=non_empty", {
           method: "GET",
           headers: {
              "Authorization": "Bearer <Add your Access Token Here>",
           },
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(data);
           })
           .catch(err => console.error(err));
       }

Use the dataset=non_empty query parameter to filter and return only Canva Brand Templates that have a dataset.

Run the following node command to make your API request.

   node -e 'require("./brandTemplate.js").init()'

The API response returns a list of available Canva Brand Templates, as well as other important response parameters, as shown in the following example.

   {
     continuation: '<token-value>',
     items: [
       {
         id: '<id-value>',
         title: 'Limited Presentation',
         view_url: 'https://www.canva.com/design/<id-value>/view',
         create_url: 'https://www.canva.com/design/<id-value>/remix',
         thumbnail: [Object],
         created_at: 1701760702,
         updated_at: 1715904777
       },

If customers have more Canva Brand Templates than the response's pagination parameters can handle, the response returns a continuation token. Use this token in your integration as a query parameter to request the next set of results.

The Brand Template API returns the Canva Brand Template ID, which you need to apply templates consistently. The next step uses this ID to retrieve the information you need about each template so you can apply it to a design.

Step 2. Collect a brand template dataset

To collect information about a specific brand template, including the dataset for applying the template to a design:

Create a new JavaScript file named getBrandTemplate.js and add the following code.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/brand-templates/<add your Canva Brand Template ID here>/dataset", {
           method: "GET",
           headers: {
             "Authorization": "Bearer <Add your access token here>",
           },
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(data);
           })
           .catch(err => console.error(err));
       }

Run the following node command to make the API request.

   node -e 'require("./getBrandTemplate.js").init()'

A successful response returns the requested Canva Brand Template's dataset, including the data fields you can change when creating a new design from the template.

If you receive the following error when testing your web application, check your integration has the correct permissions to access the brand template.

   {
     code: 'permission_denied',
     message: 'Not allowed to get brand template with ID <ID-value>'
   }

Step 3. Apply the brand template using the Autofill API

To apply the brand template using the Autofill API:

Create a new file called autofillBrand.js and add the following code.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/autofills", {
           method: "POST",
           headers: {
             "Authorization": "Bearer <Add your Access Token Here>",
             "Content-Type": "application/json"
           },
           body: JSON.stringify({
               "brand_template_id": "<Add your Canva Brand Template ID here>",
               "title": "string",
               "data": {
                 "title": {
                   "type": "text",
                   "text": "Brand template autofill completed"
                 }
               }
             }),
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(data);
           })
           .catch(err => console.error(err));
       }

This request initiates an asynchronous design autofill job based on the included Canva Brand Template data and ID. If successful, it creates a new design based on the template.

Run the following node command to send the POST request and check for a response.

   node -e 'require("./autofillBrand.js").init()'

   {
     "job": {
       "id": "<design autofill job id value>",
       "status": "in_progress"
     }
   }

A successful response means the design autofill job has started and is in progress, as indicated by the status. In the next step, use the Autofill job ID (job.id) to check on the status of the new design.

Troubleshoot the asset ID

   {
    "code": "invalid_field",
     "message": "'asset_id' must not be null."
   }

If the response returns this error, your Canva Brand Template has an image data field, so you must supply a Canva asset ID in the Autofill API body section. You can use the Assets Canva API endpoint to provide customers with the ability to upload their image assets. The Assets API can help you access and use uploaded media asset IDs when automatically filling designs from Canva Brand Templates.

Step 4. Query autofill job status

To check if a new design is successfully created from a Canva Brand Template, you can query the autofill job's status:

Create a new file named queryAutofill.js and add the following code.

   module.exports.init = function () {
       fetch("https://api.canva.com/rest/v1/autofills/<Add your autofill job id value here>", {
           method: "GET",
           headers: {
             "Authorization": "Bearer <Add your Access Token Here>",
           },
         })
           .then(async (response) => {
             const data = await response.json();
             console.log(util.inspect(data, { depth: null }));
           }) //util.inspect makes sure the console.log displays the response object in full.
           .catch(err => console.error(err));
       }

Run the following node command to query the autofill job.

   node -e 'require("./queryAutofill.js").init()'

Poll autofill job status

Polling the autofill job often, and parsing the response, provides useful information for your web app's user experience.

While the autofill job is running, the Get design autofill job API returns the following response.

{
  "job": {
    "id": "<autofill design job id>",
    "status": "in_progress"
  }
}

While the status is in_progress, you can provide customers with a loading state, then display a new message when the status changes to success. The following side-by-side example shows the queryAutofill.js response alongside a response from the same GET request directly on the Autofill API docs page.

The successful response includes a link to view the design, which is the view_url. You can display this link in your integration to show users how the design looks.

Apply Canva Brand Templates for consistent designs

Using the Autofill API in your integration helps your customers apply their Canva Brand Templates consistently. They can view exactly what aspects of a design they're able to modify, and know the design follows their branding.

Remember, you can try out the Canva APIs in the Connect API documentation anytime, and the Connect API Starter Kit is available for a complete demonstration of what you can build.