Examples
The Canva Apps SDK Starter Kit(opens in a new tab or window) contains a collection of example apps that demonstrate how to implement common features and patterns in your Canva app.
Getting started
The Apps SDK Starter Kit includes atomic examples for our various features. To run the examples locally, follow these steps:
-
Create a new app in the Developer Portal(opens in a new tab or window). For more information, refer to our Quickstart guide.
-
In your app's configuration on the Developer Portal(opens in a new tab or window), ensure the "Development URL" is set to
http://localhost:8080. -
Clone the starter kit:
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.gitcd canva-apps-sdk-starter-kitSHELL -
Install dependencies:
npm installSHELL -
Run the examples explorer:
npm run start examplesSHELL -
Click the Preview URL link shown in the terminal to open the example in the Canva editor.
Examples
App elements
App element children
Build composite app elements from multiple child elements.
App embed elements
Create embed elements inside app elements.
App image elements
Create image elements inside app elements.
App shape elements
Create shape elements inside app elements.
App text elements
Create text elements inside app elements.
App video elements
Create video elements inside app elements.
Assets and media
Asset upload
Upload and manage assets directly into Canva.
Digital asset management
Digital asset management system using Canva app components.
Fonts
Use the fonts picker to apply custom fonts to text elements in designs.
Image editing overlay
Create custom image editing overlays and filters.
Fundamentals
Authentication
Third-party authentication integration for external platforms.
Feature support
Feature detection and conditional functionality based on platform support.
Fetch
Secure communication between apps and servers using the browser's Fetch API.
UI
Color
Color picker for Brand, Document, and custom colors.
Masonry
Masonry layout implementation using the App UI Kit.
Notification
Display toast notifications to users.
Open external link
Open external URLs safely from within Canva apps.
Intents
Data connector intent
Data connector integration for external data sources.
Design interaction
Design editing
Edit and modify design properties and content.
Design metadata
Retrieve and access design metadata and properties.
Design token
Secure token-based authentication and design access.
Export
Export designs in various formats and resolutions.
Page addition
Add new pages with pre-populated elements to designs.
Page background
Set and modify page background colors and images.
Positioning elements
Position elements precisely using page dimensions and coordinates.
Drag and drop
Drag and drop audio
Drag-and-drop functionality for audio elements.
Drag and drop embed
Drag-and-drop functionality for embed elements.
Drag and drop image
Drag-and-drop functionality for image elements.
Drag and drop text
Drag-and-drop functionality for text elements.
Drag and drop video
Drag-and-drop functionality for video elements.
Design elements
Embed elements
Add interactive embed elements to designs.
Group elements
Group multiple elements together for unified manipulation.
Image elements
Add image elements to designs with editing capabilities.
Richtext elements
Add rich text elements with formatting to designs.
Shape elements
Add geometric shape elements to designs.
Shape elements with asset
Create shape elements with image and video fills.
Table elements
Add structured table elements with rows and columns.
Text elements
Create and style text elements in designs.
Video elements
Add video elements to designs with playback controls.
Localization
I18n
Internationalization support using react-intl with ICU syntax implementation.
Content replacement
Image replacement
Replace selected image elements with custom images.
Richtext replacement
Replace selected rich text elements with formatted content.
Text replacement
Replace selected text elements with custom content.
Text translation
Replace and translate text elements across different languages.
Video replacement
Replace selected video elements in designs with custom content.
Testing
UI test
UI and snapshot testing App UI.
Unit test
Unit testing Apps SDK packages.
Need Help?
- Check the documentation for detailed guides
- Report issues on GitHub(opens in a new tab or window)