> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

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

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example export
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // 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");
      // Store the export response containing URLs and metadata for the exported design
      const [exportResponse, setExportResponse] = useState<
        ExportResponse | undefined
      >();

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

          // Request export with multiple format options - Canva will present user with format selection
          const response = await requestExport({
            acceptedFileTypes: [
              "png",
              "pdf_standard",
              "jpg",
              "gif",
              "svg",
              "video",
              "pptx",
            ],
          });

          // In production apps: Send the export URL to your backend service for processing
          // Replace this with: await fetch('/api/process-export', { method: 'POST', body: JSON.stringify(response) })
          setExportResponse(response);
        } catch (error) {
          // In production apps: Implement comprehensive error handling with user-friendly messages
          // Replace console.log with proper error reporting and user feedback
          /* 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 design
            </Button>
            {exportResponse && (
              <FormField
                label="Export response"
                value={JSON.stringify(exportResponse, null, 2)}
                control={(props) => (
                  <MultilineInput {...props} maxRows={7} autoGrow readOnly />
                )}
              />
            )}
          </Rows>
        </div>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```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);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # 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 like exports
    - The export response is displayed directly in the UI. Production apps should send export URLs to backend services for processing
    - 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](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)
* [`requestExport`](https://www.canva.dev/docs/apps/api/latest/design-request-export/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)