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

# Shape elements

Add geometric shape elements to designs.

## 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 shape_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,
      ColorSelector,
      Column,
      Columns,
      FormField,
      MultilineInput,
      NumberInput,
      PlusIcon,
      Rows,
      Text,
      Title,
    } from "@canva/app-ui-kit";
    import { addElementAtPoint } from "@canva/design";
    import { useState } from "react";
    import * as styles from "styles/components.css";
    // Utility hook to check if specific Canva APIs are supported in the current design context
    import { useFeatureSupport } from "@canva/app-hooks";

    // Shape element configuration matching the Canva Design API shape element structure
    type UIState = {
      paths: {
        d: string; // SVG path data defining the shape geometry
        fill: {
          dropTarget: boolean; // Whether this path can accept dropped colors/assets
          color: string; // Fill color in hex format
        };
      }[];
      viewBox: {
        width: number; // SVG viewBox width
        height: number; // SVG viewBox height
        top: number; // SVG viewBox top offset
        left: number; // SVG viewBox left offset
      };
    };

    const initialState: UIState = {
      paths: [
        {
          d: "M 0 0 H 100 V 100 H 0 L 0 0", // SVG path drawing a simple square
          fill: {
            dropTarget: false,
            color: "#ff0099",
          },
        },
      ],
      viewBox: {
        width: 100,
        height: 100,
        top: 0,
        left: 0,
      },
    };

    export const App = () => {
      const [state, setState] = useState<UIState>(initialState);
      const isSupported = useFeatureSupport();
      // Check if shape elements can be added to the current design type (not supported in docs, etc.)
      const isRequiredFeatureSupported = isSupported(addElementAtPoint);

      const { paths, viewBox } = state;
      const disabled = paths.length < 1;

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="3u">
            <Rows spacing="3u">
              <Text>
                This example demonstrates how apps can add shape elements to a
                design.
              </Text>
              <Rows spacing="1u">
                <Columns spacing="0" alignY="center">
                  <Column>
                    <Title size="small">Paths</Title>
                  </Column>
                  <Column width="content">
                    {paths.length < 7 && (
                      <Button
                        variant="tertiary"
                        icon={PlusIcon}
                        ariaLabel="Add a new path"
                        onClick={() => {
                          setState((prevState) => {
                            return {
                              ...prevState,
                              paths: [
                                ...prevState.paths,
                                {
                                  d: "",
                                  fill: {
                                    dropTarget: false,
                                    color: "#000000",
                                  },
                                },
                              ],
                            };
                          });
                        }}
                      />
                    )}
                  </Column>
                </Columns>
                {paths.map((path, outerIndex) => {
                  return (
                    <Rows spacing="2u" key={outerIndex}>
                      <FormField
                        label="Line commands"
                        value={path.d}
                        control={(props) => (
                          <MultilineInput
                            {...props}
                            onChange={(value) => {
                              setState((prevState) => {
                                return {
                                  ...prevState,
                                  paths: prevState.paths.map((path, innerIndex) => {
                                    if (outerIndex === innerIndex) {
                                      return {
                                        ...path,
                                        d: value,
                                      };
                                    }
                                    return path;
                                  }),
                                };
                              });
                            }}
                          />
                        )}
                      />
                      <FormField
                        label="Color"
                        control={() => (
                          <ColorSelector
                            color={path.fill.color}
                            onChange={(value) => {
                              setState((prevState) => {
                                return {
                                  ...prevState,
                                  paths: prevState.paths.map((path, innerIndex) => {
                                    if (outerIndex === innerIndex) {
                                      return {
                                        ...path,
                                        fill: {
                                          ...path.fill,
                                          color: value,
                                        },
                                      };
                                    }
                                    return path;
                                  }),
                                };
                              });
                            }}
                          />
                        )}
                      />
                    </Rows>
                  );
                })}
              </Rows>
            </Rows>
            <Rows spacing="2u">
              <Title size="small">Viewbox</Title>
              <FormField
                label="Width"
                value={viewBox.width}
                control={(props) => (
                  <NumberInput
                    {...props}
                    min={1}
                    onChange={(value) => {
                      setState((prevState) => {
                        return {
                          ...prevState,
                          viewBox: {
                            ...prevState.viewBox,
                            width: Number(value || 0),
                          },
                        };
                      });
                    }}
                  />
                )}
              />
              <FormField
                label="Height"
                value={viewBox.height}
                control={(props) => (
                  <NumberInput
                    {...props}
                    min={1}
                    onChange={(value) => {
                      setState((prevState) => {
                        return {
                          ...prevState,
                          viewBox: {
                            ...prevState.viewBox,
                            height: Number(value || 0),
                          },
                        };
                      });
                    }}
                  />
                )}
              />
              <FormField
                label="Top"
                value={viewBox.top}
                control={(props) => (
                  <NumberInput
                    {...props}
                    min={0}
                    onChange={(value) => {
                      setState((prevState) => {
                        return {
                          ...prevState,
                          viewBox: {
                            ...prevState.viewBox,
                            top: Number(value || 0),
                          },
                        };
                      });
                    }}
                  />
                )}
              />
              <FormField
                label="Left"
                value={viewBox.left}
                control={(props) => (
                  <NumberInput
                    {...props}
                    min={0}
                    onChange={(value) => {
                      setState((prevState) => {
                        return {
                          ...prevState,
                          viewBox: {
                            ...prevState.viewBox,
                            left: Number(value || 0),
                          },
                        };
                      });
                    }}
                  />
                )}
              />
            </Rows>
            <Rows spacing="1u">
              <Button
                variant="secondary"
                onClick={() => {
                  setState(initialState);
                }}
                stretch
              >
                Reset
              </Button>
              <Button
                variant="primary"
                onClick={() => {
                  addElementAtPoint({
                    type: "shape",
                    paths,
                    viewBox,
                  });
                }}
                // Shape elements are not supported in certain design types such as docs
                disabled={disabled || !isRequiredFeatureSupported}
                stretch
              >
                Add element
              </Button>
            </Rows>
            {!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
    # Shape elements

    Demonstrates how to create custom vector shape elements using SVG path data. Shows shape creation, color customization, multiple path support, and viewBox configuration for building custom graphics.

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

    Related examples: See design_elements/shape_elements_with_asset for image-filled shapes, or app_shape_elements for shapes within app elements.

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

    - Path validation and error handling is simplified for demonstration. Production apps must validate SVG paths and handle malformed path data gracefully
    - 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)