Skip navigation

Skip to main content

The Canva Apps SDK, Connect APIs, and MCP are now unified in the Canva Developers SDK. Learn more⁠(opens in a new tab or window).
Canva Developers SDK
The Canva Apps SDK, Connect APIs, and MCP are now unified in the Canva Developers SDK. Learn more⁠(opens in a new tab or window).
Apps inside Canva
OverviewHow apps work in CanvaSet up your app
Fundamentals
Previewing appsUsing a backendBundling appsAdapt to feature context
App intents
Overview
OverviewImplementation guide
Creating app elementsCreating audio tracksCreating imagesCreating image overlaysCreating shapesCreating tablesCreating textCreating videosEmbedding rich media
Grouping elementsPositioning elementsSupporting drag and dropUsing fontsUsing color selectors
Content Querying APIDesign Editing APISelection API
Using design IDsExporting designs
OverviewImplementation guide
OverviewImplementation guide
OverviewImplementation guideURL pattern validation rules
Development guides
OverviewFrictionless authentication
OverviewDynamic domainsMulti-accountMulti-providerTroubleshooting
Manual authenticationAlternative authentication experiences
Handling errors
Localization overviewRecommended workflowMigrate an existing appLocalize backend responsesLocalize outside React componentsICU syntaxBad practices
Cross-Origin Resource SharingHTTP request verificationJSON Web TokensSecurity guidelinesContent Security Policy
Unit testingTest harness
Designing your app
Overview
LayoutColorsContentWritten contentTypographyIconsSpacingAccessibilityLocalization
AlertsAuthenticationColor selectionContent publisherContent Querying APIData ConnectorDesign Editing APIDrag and dropEmpty statesErrorsExternal linksFeature supportFontsFormsLoadingMobileMonetization statusOverlaysPerformancePremium appsRichtextSearchSelectionSuspensionTablesToasts
OverviewQuickstartDesign tokensComponentsPatterns
SearchableListViewChangelog
Figma resource

Bundling apps

How to generate a JavaScript bundle for an app.

When you're ready to submit an app for review, you need to upload the app to the Developer Portal⁠(opens in a new tab or window) as a standalone JavaScript bundle. The starter kit includes a build script that handles this for you.

How to generate a bundle

  1. Navigate into the starter kit:

    cd canva-apps-sdk-starter-kit
    BASH

  2. Run the following command:

    canva apps build
    BASH

    An app.js file will appear in the dist directory.

How to upload a bundle

You can upload the bundle using either the Canva CLI or the Developer Portal.

To build the app and upload the bundle, run the following command from your app's directory:

canva apps upload
SHELL

To upload an existing build instead, use the --prebuilt option. For more available options, see canva apps upload.

  1. Log in to the Developer Portal.
  2. Navigate to an app via the Your apps⁠(opens in a new tab or window) page.
  3. Go to Inside Canva > Code upload and, under App source, select JavaScript bundle.
  4. Upload the app.js file.

Known limitations

  • Canva doesn't support code-splitting, so all code and dependencies must be bundled in a single file. (You can still organize your code into separate files. @canva/app-scripts takes care of the bundling for you.)
  • The size of the app bundle must not exceed 5 MB.