If you haven't already, 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.git
cd canva-apps-sdk-starter-kit

SHELL

Install dependencies:
```
npm install
```
SHELL
Run the example:
```
npm run start design_metadata
```
SHELL
Click the Preview URL link shown in the terminal to open the example in the Canva editor.

Example app source code

// For usage information, see the README.md file.
import {
  Button,
  FormField,
  MultilineInput,
  Rows,
  Text,
} from "@canva/app-ui-kit";

import type { DesignMetadata } from "@canva/design";
import { getDesignMetadata } from "@canva/design";

import * as styles from "styles/components.css";
import React, { useState } from "react";

export const App = () => {
  // State to store the design metadata retrieved from the Canva Design API
  const [designMetadata, setDesignMetadata] = useState<
    DesignMetadata | undefined
  >();

  // Function to fetch design metadata using the Canva Design API
  const getDesignInfo = React.useCallback(async () => {
    // The getDesignMetadata function returns metadata about the current design
    // including title, dimensions, page count, and other properties
    const response = await getDesignMetadata();
    setDesignMetadata(response);
  }, []);

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="3u">
        <Text>
          This example demonstrates how apps can retrieve information about the
          design.
        </Text>
        <Button variant="primary" onClick={getDesignInfo} stretch>
          Get design metadata
        </Button>

        {/* Display the design metadata as formatted JSON */}
        <FormField
          label="Design metadata"
          value={JSON.stringify(designMetadata, null, 2)}
          control={(props) => (
            <MultilineInput {...props} maxRows={12} autoGrow readOnly />
          )}
        />
      </Rows>
    </div>
  );
};

TYPESCRIPT

// For usage information, see the README.md file.
import { AppUiProvider } from "@canva/app-ui-kit";
import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";

const root = createRoot(document.getElementById("root") as Element);
function render() {
  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

render();

// Hot Module Replacement for development (automatically reloads the app when changes are made)
if (module.hot) {
  module.hot.accept("./app", render);
}

TYPESCRIPT

# Design metadata

Demonstrates how to retrieve design information including title, dimensions, and other metadata properties. Shows design introspection and metadata access patterns.

For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/design-metadata/.

Related examples: See design_interaction/design_token for accessing designs via external APIs, or design_interaction/export for design export functionality.

NOTE: This example differs from what is expected for public apps to pass a Canva review:

- Metadata handling is simplified for demonstration purposes only. Production apps should handle metadata gracefully and use metadata for context-aware functionality
- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements

MARKDOWN

API reference

Need help?

Join our Community Forum⁠(opens in a new tab or window)
Report issues with this example on GitHub⁠(opens in a new tab or window)