# How to Integrate Retool with Canva

- Tool: Retool
- Difficulty: Beginner
- Time required: 20 minutes
- Last updated: April 2026

## TL;DR

Connect Retool to Canva using Canva's Connect API as a REST API Resource. Configure your Canva API credentials in Retool's Resources tab, then build asset management dashboards that browse brand assets, pull design templates, and embed Canva-created visuals directly into your internal tools. This design-bridge approach gives teams centralized access to brand assets without leaving Retool.

## Build a Centralized Brand Asset Dashboard with Canva and Retool

Marketing teams, operations managers, and creative directors often need quick access to approved brand assets — logos, banners, templates, and campaign visuals — without opening Canva and navigating folder structures each time. By connecting Retool to Canva's Connect API, you can build an internal asset library that surfaces all your team's Canva designs in a searchable, filterable table with thumbnail previews and direct export links.

Canva's Connect API provides programmatic access to designs, assets, folders, and brand templates. You can list designs by type, filter by tag or folder, retrieve export URLs for specific formats (PNG, PDF, MP4), and check which team members have access to which assets. In Retool, these queries populate Table components showing asset names, thumbnails, last-modified dates, and owner information — giving managers a complete view of the brand asset library.

The primary use case for this integration is asset governance: ensuring that team members across marketing, sales, and product use the correct, up-to-date brand assets rather than outdated versions saved locally. A Retool dashboard built on Canva's API can show all approved assets, flag stale designs, display usage metadata, and provide direct links to the canonical Canva source — all without requiring every stakeholder to have a Canva license or understand Canva's folder structure.

## Before you start

- A Canva account with Team plan or higher (Connect API requires Team or Enterprise)
- A Canva Connect API application created at developers.canva.com with a Client ID and Client Secret
- A Retool account (Cloud or self-hosted) with permission to create Resources
- Basic familiarity with REST APIs and OAuth 2.0 flows
- Understanding of which Canva folders and designs you want to surface in Retool

## Step-by-step guide

### 1. Create a Canva Connect API application

Before configuring Retool, you need a Canva Connect API application with the correct scopes. Navigate to developers.canva.com and sign in with your Canva account. Click 'Create an integration' and fill in your application name (e.g., 'Retool Asset Dashboard') and a brief description. Under 'Redirect URLs', add your Retool OAuth callback URL — for Retool Cloud this is https://oauth.retool.com/oauth/user/oauthcallback; for self-hosted instances use your BASE_DOMAIN plus /oauth/user/oauthcallback.

Next, configure the OAuth scopes your integration requires. For an asset management dashboard, select: design:content:read (read design metadata and thumbnails), asset:read (access uploaded assets), folder:read (browse folder structure), and profile:read (read user and team information). Avoid requesting write scopes unless your Retool app will need to create or modify designs.

After saving the application, Canva displays your Client ID and Client Secret. Copy both values — you'll need them when configuring the Retool Resource. Note that Canva's Connect API uses OAuth 2.0 with PKCE for user-delegated access, meaning each Retool user authenticates with their own Canva credentials. This is important for access control: users only see the Canva assets they're personally authorized to view.

**Expected result:** You have a Canva Connect API application with a Client ID, Client Secret, and the correct read scopes configured. The redirect URL is set to your Retool OAuth callback.

### 2. Configure the Canva REST API Resource in Retool

In Retool, navigate to the Resources tab in the left sidebar (or from the home screen, click Resources in the top navigation). Click 'Create a resource' and select 'REST API' from the resource type list. Give the resource a clear name such as 'Canva API'.

Set the base URL to https://api.canva.com/rest/v1. This is Canva's Connect API base URL — all query paths will be relative to this URL, so individual queries can use paths like /designs, /folders, or /assets without repeating the full URL.

For authentication, select 'OAuth 2.0' from the authentication dropdown. Enter your Canva application's Client ID and Client Secret. Set the Authorization URL to https://www.canva.com/api/oauth/authorize and the Token URL to https://api.canva.com/rest/v1/oauth/token. In the Scope field, enter the scopes you configured in the Canva developer portal, space-separated: design:content:read asset:read folder:read profile:read.

