Skip navigation

Skip to main content

Examples
Localization
Examples

Export

Export designs in various formats and resolutions.

Running this example

To run this example locally:

  1. 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.

  2. 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.

  3. Clone the starter kit:

    git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
    cd canva-apps-sdk-starter-kit
    SHELL

  4. Install dependencies:

    npm install
    SHELL

  5. Run the example:

    npm run start export
    SHELL

  6. 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 { ExportResponse } from "@canva/design";
import { requestExport } from "@canva/design";
import { useState } from "react";
import * as styles from "styles/components.css";


export const App = () => {
  const [state, setState] = useState<"exporting" | "idle">("idle");
  const [exportResponse, setExportResponse] = useState<
    ExportResponse | undefined
  >();


  const exportDocument = async () => {
    if (state === "exporting") return;
    try {
      setState("exporting");


      const response = await requestExport({
        acceptedFileTypes: [
          "png",
          "pdf_standard",
          "jpg",
          "gif",
          "svg",
          "video",
          "pptx",
        ],
      });


      // TODO: Send the URL to your backend using fetch
      setExportResponse(response);
    } catch (error) {
      // TODO: Add error handling
      // eslint-disable-next-line no-console
      console.log(error);
    } finally {
      setState("idle");
    }
  };


  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="3u">
        <Text>This example demonstrates how apps can export designs.</Text>
        <Button
          variant="primary"
          onClick={exportDocument}
          loading={state === "exporting"}
          stretch
        >
          Export
        </Button>
        {exportResponse && (
          <FormField
            label="Export response"
            value={JSON.stringify(exportResponse, null, 2)}
            control={(props) => (
              <MultilineInput {...props} maxRows={7} autoGrow readOnly />
            )}
          />
        )}
      </Rows>
    </div>
  );
};
TYPESCRIPT
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();


if (module.hot) {
  module.hot.accept("./app", render);
}
TYPESCRIPT
# Design export


Demonstrates how to export designs in various formats (PNG, PDF, JPG, GIF, SVG, video, PPTX) using requestExport. Shows export configuration, file format selection, and export response handling.


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


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


- Console.log statements are used for debugging purposes but should be replaced with proper error handling and logging in production apps
- ESLint rule `no-console` is disabled for example purposes only. Production apps should not disable linting rules without proper justification
- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Progress indicators are not implemented. Production apps should provide visual feedback during long-running operations
- 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?