### Run the examples explorer

Source: https://www.canva.dev/docs/apps/examples

Start the examples explorer to preview the example apps.

```shell
npm run start examples
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-video

Starts the drag and drop video example using the npm start command.

```shell
npm run start drag_and_drop_video
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/authentication

Starts the authentication example using the npm script.

```shell
npm run start authentication
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/intent-navigation

Starts the intent navigation example locally.

```shell
npm run start intent_navigation
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/multi-provider-authentication

Starts the multi-provider authentication example locally.

```shell
npm run start multi_provider_authentication
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/design-token

Starts the design token example locally.

```shell
npm run start design_token
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/richtext-replacement

Starts the richtext_replacement example locally.

```shell
npm run start richtext_replacement
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-image

Starts the drag_and_drop_image example locally.

```shell
npm run start drag_and_drop_image
```

--------------------------------

### Setup Command

Source: https://www.canva.dev/docs/apps/examples/authentication

Command to run the authentication example from the root of the canva-apps-sdk-starter-kit.

```sh
npm start authentication
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-text

Starts the drag and drop text example.

```shell
npm run start drag_and_drop_text
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/positioning-elements

Starts the positioning elements example using npm.

```shell
npm run start positioning_elements
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/design-editing

Starts the design editing example locally.

```shell
npm run start design_editing
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/text-translation

Starts the text translation example locally.

```shell
npm run start text_translation
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/text-elements

Starts the text elements example locally.

```shell
npm run start text_elements
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/content-publisher-intent

Starts the content publisher intent example locally.

```shell
npm run start content_publisher_intent
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/richtext-elements

Starts the richtext_elements example.

```shell
npm run start richtext_elements
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/shape-elements

Starts the shape_elements example locally.

```shell
npm run start shape_elements
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/digital-asset-management

Starts the digital asset management example within the Canva editor.

```shell
npm run start digital_asset_management
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/image-editing-overlay

Starts the image editing overlay example in the Canva editor.

```shell
npm run start image_editing_overlay
```

--------------------------------

### TL;DR

Source: https://www.canva.dev/docs/apps/setting-up-starter-kit

A quick summary of the commands needed to set up the starter kit.

```bash
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
cd canva-apps-sdk-starter-kit
npm install
```

--------------------------------

### Empty State with Sign In Example

Source: https://www.canva.dev/docs/apps/app-ui-kit/storybook?path=%2Fdocs%2Fpatterns-empty-state-empty-state--docs

An example of an empty state component designed for a sign-in scenario, guiding the user to start using the app.

```jsx
<Box className={styles.fullHeight} display="flex" alignItems="center">
  <Rows spacing="2u">
    <Title size="small" alignment="center">
      Sign in to get started
    </Title>
    <Text size="small" alignment="center" tone="tertiary">
      Once that’s done, your content will appear here.
    </Text>
    <Button variant="primary" onClick={action("Sign in clicked!")}>
      Sign in
    </Button>
  </Rows>
</Box>
```

--------------------------------

### Get Asset Upload Job

Source: https://www.canva.dev/docs/connect/autofill-guide

Example of polling for asset upload job status using curl.

```shell
curl --request GET \
     --url https://api.canva.com/rest/v1/asset-uploads/{JOB-ID} \
     --header 'Authorization: Bearer {TOKEN}'
```

--------------------------------

### Clone the example repository

Source: https://www.canva.dev/docs/connect/quickstart

Clone the starter kit repository to your local machine to begin.

```bash
git clone https://github.com/canva-sdks/canva-connect-api-starter-kit.git
```

--------------------------------

### Custom render implementation for Design Editor intent

Source: https://www.canva.dev/docs/apps/upgrades-and-migrations/design-editor-migration-guide

Example of a custom render function for the DesignEditorIntent, including React setup.

```tsx
import type { DesignEditorIntent } from "@canva/intents/design";
import { createRoot } from "react-dom/client";
import { AppUiProvider } from "@canva/app-ui-kit";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";


