Canva Auto-Translation Add-In!

Canva is used daily by teams working across the globe in different languages. Whether you are an ad designer working with teams in Spain or a student needing to make slides for your French class, easy, efficient text translation is vital to your workflow. Currently, the Canva app doesn't have a simple way to translate text; you have to either copy and paste each individual text box into Google Translate or Magic Write within the app, which can be unnecessarily tedious.

With this Canva Auto-Translation Add-in, do it all in one click of a button!

Demo: https://youtu.be/wPiQsCr5RVY

Requirements

• Node.js v18 or v20.10.0
• npm v9 or v10

Note: To make sure you're running the correct version of Node.js, we recommend using a version manager, such as nvm. The .nvmrc file in the root directory of this repo will ensure the correct version is used once you run nvm install.

Quick start

npm install

Running your Canva App

Step 1: Start the local development server

To start the boilerplate's development server, run the following command:

npm start

The server becomes available at http://localhost:8080.

The app's source code is in the src/app.tsx file.

Step 2: Preview the app

The local development server only exposes a JavaScript bundle, so you can't preview an app by visiting http://localhost:8080. You can only preview an app via the Canva editor.

To preview an app:

1. Create an app via the Developer Portal.
2. Select App source > Development URL.
3. In the Development URL field, enter the URL of the development server.
4. Click Preview. This opens the Canva editor (and the app) in a new tab.
5. Click Open. (This screen only appears when using an app for the first time.)

The app will appear in the side panel.