Examples
App elements
Assets and media
Fundamentals
Intents
Design interaction
Drag and drop
Design elements
Localization
Content replacement
Richtext elements
Add rich text elements with formatting 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 richtext_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 { Button, Rows, Text } from "@canva/app-ui-kit";import { createRichtextRange } from "@canva/design";import type { TextRegion } from "@canva/design";import * as styles from "styles/components.css";import { useEffect, useState } from "react";import { useAddElement } from "utils/use_add_element";let richtext = createRichtextRange();export const App = () => {const [regions, setRegions] = useState<TextRegion[]>([]);const addElement = useAddElement();useEffect(() => {reset();}, []);const reset = () => {richtext = createRichtextRange();richtext.appendText("This is an example richtext.\nUsing the RichtextRange API, individual parts of the text can be formatted.",);setRegions(richtext.readTextRegions());};const formatText = () => {richtext.formatText({ index: 0, length: 4 },{color: "#ff0000",fontStyle: "italic",},);setRegions(richtext.readTextRegions());};const formatParagraph = () => {richtext.formatParagraph({index: "This is an example richtext.\n".length,length: 1,},{fontSize: 40,textAlign: "end",},);setRegions(richtext.readTextRegions());};const replaceText = () => {richtext.replaceText({index: 0,length: 4,},richtext.readPlaintext().startsWith("This") ? "Here" : "This",);setRegions(richtext.readTextRegions());};const appendText = () => {richtext.appendText(" This is appended text.");setRegions(richtext.readTextRegions());};const addToDesign = async () => {await addElement({ type: "richtext", range: richtext });};return (<div className={styles.scrollContainer}><Rows spacing="2u"><Text>This example demonstrates how apps can add richtext.</Text><Regions regions={regions} /><Button variant="secondary" onClick={formatText}>Format first word</Button><Button variant="secondary" onClick={formatParagraph}>Format second paragraph</Button><Button variant="secondary" onClick={appendText}>Append text</Button><Button variant="secondary" onClick={replaceText}>Replace first word</Button><Button variant="secondary" onClick={reset}>Reset</Button><Button variant="primary" onClick={addToDesign}>Add richtext to design</Button></Rows></div>);};const Regions = ({ regions }: { regions: TextRegion[] }) => {return (<pre style={{ textWrap: "wrap", fontSize: 14 }}>{JSON.stringify(regions, null, 2)}</pre>);};
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 elementsDemonstrates how to create and format rich text elements using RichtextRange API. Shows text formatting, paragraph styling, and rich text manipulation for creating styled text content.For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/richtext-elements/.Related examples: See design_elements/text_elements for basic text insertion, or content_replacement/richtext_replacement for modifying existing rich text.NOTE: This example differs from what is expected for public apps to pass a Canva review:- Text content is hardcoded for demonstration purposes only. Production apps should provide user input interfaces or dynamic content loading- Text validation and formatting options are simplified for demonstration. Production apps should include proper text validation and comprehensive formatting options- 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)