async function render() {
  // Find the root element
  const rootElement = document.getElementById("root");
  if (!rootElement) {
    throw new Error("Unable to find element with id of 'root'");
  }


  // Create React root
  const root = createRoot(rootElement);


  // Render your app with any providers
  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>
  );
};


const designEditor: DesignEditorIntent = { render };
export default designEditor; // default export the intent contract
```

--------------------------------

### Clone the starter kit

Source: https://www.canva.dev/docs/apps/setting-up-starter-kit

Command to clone the starter kit repository from GitHub.

```bash
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
```

--------------------------------

### Install the App UI Kit

Source: https://www.canva.dev/docs/apps/app-ui-kit/quickstart

Install the App UI Kit package using npm.

```bash
npm install @canva/app-ui-kit
```

--------------------------------

### Column component migration

Source: https://www.canva.dev/docs/apps/app-ui-kit-v5-migration

Example of migrating the Column component from v4 to v5, explicitly setting 'alignY' to 'start' to maintain the old behavior.

```tsx
// Before (v4) - implicit start alignment
<Column>Content</Column>


// After (v5) - explicit start alignment needed
<Column alignY="start">Content</Column>
```

--------------------------------

### Start an investigation example

Source: https://www.canva.dev/docs/audit-logs/actions/investigations

An example of the JSON payload when an actor starts an investigation.

```json
{
  "id": ...,
  "timestamp": ...,
  "actor": ...,
  "target": ...,
  "action": {
    "type": "START_INVESTIGATION",
    "owners": [
      {
        "id": "UXoqDbwwSbQ",
        "display_name": "Jane Doe",
        "email": "jane.doe@example.com"
      }
    ],
    "investigation_reason": "SECURITY_INVESTIGATION",
    "context": "Reviewing designs created by the marketing team for brand compliance."
  },
  "outcome": ...,
  "context": ...
}
```

--------------------------------

### Install dependencies

Source: https://www.canva.dev/docs/connect/quickstart

Navigate into the cloned repository and install the necessary npm dependencies.

```bash
cd canva-connect-api-starter-kit
npm install
```

--------------------------------

### Example response

Source: https://www.canva.dev/docs/connect/api-reference/brand-templates/get-brand-template-dataset

Example of a successful response from the Get Brand Template Dataset API.

```json
{
  "dataset": {
    "cute_pet_image_of_the_day": {
      "type": "image"
    },
    "cute_pet_witty_pet_says": {
      "type": "text"
    },
    "cute_pet_sales_chart": {
      "type": "chart"
    }
  }
}
```

--------------------------------

### Example Response

Source: https://www.canva.dev/docs/connect/api-reference/users/get-user-capabilities

An example of a successful response from the Get User Capabilities API, showing the 'capabilities' array.

```json
{
  "capabilities": [
    "autofill"
  ]
}
```

--------------------------------

### Clone with a custom name

Source: https://www.canva.dev/docs/apps/setting-up-starter-kit

Command to clone the starter kit repository with a custom directory name.

```bash
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git my-custom-name
```

--------------------------------

### Start the local development server (Manual)

Source: https://www.canva.dev/docs/apps/quickstart

Command to start the local development server using the starter kit.

```shell
npm run start
```

--------------------------------

### Launch backend and frontend development servers with ngrok

Source: https://www.canva.dev/docs/apps/examples/digital-asset-management

Command to start the development servers and expose the backend via ngrok.

```bash
npm start digital_asset_management --ngrok
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/group-elements

Starts the group elements example locally.

```shell
npm run start group_elements
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/app-video-elements

Starts the app video elements example locally.

```shell
npm run start app_video_elements
```

--------------------------------

### Navigate into the starter kit

Source: https://www.canva.dev/docs/apps/bundling-apps

This command navigates the user into the starter kit directory.

```bash
cd canva-apps-sdk-starter-kit
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/app-image-elements