Under 'OAuth 2.0 advanced settings', ensure the grant type is set to 'Authorization Code' and enable PKCE. This is required by Canva's OAuth implementation. Leave the callback URL as the auto-populated Retool value.

Save the resource. Retool will prompt you to authorize — click 'Connect' and complete the Canva OAuth flow in the popup window. After authorizing, Retool stores your access and refresh tokens securely. The resource status indicator should turn green, confirming a successful connection.

**Expected result:** The Canva API resource appears in your Retool Resources list with a green 'Connected' status. You can proceed to build queries against this resource.

### 3. Build a query to list Canva designs

Open a new or existing Retool app and create a new query. In the query editor, select your 'Canva API' resource. Set the HTTP method to GET and the URL path to /designs. This endpoint returns a paginated list of designs the authenticated user has access to.

Canva's /designs endpoint supports several query parameters for filtering. In the URL Parameters section of the query editor, add the following key-value pairs: query (maps to {{ searchInput.value || '' }} to enable keyword search from a TextInput component), type (maps to {{ typeSelect.value || 'all' }} for filtering by design type), page_size (set to 50 for initial testing), and continuation (maps to {{ paginationState.value || '' }} for paginating through results).

Enable 'Run query automatically' so the query fires when the app loads and when filter values change. Set 'Debounce' to 300ms on the search input to avoid excessive API calls while the user types.

After saving and running the query, inspect the response in the query editor's preview pane. Canva returns a JSON object with an 'items' array containing design objects. Each object includes id, name, thumbnail (with url), created_at, updated_at, owner details, and urls for accessing/editing the design. Note the structure — you'll reference specific fields when binding data to components.

```
// JavaScript transformer to reshape Canva design list response
const rawData = data; // raw response from listDesigns query

if (!rawData || !rawData.items) return [];

return rawData.items.map(design => ({
  id: design.id,
  name: design.title || 'Untitled Design',
  type: design.design_type?.name || 'Unknown',
  thumbnail: design.thumbnail?.url || '',
  owner: design.owner?.display_name || 'Unknown',
  lastModified: new Date(design.updated_at * 1000).toLocaleDateString('en-US', {
    year: 'numeric', month: 'short', day: 'numeric'
  }),
  createdAt: new Date(design.created_at * 1000).toLocaleDateString('en-US', {
    year: 'numeric', month: 'short', day: 'numeric'
  }),
  editUrl: design.urls?.edit_url || '',
  viewUrl: design.urls?.view_url || ''
}));
```

**Expected result:** The query returns a list of Canva designs and the transformer reshapes the response into a flat array of objects with display-ready fields. The query preview shows design names, thumbnails, and owner data.

### 4. Build the asset library table and preview components

With the query returning data, build the Retool UI. From the component panel on the left, drag a Table component onto the canvas. In the Table's data property (in the right-hand Inspector panel), enter {{ listDesigns_transformed.value }} to bind it to the transformer output.

Configure the Table columns: name (type: text), type (type: tag — use the design type as tag text), owner (type: text), lastModified (type: date), and two action columns. For the action columns, add a 'View in Canva' button that opens {{ currentRow.viewUrl }} and an 'Edit in Canva' button that opens {{ currentRow.editUrl }} — both with 'Open in new tab' behavior.

To add thumbnail previews, drag an Image component to the right side of the canvas. In its 'Image source' property, set {{ designsTable.selectedRow?.thumbnail }}. This displays the thumbnail of whatever row the user clicks in the table. Add a Text component above the Image showing {{ designsTable.selectedRow?.name || 'Select a design to preview' }}.

Above the table, add a TextInput component (name it searchInput) with placeholder text 'Search designs...' and a Select component (name it typeSelect) with options for design types. Connect both to the query parameters you configured in the previous step — the query will re-run automatically when input values change, filtering the displayed results in real time.

**Expected result:** The Retool app displays a filterable table of Canva designs with thumbnails, owner information, and direct links to view or edit each design in Canva. Clicking a row updates the preview image.

### 5. Add folder browsing and asset download queries

For more advanced asset management, add a folder browser that lets users navigate Canva's folder structure. Create a second query targeting the /folders endpoint with GET method. In URL Parameters, add owned (set to true to show only folders the user owns), and continuation for pagination.

