# @canva/design

> The Canva Developers SDK design library for apps inside Canva

Latest version **2.13.0** (published 2026-09-01) · SEE LICENSE IN LICENSE.md FILE license · 0 weekly downloads

## Install

```sh
npm install @canva/design
pnpm add @canva/design
yarn add @canva/design
bun add @canva/design
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.13.0 |
| Published | 2026-09-01 |
| First published | 2023-11-17 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md FILE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Canva Pty Ltd. |
| Maintainers | canva-dev |

## Links

- npm: https://www.npmjs.com/package/@canva/design
- npm.io page: https://npm.io/package/@canva/design

## Recent versions

- 2.13.0 (latest) — 2026-09-01
- 2.13.1-beta.2 (beta) — 2026-09-21
- 2.9.1-alpha.0 (early-preview) — 2026-06-04
- 2.13.1-beta.1 — 2026-09-04
- 2.13.1-beta.0 — 2026-09-02
- 2.12.1-beta.0 — 2026-08-13
- 2.12.0 — 2026-08-13
- 2.11.0 — 2026-08-12
- 2.10.2-beta.3 — 2026-08-04
- 2.10.2-beta.2 — 2026-07-30
- 2.10.2-beta.1 — 2026-07-27
- 2.10.2-beta.0 — 2026-07-23
- 2.10.1 — 2026-07-21
- 2.10.1-beta.2 — 2026-07-16
- 2.10.1-beta.1 — 2026-07-09
- … 55 more at https://npm.io/package/@canva/design/versions

## README

# @canva/design

A package for Canva's Apps SDK that provides methods for interacting with a user's design.

![](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

## Table of contents

- [Introduction](#introduction)
- [Installation](#installation)
- [Usage](#usage)
- [API reference](#api-reference)
- [Related packages](#related-packages)
- [Contributing](#contributing)
- [License](#license)

## Introduction

`@canva/design` is an npm package for Canva's [Apps SDK](https://www.canva.dev/docs/apps). It provides methods for interacting with a user's design. For example, the `addPage` method adds a page to the user's design, while `requestExport` exports the user's design as one or more static files.

**Note:** To get up and running with the Apps SDK, check out [the quick start guide](https://www.canva.dev/docs/apps/quick-start).

## Installation

```bash
npm install @canva/design
```

## Usage

1. Import a method or namespace from the `@canva/design` package:

   ```ts
   import { addPage } from '@canva/design';
   ```

2. Call a method, passing in the required arguments (if any):

   ```ts
   await addPage();
   ```

## API reference

- [`addAudioTrack`](https://www.canva.dev/docs/apps/api/design-add-audio-track)
- [`addElementAtPoint`](https://www.canva.dev/docs/apps/api/design-add-element-at-point)
- [`addPage`](https://www.canva.dev/docs/apps/api/design-add-page)
- [`editContent`](https://www.canva.dev/docs/apps/api/design-edit-content)
- [`getCurrentPageContext`](https://www.canva.dev/docs/apps/api/design-get-current-page-context)
- [`getDefaultPageDimensions`](https://www.canva.dev/docs/apps/api/design-get-default-page-dimensions)
- [`initAppElement`](https://www.canva.dev/docs/apps/api/design-init-app-element)
- [`openDesign`](https://www.canva.dev/docs/apps/api/design-open-design)
- [`requestExport`](https://www.canva.dev/docs/apps/api/design-request-export)
- [`selection.registerOnChange`](https://www.canva.dev/docs/apps/api/design-selection-register-on-change)
- [`setCurrentPageBackground`](https://www.canva.dev/docs/apps/api/design-set-current-page-background)
- [`ui.startDrag`](https://www.canva.dev/docs/apps/api/design-ui-start-drag)

## Related packages

The Apps SDK is made up of the following packages:

- [`@canva/app-ui-kit`](https://www.npmjs.com/package/@canva/app-ui-kit) - React-based component library for creating apps that mimic the look and feel of Canva.
- [`@canva/asset`](https://www.npmjs.com/package/@canva/asset) - Provides methods for working with assets, such as image and video files.
- [`@canva/design`](https://www.npmjs.com/package/@canva/design) - Provides methods for interacting with the user's design, such as creating elements.
- [`@canva/error`](https://www.npmjs.com/package/@canva/error) - Provides a `CanvaError` class for handling errors.
- [`@canva/platform`](https://www.npmjs.com/package/@canva/platform) - Provides utility methods, such as a method for opening external links.
- [`@canva/user`](https://www.npmjs.com/package/@canva/user) - Provides methods for accessing user data and authenticating users.

## Contributing

We're actively developing this package but are not currently accepting third-party contributions. If you'd like to request any changes or additions to the package, submit a feature request via the [Canva Developers Community](https://community.canva.dev/).

## License

See the `LICENSE.md` file.

---
_Source: https://npm.io/package/@canva/design · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._