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.git
cd canva-apps-sdk-starter-kit

SHELL

Install dependencies:
```
npm install
```
SHELL
Run the example:
```
npm run start richtext_replacement
```
SHELL
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 { Button, Rows, Text } from "@canva/app-ui-kit";
import { useEffect, useState } from "react";
import type { SelectionEvent } from "@canva/design";
import { selection } from "@canva/design";
import * as styles from "styles/components.css";

export const App = () => {
  const [selectionState, setSelectionState] = useState<
    SelectionEvent<"richtext">
  >({
    count: 0,
    scope: "richtext",
    read: () =>
      Promise.resolve({
        contents: [],
        save: () => Promise.resolve(),
      }),
  });

  useEffect(() => {
    selection.registerOnChange({
      scope: "richtext",
      onChange: (evt) => {
        if (evt.count > 0) {
          setSelectionState(evt);
        }
      },
    });
  }, []);

  const updateFormatting = async () => {
    if (!selectionState) {
      return;
    }

    const draft = await selectionState.read();
    for (const richtext of draft.contents) {
      const regions = await richtext.readTextRegions();
      let index = 0;
      regions.forEach((region) => {
        richtext.formatText(
          { index, length: region.text.length },
          {
            fontWeight:
              region.formatting?.fontWeight === "bold" ? "normal" : "bold",
          },
        );
        index = index + region.text.length;
      });
    }
    await draft.save();
  };

  const appendText = async () => {
    if (!selectionState) {
      return;
    }

    const draft = await selectionState.read();
    draft.contents.forEach((richtext) => richtext.appendText("!"));
    await draft.save();
  };

  const replaceText = async () => {
    if (!selectionState) {
      return;
    }

    const draft = await selectionState.read();
    for (const richtext of draft.contents) {
      const plaintext = await richtext.readPlaintext();
      richtext.replaceText(
        { index: 0, length: plaintext.length },
        "Hello World",
        { decoration: "underline" },
      );
    }
    await draft.save();
  };

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>
          This example demonstrates how apps can replace the selected text.
          Select a text in the editor to begin.
        </Text>
        <Button
          variant="primary"
          onClick={updateFormatting}
          disabled={selectionState.count === 0}
        >
          Toggle boldness
        </Button>
        <Button
          variant="primary"
          onClick={appendText}
          disabled={selectionState.count === 0}
        >
          Append "!"
        </Button>
        <Button
          variant="primary"
          onClick={replaceText}
          disabled={selectionState.count === 0}
        >
          Replace with underlined "Hello World"
        </Button>
      </Rows>
    </div>
  );
};

TYPESCRIPT

import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";
import { AppUiProvider } from "@canva/app-ui-kit";

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

# Rich text replacement

Demonstrates how to replace and modify selected rich text elements including formatting changes like bold, italics, and other text properties. Shows advanced text selection and formatting manipulation.

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

Related examples: See content_replacement/text_replacement for plain text substitution, or design_elements/richtext_elements for rich text insertion.

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

- Text content and formatting operations are hardcoded for demonstration purposes only. Production apps should provide user input interfaces or dynamic content loading and comprehensive text editing capabilities
- Text formatting handling is simplified for demonstration. Production apps should handle complex formatting scenarios and preserve user styling where appropriate
- 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

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)