Starts the app image elements example locally.

```shell
npm run start app_image_elements
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/design-audit

Starts the design audit example application.

```shell
npm run start design_audit
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/open-external-link

Starts the example application, making it available for preview in the Canva editor.

```shell
npm run start open_external_link
```

--------------------------------

### Example of downloading and getting image dimensions

Source: https://www.canva.dev/docs/apps/creating-image-overlays

An example demonstrating the usage of `downloadImage` within a `useEffect` hook to get image dimensions.

```tsx
React.useEffect(() => {
  const initializeCanvas = async () => {
    const draft = await selection.read();
    const [image] = draft.contents;


    if (!image) {
      return;
    }


    const { url } = await getTemporaryUrl({ type: "image", ref: image.ref });
    const img = await downloadImage(url);
    const { width, height } = img;
  };


  initializeCanvas();
}, [selection]);
```

--------------------------------

### Run the example

Source: https://www.canva.dev/docs/apps/examples/drag-and-drop-audio

Run the drag and drop audio example.

```shell
npm run start drag_and_drop_audio
```

--------------------------------

### Example request

Source: https://www.canva.dev/docs/connect/api-reference/users/users-profile

Examples for using the /v1/users/me/profile endpoint.

```cURL
curl --request GET 'https://api.canva.com/rest/v1/users/me/profile' \
--header 'Authorization: Bearer {token}'
```

```Node.js
const fetch = require("node-fetch");


fetch("https://api.canva.com/rest/v1/users/me/profile", {
  method: "GET",
  headers: {
    "Authorization": "Bearer {token}",
  },
})
  .then(async (response) => {
    const data = await response.json();
    console.log(data);
  })
  .catch(err => console.error(err));
```

```Java
import java.io.IOException;
import java.net.URI;
import java.net.http.*;


public class ApiExample {
    public static void main(String[] args) throws IOException, InterruptedException {
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://api.canva.com/rest/v1/users/me/profile"))
            .header("Authorization", "Bearer {token}")
            .method("GET", HttpRequest.BodyPublishers.noBody())
            .build();


        HttpResponse<String> response = HttpClient.newHttpClient().send(
            request,
            HttpResponse.BodyHandlers.ofString()
        );
        System.out.println(response.body());
    }
}
```

```Python
import requests


headers = {
    "Authorization": "Bearer {token}"
}


response = requests.get("https://api.canva.com/rest/v1/users/me/profile",
    headers=headers
)
print(response.json())
```

```C#
using System.Net.Http;


var client = new HttpClient();
var request = new HttpRequestMessage
{
  Method = HttpMethod.Get,
  RequestUri = new Uri("https://api.canva.com/rest/v1/users/me/profile"),
  Headers =
  {
    { "Authorization", "Bearer {token}" },
  },
};


using (var response = await client.SendAsync(request))
{
  response.EnsureSuccessStatusCode();
  var body = await response.Content.ReadAsStringAsync();
  Console.WriteLine(body);
};
```

```Go
package main


import (
	"fmt"
	"io"
	"net/http"
)


func main() {
	url := "https://api.canva.com/rest/v1/users/me/profile"
	req, _ := http.NewRequest("GET", url, nil)
	req.Header.Add("Authorization", "Bearer {token}")


	res, _ := http.DefaultClient.Do(req)
	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)
	fmt.Println(string(body))
}
```

```PHP
$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.canva.com/rest/v1/users/me/profile",
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTPHEADER => array(
    'Authorization: Bearer {token}',
  ),
));


$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);


if (empty($err)) {
  echo $response;
} else {
  echo "Error: " . $err;
}
```

```Ruby
require 'net/http'
require 'uri'


url = URI('https://api.canva.com/rest/v1/users/me/profile')
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true


request = Net::HTTP::Get.new(url)
request['Authorization'] = 'Bearer {token}'


response = http.request(request)
puts response.read_body
```