Examples
App elements
Assets and media
Fundamentals
Intents
Design interaction
Drag and drop
Design elements
Localization
Content replacement
Shape elements
Add geometric shape elements to designs.
Running this example
To run this example locally:
-
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.
-
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
. -
Clone the starter kit:
git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.gitcd canva-apps-sdk-starter-kitSHELL -
Install dependencies:
npm installSHELL -
Run the example:
npm run start shape_elementsSHELL -
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 {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";import { useFeatureSupport } from "utils/use_feature_support";type UIState = {paths: {d: string;fill: {dropTarget: boolean;color: string;};}[];viewBox: {width: number;height: number;top: number;left: number;};};const initialState: UIState = {paths: [{d: "M 0 0 H 100 V 100 H 0 L 0 0",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();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 adesign.</Text><Rows spacing="1u"><Columns spacing="0" alignY="center"><Column><Title size="small">Paths</Title></Column><Column width="content">{paths.length < 7 && (<Buttonvariant="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}><FormFieldlabel="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;}),};});}}/>)}/><FormFieldlabel="Color"control={() => (<ColorSelectorcolor={paths[outerIndex].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><FormFieldlabel="Width"value={viewBox.width}control={(props) => (<NumberInput{...props}min={1}onChange={(value) => {setState((prevState) => {return {...prevState,viewBox: {...prevState.viewBox,width: Number(value || 0),},};});}}/>)}/><FormFieldlabel="Height"value={viewBox.height}control={(props) => (<NumberInput{...props}min={1}onChange={(value) => {setState((prevState) => {return {...prevState,viewBox: {...prevState.viewBox,height: Number(value || 0),},};});}}/>)}/><FormFieldlabel="Top"value={viewBox.top}control={(props) => (<NumberInput{...props}min={0}onChange={(value) => {setState((prevState) => {return {...prevState,viewBox: {...prevState.viewBox,top: Number(value || 0),},};});}}/>)}/><FormFieldlabel="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"><Buttonvariant="secondary"onClick={() => {setState(initialState);}}stretch>Reset</Button><Buttonvariant="primary"onClick={() => {addElementAtPoint({type: "shape",paths,viewBox,});}}// ShapeElement is 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>);
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
# Shape elementsDemonstrates 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
MARKDOWN
API Reference
Need Help?
- Join our Community Forum(opens in a new tab or window)
- Report issues with this example on GitHub(opens in a new tab or window)