### Run the example Source: https://www.canva.dev/docs/apps/examples/implement-multiple-intents Start the example application locally. This command builds the app and starts a development server. ```shell npm run start implement_multiple_intents ``` -------------------------------- ### Run the multi-account authentication example Source: https://www.canva.dev/docs/apps/examples/multi-account-authentication Start the multi-account authentication example locally. This command assumes you have completed the previous setup steps. ```shell npm run start multi_account_authentication ``` -------------------------------- ### Run the App Video Elements Example Source: https://www.canva.dev/docs/apps/examples/app-video-elements Start the specific 'app_video_elements' example locally. This command assumes you have completed the previous setup steps. ```shell npm run start app_video_elements ``` -------------------------------- ### Run Fetch Example Source: https://www.canva.dev/docs/apps/examples/fetch Run the fetch example using the npm start command with the 'fetch' argument. This command starts the development server for the example. ```shell npm run start fetch ``` -------------------------------- ### Run Video Replacement Example - npm Source: https://www.canva.dev/docs/apps/examples/video-replacement Start the video replacement example locally using the npm start command. ```shell npm run start video_replacement ``` -------------------------------- ### Run the example Source: https://www.canva.dev/docs/apps/examples/app-element-children Start the app element children example locally. This command will build and run the example, providing a preview URL. ```shell npm run start app_element_children ``` -------------------------------- ### Run Design Metadata Example Source: https://www.canva.dev/docs/apps/examples/design-metadata Start the development server with the design metadata example. ```shell npm run start design_metadata ``` -------------------------------- ### Run the multi-provider authentication example Source: https://www.canva.dev/docs/apps/examples/multi-provider-authentication Execute the command to start the multi-provider authentication example. ```shell npm run start multi_provider_authentication ``` -------------------------------- ### Run Authentication Example Source: https://www.canva.dev/docs/apps/examples/authentication Run the authentication example locally. This command starts the development server for the authentication example. ```shell npm run start authentication ``` -------------------------------- ### Run Page Background Example Source: https://www.canva.dev/docs/apps/examples/page-background Start the page background example locally. This command assumes you have completed the previous setup steps. ```shell npm run start page_background ``` -------------------------------- ### Run the positioning elements example Source: https://www.canva.dev/docs/apps/examples/positioning-elements Start the positioning elements example by running this command. This will launch the example in your local development server. ```shell npm run start positioning_elements ``` -------------------------------- ### Run Open External Link Example Source: https://www.canva.dev/docs/apps/examples/open-external-link Execute the 'open_external_link' example using the npm start command. This will prepare the example for preview. ```shell npm run start open_external_link ``` -------------------------------- ### Run Authentication Example Source: https://www.canva.dev/docs/apps/examples/authentication This command starts the authentication example from the root of the starter kit. Ensure your provider details are configured in the developer portal before running. ```sh npm start authentication ``` -------------------------------- ### Run Richtext Replacement Example Source: https://www.canva.dev/docs/apps/examples/richtext-replacement Start the development server and run the richtext replacement example. This command will build the app and start a local server. ```shell npm run start richtext_replacement ``` -------------------------------- ### Run Image Elements Example Source: https://www.canva.dev/docs/apps/examples/image-elements Start the image elements example. This command will build and run the example, providing a preview URL. ```shell npm run start image_elements ``` -------------------------------- ### Run Group Elements Example Source: https://www.canva.dev/docs/apps/examples/group-elements Run the specific 'group_elements' example from the starter kit. This command starts the development server for the example. ```shell npm run start group_elements ``` -------------------------------- ### Run App Embed Elements Example Source: https://www.canva.dev/docs/apps/examples/app-embed-elements Run the specific 'app_embed_elements' example. This command starts the development server for the example. ```shell npm run start app_embed_elements ``` -------------------------------- ### Run Text Elements Example Source: https://www.canva.dev/docs/apps/examples/text-elements Start the local development server and run the text elements example. This command should be executed from the root of the starter kit directory. ```shell npm run start text_elements ``` -------------------------------- ### Run the content publisher intent example Source: https://www.canva.dev/docs/apps/examples/content-publisher-intent Execute the command to start the content publisher intent example. ```shell npm run start content_publisher_intent ``` -------------------------------- ### Run Table Elements Example Source: https://www.canva.dev/docs/apps/examples/table-elements Execute the command to start the table elements example locally. ```shell npm run start table_elements ``` -------------------------------- ### Run Page Addition Example Source: https://www.canva.dev/docs/apps/examples/page-addition Execute the page addition example using the npm start command. ```shell npm run start page_addition ``` -------------------------------- ### Run App Shape Elements Example Source: https://www.canva.dev/docs/apps/examples/app-shape-elements Start the specific 'app_shape_elements' example within the starter kit. ```shell npm run start app_shape_elements ``` -------------------------------- ### Run UI Test Example Source: https://www.canva.dev/docs/apps/examples/ui-test Start the UI test example using the npm script. ```shell npm run start ui_test ``` -------------------------------- ### Run Drag and Drop Embed Example Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-embed Start the drag-and-drop embed example locally. This command will build and serve the example, providing a preview URL. ```shell npm run start drag_and_drop_embed ``` -------------------------------- ### Run Intent Navigation Example Source: https://www.canva.dev/docs/apps/examples/intent-navigation Start the intent navigation example locally. This command builds and runs the specific example, making it accessible for testing. ```shell npm run start intent_navigation ``` -------------------------------- ### Run Design Token Example Source: https://www.canva.dev/docs/apps/examples/design-token Start the design token example locally. This command will build the app and provide a preview URL. ```bash npm run start design_token ``` -------------------------------- ### Run App Image Elements Example Source: https://www.canva.dev/docs/apps/examples/app-image-elements Run the specific example for app image elements. This command starts the local development server for the example. ```shell npm run start app_image_elements ``` -------------------------------- ### Run Digital Asset Management Example Source: https://www.canva.dev/docs/apps/examples/digital-asset-management Start the digital asset management example using the npm script. This command will build and serve the example, providing a preview URL. ```shell npm run start digital_asset_management ``` -------------------------------- ### Run Masonry Example Source: https://www.canva.dev/docs/apps/examples/masonry Start the masonry example locally. This command builds and runs the app, providing a preview URL. ```shell npm run start masonry ``` -------------------------------- ### Run App Text Elements Example Source: https://www.canva.dev/docs/apps/examples/app-text-elements Start the 'app_text_elements' example locally. This command compiles and runs the example, making it accessible via a preview URL. ```shell npm run start app_text_elements ``` -------------------------------- ### Run Drag and Drop Video Example Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-video Execute the drag-and-drop video example using the npm start command. This will provide a preview URL to access the example in the Canva editor. ```shell npm run start drag_and_drop_video ``` -------------------------------- ### Run Image Editing Overlay Example Source: https://www.canva.dev/docs/apps/examples/image-editing-overlay Start the image editing overlay example locally. This command will build and run the specific example, providing a preview URL. ```shell npm run start image_editing_overlay ``` -------------------------------- ### Run Drag and Drop Image Example Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-image Start the drag-and-drop image example using the provided npm script. This command will build and run the example locally. ```shell npm run start drag_and_drop_image ``` -------------------------------- ### Run Video Elements Example Source: https://www.canva.dev/docs/apps/examples/video-elements Start the video elements example locally. This command will build and run the example, providing a preview URL to access it in the Canva editor. ```shell npm run start video_elements ``` -------------------------------- ### Run the asset upload example Source: https://www.canva.dev/docs/apps/examples/asset-upload Start the asset upload example using the provided npm script. This will generate a preview URL to access the example in the Canva editor. ```shell npm run start asset_upload ``` -------------------------------- ### Run Data Connector Intent Example Source: https://www.canva.dev/docs/apps/examples/data-connector-intent Start the data connector intent example using the provided npm script. This command will launch the example, and a preview URL will be shown in the terminal. ```shell npm run start data_connector_intent ``` -------------------------------- ### Run Unit Test Example Source: https://www.canva.dev/docs/apps/examples/unit-test Run the unit test example locally. This command starts the development server and prepares the app for testing. ```shell npm run start unit_test ``` -------------------------------- ### TL;DR: Set up starter kit Source: https://www.canva.dev/docs/apps/setting-up-starter-kit A quick summary of the commands needed to clone the starter kit and install dependencies. ```bash git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git cd canva-apps-sdk-starter-kit npm install ``` -------------------------------- ### Navigate and Start Local Development Server Source: https://www.canva.dev/docs/apps/app-templates/hello-world Change into your newly created app's directory and start the local development server using npm. Replace 'example-hello-world-app' with your app's actual name. ```bash cd example-hello-world-app npm start ``` -------------------------------- ### Navigate and Start App Source: https://www.canva.dev/docs/apps/app-templates/data-connector After creating the app, navigate to its directory and start the development server. Replace 'example-data-connector-app' with your app's actual name. ```bash cd example-data-connector-app npm start ``` -------------------------------- ### Start Development Server (Manual) Source: https://www.canva.dev/docs/apps/quickstart Run the npm run start command to launch the local development server from the starter kit. ```shell npm run start ``` -------------------------------- ### Install dependencies with npm Source: https://www.canva.dev/docs/apps/setting-up-starter-kit After cloning the starter kit, navigate into the directory and install the necessary npm dependencies. ```bash cd canva-apps-sdk-starter-kit npm install ``` -------------------------------- ### Run Fonts Example Source: https://www.canva.dev/docs/apps/examples/fonts Execute the fonts example using the npm start command. This will launch the example in your local development environment. ```shell npm run start fonts ``` -------------------------------- ### Run New App Locally Source: https://www.canva.dev/docs/apps/app-templates/generative-ai Navigate to your app's directory and start the development server to preview your app locally. Replace 'example-gen-ai-app' with your app's actual name. ```bash cd example-gen-ai-app npm start ``` -------------------------------- ### Run Export Example Source: https://www.canva.dev/docs/apps/examples/export Start the export example locally. This command will build and run the example app, making it accessible in the Canva editor. ```shell npm run start export ``` -------------------------------- ### Run Digital Asset Management Example Source: https://www.canva.dev/docs/apps/examples/digital-asset-management Launch the development servers for the frontend and backend of the digital asset management example. ```bash npm start digital_asset_management ``` -------------------------------- ### Run the Content Publisher App Locally Source: https://www.canva.dev/docs/apps/app-templates/content-publisher Navigate to your app's directory and start the development server to preview your app. Replace 'example-content-publisher-app' with your app's actual name. ```bash cd example-content-publisher-app npm start ``` -------------------------------- ### Run Design Audit Example Source: https://www.canva.dev/docs/apps/examples/design-audit Execute the design audit example using the npm start command. ```shell npm run start design_audit ```