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

# Image replacement

Replace selected image elements with custom images.

## 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 image_replacement
   ```

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 { useState } from "react";
    import { upload } from "@canva/asset";
    import { Button, Rows, Text } from "@canva/app-ui-kit";
    import { useSelection } from "@canva/app-hooks";
    import * as styles from "styles/components.css";

    export const App = () => {
      const [loading, setLoading] = useState(false);
      // Hook to monitor image element selection in the Canva editor
      // Only triggers when image elements are selected by the user
      const selection = useSelection("image");

      const updateImage = async () => {
        setLoading(true);

        // Upload a new image using Canva's asset API
        // This creates a queued image that can be referenced in the design
        const queuedImage = await upload({
          type: "image",
          url: "https://www.canva.dev/example-assets/image-import/image.jpg",
          mimeType: "image/jpeg",
          thumbnailUrl:
            "https://www.canva.dev/example-assets/image-import/thumbnail.jpg",
          aiDisclosure: "none",
        });

        // Read the current selection draft to modify selected image elements
        const draft = await selection.read();
        // Replace each selected image's reference with the new uploaded image
        draft.contents.forEach((s) => (s.ref = queuedImage.ref));
        // Save the changes to update the design with the new image
        await draft.save();

        setLoading(false);
      };

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="2u">
            <Text>
              This example demonstrates how apps can replace the selected image.
              Select an image in the editor to begin.
            </Text>
            <Button
              variant="primary"
              onClick={updateImage}
              disabled={selection.count === 0}
              loading={loading}
            >
              Replace with sample image
            </Button>
          </Rows>
        </div>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import { AppUiProvider } from "@canva/app-ui-kit";
    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
    # Image replacement

    Demonstrates how to replace selected image elements in a design with new image content. Shows selection detection, image upload, and content replacement patterns for updating existing design elements using the Canva Apps SDK.

    For API reference docs and instructions on running this example, see: <https://www.canva.dev/docs/apps/examples/image-replacement/>.

    Related examples: See content_replacement/video_replacement for video substitution patterns, or asset_upload for general image import and upload workflows.

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

    - Static assets are used for demonstration purposes only. Production apps should host assets on a CDN/hosting service and use the `upload` function from the `@canva/asset` package
    - Image format validation is not implemented. Production apps should validate image formats and handle unsupported formats gracefully
    - 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](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    - Loading states and progress indicators are basic. Production apps should provide detailed progress feedback for long-running operations
    ```
  </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/)
* [`upload`](https://www.canva.dev/docs/apps/api/latest/asset-upload/)

## 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)