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

# Group elements

Group multiple elements together for unified manipulation.

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

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 { Alert, Button, Rows, Text } from "@canva/app-ui-kit";
    import { addElementAtPoint } from "@canva/design";
    import * as styles from "styles/components.css";
    import { useFeatureSupport } from "@canva/app-hooks";

    export const App = () => {
      const isSupported = useFeatureSupport();
      // Check if the addElementAtPoint API is supported in the current design type
      // Group elements are not supported in certain design types such as docs
      const isRequiredFeatureSupported = isSupported(addElementAtPoint);

      const handleClick = () => {
        // Group elements allow multiple child elements to be positioned relative to each other
        // and treated as a single unit within the Canva design
        addElementAtPoint({
          type: "group",
          children: [
            {
              // First embed element positioned at the top-left of the group
              type: "embed",
              url: "https://www.youtube.com/watch?v=LLFhKaqnWwk",
              width: 100,
              height: 100,
              top: 0,
              left: 0,
            },
            {
              // Second embed element positioned to the right of the first
              // Child element positions are relative to the group's coordinate system
              type: "embed",
              url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
              width: 100,
              height: 100,
              top: 0,
              left: 100,
            },
          ],
        });
      };

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="3u">
            <Text>
              This example demonstrates how apps can create groups of elements.
            </Text>
            <Button
              variant="primary"
              onClick={handleClick}
              // GroupElement is not supported in certain design types such as docs.
              disabled={!isRequiredFeatureSupported}
              stretch
            >
              Add group element
            </Button>
            {!isRequiredFeatureSupported && <UnsupportedAlert />}
          </Rows>
        </div>
      );
    };

    const UnsupportedAlert = () => (
      <Alert tone="warn">
        Sorry, the required features are not supported in the current design.
      </Alert>
    );
    ```
  </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
    # Group elements

    Demonstrates how to create group elements that contain multiple child elements positioned relative to each other. Shows grouping patterns for organizing related design elements.

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

    See `app_element_children` for similar multi-element patterns, or other `design_elements` examples for individual element creation.

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

    - Content and grouping patterns are hardcoded for demonstration purposes only. Production apps should provide user input interfaces or dynamic content loading and group management interfaces
    - Element hierarchy handling is simplified for demonstration. Production apps should handle complex element hierarchies and support proper ungrouping 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](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/)
* [`addElementAtPoint`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-point/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)

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