Create a Select component at the top of the app labeled 'Browse Folder' and populate its options with {{ listFolders.data.items?.map(f => ({ label: f.name, value: f.id })) || [] }}. Add a third query that fetches designs within a selected folder: set the URL path to /folders/{{ folderSelect.value }}/designs and trigger it on folderSelect change events.

For asset export functionality, create a fourth query that generates export links for a specific design. Set the URL path to /designs/{{ designsTable.selectedRow?.id }}/export-links, method to POST, and body to JSON with the format type. Add a 'Get Export Link' button connected to this query's trigger, and use an On Success event handler to open the returned export URL in a new tab.

For teams that need to embed Canva visuals directly into other internal tools, the export URL from this query can be stored in a separate database Resource (e.g., a PostgreSQL table tracking approved assets), creating a permanent record of the canonical asset URL alongside metadata like usage context and approval status. For complex multi-resource workflows combining Canva with your company's asset database and approval workflows, RapidDev's team can help architect the full solution.

```
// Query body for generating a Canva design export link
// POST /designs/{{ designsTable.selectedRow.id }}/export-links
{
  "format": {
    "type": "{{ exportFormatSelect.value || 'png' }}"
  }
}
```

**Expected result:** The app now supports folder browsing, asset filtering by folder, and export link generation. Users can navigate the full Canva asset hierarchy and download approved designs in their preferred format.

## Best practices

- Use 'Share OAuth 2.0 credentials between users' in the Resource settings for shared brand asset access, but only after confirming the admin user has access to all relevant Canva folders and designs
- Store export URLs in a Retool Database or PostgreSQL resource after generating them — Canva's pre-signed URLs expire, so persist the asset URL alongside metadata if you need long-term references
- Filter designs by type at the query level using Canva's 'type' parameter rather than loading all designs and filtering client-side — this reduces API calls and improves dashboard load time for large libraries
- Use configuration variables (Settings → Configuration Variables) to store your Canva Client ID and Client Secret rather than hardcoding them in Resource settings
- Add a 'last synced' Text component showing {{ new Date(listDesigns.updatedAt).toLocaleString() }} so users know when the asset library was last refreshed
- Limit the OAuth scopes to only what your dashboard needs — if users only browse assets, request only read scopes and never write scopes, following the principle of least privilege
- For large teams, consider building a caching layer by saving Canva design metadata to a Retool Database table on a scheduled Workflow, then serving the dashboard from the cached data rather than live Canva API calls

## Use cases

### Brand asset library for marketing ops

Build a searchable dashboard that lists all Canva designs organized by type (logos, banners, social templates, presentations). Marketing ops teams can filter by campaign, download assets in the required format, and see which designs were recently updated — all from a single Retool interface.

Prompt example:

```
Build a Retool app with a Table component showing Canva designs with columns for name, type, thumbnail URL, last modified date, and owner. Add a Select input to filter by design type and a TextInput to search by name. Include an Image component that previews the selected row's thumbnail.
```

### Template distribution panel for sales teams

Sales teams often need approved presentation templates and one-pagers quickly. A Retool panel can display all approved Canva templates with direct export links, allowing reps to grab the latest versions without needing to navigate Canva or request access from design.

Prompt example:

```
Build a Retool dashboard showing all Canva brand templates with a preview image, template name, last updated date, and a button that opens the Canva export URL in a new tab. Add filters for template category (pitch deck, one-pager, case study) and a search input.
```

### Design asset audit tool

Track which Canva assets haven't been updated in over 90 days and flag them for review. A Retool audit panel can query all designs, apply a JavaScript transformer to calculate asset age, highlight stale assets in red, and display ownership information so brand managers know who to contact for updates.

Prompt example:

```
Build a Retool app that queries all Canva designs, uses a transformer to calculate days since last edit, and shows a Table with conditional row styling (red for assets older than 90 days, yellow for 30-90 days, green for under 30 days). Include owner email and a 'Flag for Review' button that updates a tracking spreadsheet.
```

## Troubleshooting

