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:example design_template_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,
  Rows,
  FormField,
  Text,
  MultilineInput,
} from "@canva/app-ui-kit";
import {
  getDesignTemplateMetadata,
  type DesignTemplateMetadata,
} from "@canva/design";
import * as styles from "styles/components.css";
import React, { useState } from "react";

export const App = () => {
  // Creates state to store design template metadata
  const [designTemplateMetadata, setDesignTemplateMetadata] = useState<
    DesignTemplateMetadata | undefined
  >();

  // The getDesignTemplateMetadata function returns template metadata for the templates used in the design.
  // This includes keywords and template domain.
  const getDesignTemplateInfo = React.useCallback(async () => {
    const response = await getDesignTemplateMetadata();

    setDesignTemplateMetadata(response);
  }, []);

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="3u">
        <Text>
          This example demonstrates how apps can retrieve template metadata for
          the template that is being used by the design.
        </Text>
        <Button variant="primary" onClick={getDesignTemplateInfo}>
          Get design template metadata
        </Button>

        {/* Display the template metadata as formatted JSON */}
        <FormField
          label="Design template metadata"
          value={JSON.stringify(designTemplateMetadata, 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";
import type { DesignEditorIntent } from "@canva/intents/design";
import { prepareDesignEditor } from "@canva/intents/design";

async function render() {
  const root = createRoot(document.getElementById("root") as Element);

  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

const designEditor: DesignEditorIntent = { render };
prepareDesignEditor(designEditor);

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

TYPESCRIPT

# Design template metadata

Demonstrates how to retrieve template metadata (including keywords and template domain) for templates used in a design.

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

Related examples: See design_interaction/design_metadata for retrieving design information.

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
- The code structure is simplified: Production apps using [intents](/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx

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)