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

# Text elements

Create and style text elements in 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 text_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 {
      Button,
      ColorSelector,
      FormField,
      Rows,
      Select,
      Text,
      TextInput,
      Title,
    } from "@canva/app-ui-kit";
    // FontWeight and TextAttributes are Canva's type definitions for text styling
    import {
      addElementAtCursor,
      addElementAtPoint,
      type FontWeight,
      type TextAttributes,
    } from "@canva/design";
    import { useCallback, useState } from "react";
    import * as styles from "styles/components.css";
    import { useFeatureSupport } from "@canva/app-hooks";

    // UI state matches the properties accepted by Canva's text element API
    type UIState = {
      text: string;
      color: string;
      fontWeight: FontWeight;
      fontStyle: TextAttributes["fontStyle"];
      decoration: TextAttributes["decoration"];
      textAlign: TextAttributes["textAlign"];
    };

    const initialState: UIState = {
      text: "Hello world",
      color: "#ff0099",
      fontWeight: "normal",
      fontStyle: "normal",
      decoration: "none",
      textAlign: "start",
    };

    export const App = () => {
      const [state, setState] = useState<UIState>(initialState);
      // Custom hook that provides addElement function, which uses Canva's addElementAtPoint or addElementAtCursor APIs
      const isSupported = useFeatureSupport();
      const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
        isSupported(fn),
      );

      const { text, color, fontWeight, fontStyle, decoration, textAlign } = state;
      const disabled = text.trim().length < 1 || color.trim().length < 1;

      // Creates a text element in the Canva design using the configured styling options
      const addText = useCallback(async () => {
        if (!addElement) {
          return;
        }

        await addElement({
          type: "text", // Specifies this is a native Canva text element
          ...state,
          children: [state.text], // Text content is passed as children array
        });
      }, [state, addElement]);

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="2u">
            <Text>
              This example demonstrates how apps can add text elements to design.
            </Text>
            <FormField
              label="Text"
              value={text}
              control={(props) => (
                <TextInput
                  {...props}
                  onChange={(value) => {
                    setState((prevState) => {
                      return {
                        ...prevState,
                        text: value,
                      };
                    });
                  }}
                />
              )}
            />
            <Title size="small">Custom options</Title>
            <FormField
              label="Color"
              control={() => (
                // ColorSelector provides Canva's native color picker interface
                <ColorSelector
                  color={color}
                  onChange={(value) => {
                    setState((prevState) => {
                      return {
                        ...prevState,
                        color: value,
                      };
                    });
                  }}
                />
              )}
            />
            <FormField
              label="Font style"
              value={fontStyle}
              control={(props) => (
                <Select<TextAttributes["fontStyle"]>
                  {...props}
                  stretch
                  onChange={(style) => {
                    setState((prevState) => {
                      return {
                        ...prevState,
                        fontStyle: style,
                      };
                    });
                  }}
                  options={[
                    { value: "normal", label: "Normal" },
                    { value: "italic", label: "Italic" },
                  ]}
                />
              )}
            />
            <FormField
              label="Font weight"
              value={fontWeight}
              control={(props) => (
                <Select<FontWeight>
                  {...props}
                  stretch
                  onChange={(fontWeight) => {
                    setState((prevState) => {
                      return {
                        ...prevState,
                        fontWeight,
                      };
                    });
                  }}
                  options={[
                    { value: "normal", label: "Normal" },
                    { value: "thin", label: "Thin" },
                    { value: "extralight", label: "Extra light" },
                    { value: "light", label: "Light" },
                    { value: "medium", label: "Medium" },
                    { value: "semibold", label: "Semibold" },
                    { value: "bold", label: "Bold" },
                    { value: "heavy", label: "Heavy" },
                  ]}
                />
              )}
            />
            <FormField
              label="Decoration"
              value={decoration}
              control={(props) => (
                <Select<TextAttributes["decoration"]>
                  {...props}
                  stretch
                  onChange={(decoration) => {
                    setState((prevState) => {
                      return {
                        ...prevState,
                        decoration,
                      };
                    });
                  }}
                  options={[
                    { value: "none", label: "None" },
                    { value: "underline", label: "Underline" },
                  ]}
                />
              )}
            />
            <FormField
              label="Text align"
              value={textAlign}
              control={(props) => (
                <Select<TextAttributes["textAlign"]>
                  {...props}
                  stretch
                  onChange={(textAlign) => {
                    setState((prevState) => {
                      return {
                        ...prevState,
                        textAlign,
                      };
                    });
                  }}
                  options={[
                    { value: "start", label: "Start" },
                    { value: "center", label: "Center" },
                    { value: "end", label: "End" },
                  ]}
                />
              )}
            />
            <Button
              variant="primary"
              onClick={addText}
              disabled={disabled || !addElement}
              tooltipLabel={
                !addElement
                  ? "This feature is not supported in the current page"
                  : undefined
              }
              stretch
            >
              Add element
            </Button>
          </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
    # Text elements

    Demonstrates how to create basic text elements with styling controls including color, font weight, style, decoration, and alignment. Shows fundamental text insertion and formatting patterns.

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

    Related examples: See design_elements/richtext_elements for advanced text formatting, or app_text_elements for text within app elements.

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

    - Text content and styling are hardcoded for demonstration purposes only. Production apps should provide comprehensive text editing interfaces or dynamic content loading
    - Font validation and fallback handling is not implemented. Production apps must validate fonts and provide fallback options
    - 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
    - Accessibility features are simplified for demonstration. Production apps must meet WCAG 2.0 AA standards
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`addElementAtCursor`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-cursor/)
* [`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)