### OAuth authorization popup closes but Retool still shows 'Not authenticated' for the Canva resource

Cause: The Canva OAuth flow completed but the redirect URL doesn't match exactly, or the Canva application's redirect URL configuration has a trailing slash mismatch.

Solution: In your Canva developer application settings at developers.canva.com, verify the redirect URL exactly matches what Retool shows in the Resource configuration (Settings icon next to the OAuth section). Retool Cloud uses https://oauth.retool.com/oauth/user/oauthcallback — ensure no trailing slash and the exact path is copied. After correcting, delete and recreate the Retool resource's OAuth connection.

### Canva API queries return 403 Forbidden errors for certain designs or folders

Cause: The authenticated Canva user doesn't have access to the requested designs or folders, or the OAuth token was granted with insufficient scopes.

Solution: Check whether the authenticated user can access the designs directly in the Canva web interface. If not, the issue is Canva-level permissions, not Retool configuration. If the user has access in Canva but not via the API, re-authenticate in the Resource settings and ensure you authorized all required scopes (design:content:read, folder:read) during the OAuth flow. You may need to revoke and re-grant the Canva application's access.

### Design thumbnail images show as broken or load very slowly in the Retool Image component

Cause: Canva thumbnail URLs are pre-signed and expire after a limited time. If the query response is cached, the URLs may be stale by the time the Image component renders them.

Solution: Set the listDesigns query's cache duration to 0 (disabled) in the query's Advanced settings. Alternatively, reduce the cache duration to under 300 seconds. Since Canva's thumbnail URLs expire, caching the query for longer than the URL expiry causes broken images. Also ensure the Image component's source references the live query data rather than a stale transformer output.

### Canva API returns a 429 Too Many Requests error when loading large design libraries

Cause: Canva's Connect API enforces rate limits on the number of requests per minute. Loading many pages of designs or polling export job status too frequently triggers rate limiting.

Solution: Implement pagination by loading 50 designs per page rather than fetching all designs at once. Use the 'continuation' token from Canva's paginated response to load additional pages only when the user clicks 'Load more'. For export polling, add a 3-5 second delay between status checks using a Workflow with a wait block rather than rapid successive queries in the app.

## Frequently asked questions

### Does Canva have an official API for building integrations like this?

Yes, Canva offers the Canva Connect API at developers.canva.com. It provides OAuth 2.0-based access to designs, assets, folders, brand templates, and export capabilities. The API is available to Canva Teams and Enterprise customers. Free and Pro plan users have limited or no API access — check Canva's current developer documentation for the latest access tier requirements.

### Can I use Retool to create or edit Canva designs programmatically?

Canva's Connect API includes write operations for creating designs from templates, updating design names, and generating export links, so yes — with the appropriate write scopes (design:content:write) configured in your OAuth application, Retool can trigger design creation. However, actually editing design content (moving elements, changing text) is not supported through the REST API and requires Canva's Apps SDK, which runs inside the Canva editor.

### Will all Retool users see the same Canva designs in the dashboard?

By default with per-user OAuth, each Retool user authenticates with their own Canva account and sees only their personally accessible designs. If you enable 'Share OAuth 2.0 credentials between users' in the Resource settings, all users share the credentials of the user who first authenticated — meaning they all see that user's accessible designs. Choose the model based on whether your team wants individual access control or shared library access.

### How do I handle Canva thumbnail URLs that expire?

Canva's thumbnail URLs are pre-signed and expire after a limited window (typically minutes to hours). To avoid broken images, disable query caching on your design list query, or set a short cache duration (under 5 minutes). If you need persistent thumbnail references for an asset catalog, fetch fresh URLs on each page load rather than storing them in a database long-term.

### Can I use this integration to build a brand portal where non-Retool users access assets?

Retool apps require a Retool login and are intended for internal tool use. If you need a public-facing brand portal, the Canva integration pattern described here is for internal team dashboards only. For a public brand portal, you would serve the Canva API calls through your own backend and build a separate customer-facing interface. Retool is the right choice for internal asset management workflows.

---

Source: https://www.rapidevelopers.com/retool-integrations/canva
© RapidDev — https://www.rapidevelopers.com/retool-integrations/canva