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

# editContent

API reference for the editContent method.

Reads and edits content of the specified type from the user's design.

## Usage: Read richtext content

```typescript
import { editContent } from "@canva/design";

await editContent(
  { contentType: 'richtext', target: 'current_page' },
  async (session) => {
    // Do something with the richtext content, e.g. `session.contents`
  }
);
```

## Parameters

<Prop.List>
  <Prop name="options" required type="EditContentOptions" sourceLineNumbers={[3596]}>
    Options for configuring how a design is read.

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>options</strong></>}>
      <Prop.List>
        <Prop name="contentType" required type="string" sourceLineNumbers={[3613]}>
          The type of content to edit from the user's design

          The only valid value is `"richtext"`.
        </Prop>

        <Prop name="target" required type="string" sourceLineNumbers={[1361]}>
          The only valid value is `"current_page"`.
        </Prop>
      </Prop.List>
    </PillAccordion>
  </Prop>

  <Prop name="callback" required type="EditContentCallback" sourceLineNumbers={[3596]}>
    A callback for operating on the read content.

    **Parameters**

    <Prop.List>
      <Prop name="session" required type="RichtextContentSession" sourceLineNumbers={[3603]}>
        The result of reading the content in the design.

        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>session</strong></>}>
          <Prop.List>
            <Prop name="contents" required readonly type="RichtextContentRange[]" sourceLineNumbers={[5282]}>
              Richtext content in the design.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>contents</strong></>}>
                <Prop.List>
                  <Prop name="deleted" required readonly type="boolean" sourceLineNumbers={[5194]}>
                    Indicates whether the object containing this richtext range has been deleted.
                  </Prop>

                  <Prop name="formatParagraph" required type="function" sourceLineNumbers={[5456]}>
                    Formats all of the paragraphs that overlap the given bounds.

                    * The `\n` character indicates the end of a paragraph.
                    * All paragraphs that overlap the provided bounds will be formatted in their entirety.

                    **Parameters**

                    <Prop.List>
                      <Prop name="bounds" required type="Bounds" sourceLineNumbers={[5456]}>
                        The segment of the range on which to apply the formatting.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>bounds</strong></>}>
                          <Prop.List>
                            <Prop name="index" required type="number" sourceLineNumbers={[1096]}>
                              The starting position of the segment.

                              This is zero-based, meaning the first character of the range is at index 0.
                            </Prop>

                            <Prop name="length" required type="number" sourceLineNumbers={[1100]}>
                              The number of characters in the segment, starting from the index.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>

                      <Prop name="formatting" required type="RichtextFormatting" sourceLineNumbers={[5456]}>
                        The formatting to apply to the paragraph(s).

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>formatting</strong></>}>
                          <Prop.List>
                            <Prop name="color" type="string" sourceLineNumbers={[4436]}>
                              The color of the text as a hex code.

                              The hex code must include all six characters and be prefixed with a `#` symbol.

                              <Prop.Extras>
                                **Example**

                                ```ts
                                "#ff0099"
                                ```
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontWeight" type="FontWeight" sourceLineNumbers={[4445]}>
                              The weight (thickness) of the font.

                              The available font weights depend on the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"thin"`
                                * `"extralight"`
                                * `"light"`
                                * `"medium"`
                                * `"semibold"`
                                * `"bold"`
                                * `"ultrabold"`
                                * `"heavy"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontStyle" type="string" sourceLineNumbers={[4450]}>
                              The style of the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"italic"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="decoration" type="string" sourceLineNumbers={[4455]}>
                              The decoration of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"underline"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="strikethrough" type="string" sourceLineNumbers={[4460]}>
                              The strikethrough of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"strikethrough"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="link" type="string" sourceLineNumbers={[4464]}>
                              An external URL that the text links to.
                            </Prop>

                            <Prop name="fontRef" type="FontRef" sourceLineNumbers={[5353]}>
                              A unique identifier that points to a font asset in Canva's backend.
                            </Prop>

                            <Prop name="fontSize" type="number" sourceLineNumbers={[5362]}>
                              The size of the text, in pixels.

                              * In the Canva editor, this number is shown as points (pts), not pixels.

                              <Prop.Extras>
                                **Minimum**: `1`

                                **Maximum**: `1000`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="textAlign" type="string" sourceLineNumbers={[5367]}>
                              The alignment of the text.

                              <Prop.Extras>
                                **Default value**: `"start"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"start"`
                                * `"center"`
                                * `"end"`
                                * `"justify"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="listLevel" type="number" sourceLineNumbers={[5371]}>
                              The list indentation level of the paragraph.
                            </Prop>

                            <Prop name="listMarker" type="string" sourceLineNumbers={[5380]}>
                              The appearance of list item markers.

                              This property only has an effect if `listLevel` is greater than 0.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"disc"`
                                * `"circle"`
                                * `"square"`
                                * `"decimal"`
                                * `"lower-alpha"`
                                * `"lower-roman"`
                                * `"checked"`
                                * `"unchecked"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="lineHeightEm" type="number" sourceLineNumbers={[5390]}>
                              The line height of the paragraph, relative to the font size expressed in Em.

                              <Prop.Extras>
                                **Minimum**: `0.5`

                                **Maximum**: `2.5`

                                **Default value**: `1.4`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="letterSpacingEm" type="number" sourceLineNumbers={[5401]}>
                              The spacing between characters, relative to the font size expressed in Em.

                              * In the Canva editor, this number is shown as a multiple of 1000.

                              <Prop.Extras>
                                **Minimum**: `-0.2`

                                **Maximum**: `0.8`

                                **Default value**: `0`
                              </Prop.Extras>
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    `void`

                    <Prop.Extras>
                      **Examples**

                      **Format paragraph as a heading**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();

                      range.appendText("Heading Text\nRegular paragraph text.");

                      // Format just the first paragraph as a heading
                      range.formatParagraph(
                        { index: 0, length: 12 }, // Only need to include part of the paragraph
                        {
                          fontSize: 24,
                          fontWeight: 'bold',
                          textAlign: 'center'
                        }
                      );
                      ```

                      **Create a bulleted list**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      const text = "Item 1\nItem 2\nItem 3";
                      range.appendText(text);

                      // Format all paragraphs as a bulleted list
                      range.formatParagraph(
                        { index: 0, length: text.length },
                        {
                          listLevel: 1,
                          listMarker: 'disc'
                        }
                      );
                      ```
                    </Prop.Extras>
                  </Prop>

                  <Prop name="formatText" required type="function" sourceLineNumbers={[5498]}>
                    Formats a region of text with inline formatting properties.

                    **Parameters**

                    <Prop.List>
                      <Prop name="bounds" required type="Bounds" sourceLineNumbers={[5498]}>
                        The segment of the range on which to apply the formatting.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>bounds</strong></>}>
                          <Prop.List>
                            <Prop name="index" required type="number" sourceLineNumbers={[1096]}>
                              The starting position of the segment.

                              This is zero-based, meaning the first character of the range is at index 0.
                            </Prop>

                            <Prop name="length" required type="number" sourceLineNumbers={[1100]}>
                              The number of characters in the segment, starting from the index.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>

                      <Prop name="formatting" required type="InlineFormatting" sourceLineNumbers={[5498]}>
                        The formatting to apply to the text.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>formatting</strong></>}>
                          <Prop.List>
                            <Prop name="color" type="string" sourceLineNumbers={[4436]}>
                              The color of the text as a hex code.

                              The hex code must include all six characters and be prefixed with a `#` symbol.

                              <Prop.Extras>
                                **Example**

                                ```ts
                                "#ff0099"
                                ```
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontWeight" type="FontWeight" sourceLineNumbers={[4445]}>
                              The weight (thickness) of the font.

                              The available font weights depend on the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"thin"`
                                * `"extralight"`
                                * `"light"`
                                * `"medium"`
                                * `"semibold"`
                                * `"bold"`
                                * `"ultrabold"`
                                * `"heavy"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontStyle" type="string" sourceLineNumbers={[4450]}>
                              The style of the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"italic"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="decoration" type="string" sourceLineNumbers={[4455]}>
                              The decoration of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"underline"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="strikethrough" type="string" sourceLineNumbers={[4460]}>
                              The strikethrough of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"strikethrough"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="link" type="string" sourceLineNumbers={[4464]}>
                              An external URL that the text links to.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    `void`

                    <Prop.Extras>
                      **Examples**

                      **Format specific words in a paragraph**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("This text contains important information.");

                      // Format just the word "important"
                      range.formatText(
                        { index: 16, length: 9 },
                        {
                          fontWeight: 'bold',
                          color: '#FF0000'
                        }
                      );
                      ```

                      **Add a link to text**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("Visit our website for more information.");

                      // Add a link to "our website"
                      range.formatText(
                        { index: 6, length: 11 },
                        {
                          link: "https://www.example.com",
                          decoration: 'underline',
                          color: '#0066CC'
                        }
                      );
                      ```
                    </Prop.Extras>
                  </Prop>

                  <Prop name="appendText" required type="function" sourceLineNumbers={[5536]}>
                    Appends the specified characters to the end of the range.

                    **Parameters**

                    <Prop.List>
                      <Prop name="characters" required type="string" sourceLineNumbers={[5536]}>
                        The characters to append to the richtext range.
                      </Prop>

                      <Prop name="formatting" type="InlineFormatting" sourceLineNumbers={[5536]}>
                        Optional formatting to apply to the appended text.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>formatting</strong></>}>
                          <Prop.List>
                            <Prop name="color" type="string" sourceLineNumbers={[4436]}>
                              The color of the text as a hex code.

                              The hex code must include all six characters and be prefixed with a `#` symbol.

                              <Prop.Extras>
                                **Example**

                                ```ts
                                "#ff0099"
                                ```
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontWeight" type="FontWeight" sourceLineNumbers={[4445]}>
                              The weight (thickness) of the font.

                              The available font weights depend on the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"thin"`
                                * `"extralight"`
                                * `"light"`
                                * `"medium"`
                                * `"semibold"`
                                * `"bold"`
                                * `"ultrabold"`
                                * `"heavy"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontStyle" type="string" sourceLineNumbers={[4450]}>
                              The style of the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"italic"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="decoration" type="string" sourceLineNumbers={[4455]}>
                              The decoration of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"underline"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="strikethrough" type="string" sourceLineNumbers={[4460]}>
                              The strikethrough of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"strikethrough"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="link" type="string" sourceLineNumbers={[4464]}>
                              An external URL that the text links to.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    <Prop.List>
                      <Prop name="bounds" required type="Bounds" sourceLineNumbers={[5537]}>
                        A segment of a richtext range.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>bounds</strong></>}>
                          <Prop.List>
                            <Prop name="index" required type="number" sourceLineNumbers={[1096]}>
                              The starting position of the segment.

                              This is zero-based, meaning the first character of the range is at index 0.
                            </Prop>

                            <Prop name="length" required type="number" sourceLineNumbers={[1100]}>
                              The number of characters in the segment, starting from the index.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    <Prop.Extras>
                      **Examples**

                      **Append plain text**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("First paragraph. ");

                      // Append more text to the existing content
                      const result = range.appendText("This is additional text.");

                      // The bounds of the newly added text are returned
                      // Do something with the bounds - result.bounds, e.g. { index: 17, length: 24 }
                      ```

                      **Append formatted text**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("Normal text followed by ");

                      // Append formatted text
                      range.appendText("bold red text", {
                        fontWeight: 'bold',
                        color: '#FF0000'
                      });

                      // Append a new paragraph
                      range.appendText("\nThis is a new paragraph.");
                      ```
                    </Prop.Extras>
                  </Prop>

                  <Prop name="replaceText" required type="function" sourceLineNumbers={[5582]}>
                    Replaces a region of text with the specified characters.

                    **Parameters**

                    <Prop.List>
                      <Prop name="bounds" required type="Bounds" sourceLineNumbers={[5582]}>
                        The segment of the range to replace.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>bounds</strong></>}>
                          <Prop.List>
                            <Prop name="index" required type="number" sourceLineNumbers={[1096]}>
                              The starting position of the segment.

                              This is zero-based, meaning the first character of the range is at index 0.
                            </Prop>

                            <Prop name="length" required type="number" sourceLineNumbers={[1100]}>
                              The number of characters in the segment, starting from the index.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>

                      <Prop name="characters" required type="string" sourceLineNumbers={[5582]}>
                        The replacement characters.
                      </Prop>

                      <Prop name="formatting" type="InlineFormatting" sourceLineNumbers={[5582]}>
                        The formatting to apply to the replaced text.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>formatting</strong></>}>
                          <Prop.List>
                            <Prop name="color" type="string" sourceLineNumbers={[4436]}>
                              The color of the text as a hex code.

                              The hex code must include all six characters and be prefixed with a `#` symbol.

                              <Prop.Extras>
                                **Example**

                                ```ts
                                "#ff0099"
                                ```
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontWeight" type="FontWeight" sourceLineNumbers={[4445]}>
                              The weight (thickness) of the font.

                              The available font weights depend on the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"thin"`
                                * `"extralight"`
                                * `"light"`
                                * `"medium"`
                                * `"semibold"`
                                * `"bold"`
                                * `"ultrabold"`
                                * `"heavy"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontStyle" type="string" sourceLineNumbers={[4450]}>
                              The style of the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"italic"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="decoration" type="string" sourceLineNumbers={[4455]}>
                              The decoration of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"underline"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="strikethrough" type="string" sourceLineNumbers={[4460]}>
                              The strikethrough of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"strikethrough"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="link" type="string" sourceLineNumbers={[4464]}>
                              An external URL that the text links to.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    <Prop.List>
                      <Prop name="bounds" required type="Bounds" sourceLineNumbers={[5586]}>
                        The bounds of the replacement characters within the updated range.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>bounds</strong></>}>
                          <Prop.List>
                            <Prop name="index" required type="number" sourceLineNumbers={[1096]}>
                              The starting position of the segment.

                              This is zero-based, meaning the first character of the range is at index 0.
                            </Prop>

                            <Prop name="length" required type="number" sourceLineNumbers={[1100]}>
                              The number of characters in the segment, starting from the index.
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    <Prop.Extras>
                      **Examples**

                      **Replace text while maintaining some formatting**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("This text needs correction.");

                      // Replace "needs correction" with "is correct"
                      const result = range.replaceText(
                        { index: 10, length: 16 },
                        "is correct"
                      );

                      // The bounds of the replaced text are returned
                      // Do something with the bounds - result.bounds, e.g. { index: 10, length: 10 }
                      ```

                      **Replace text with formatted text**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("Regular text that needs emphasis.");

                      // Replace "needs emphasis" with formatted text
                      range.replaceText(
                        { index: 17, length: 15 },
                        "is important",
                        {
                          fontWeight: 'bold',
                          fontStyle: 'italic',
                          color: '#0066CC'
                        }
                      );
                      ```
                    </Prop.Extras>
                  </Prop>

                  <Prop name="readPlaintext" required type="function" sourceLineNumbers={[5625]}>
                    Returns the current state of the richtext as plaintext.

                    **Returns**

                    `string`

                    <Prop.Extras>
                      **Examples**

                      **Extract plain text content**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("First paragraph.\n", { fontWeight: 'bold' });
                      range.appendText("Second paragraph with formatting.", { color: '#FF0000' });

                      // Get plain text content without formatting
                      const plainText = range.readPlaintext();
                      // Do something with the plain text - plainText, e.g. "First paragraph.\nSecond paragraph with formatting."
                      ```

                      **Search within text content**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("This text contains a searchable term.");

                      // Search for a specific word
                      const plainText = range.readPlaintext();
                      const searchTerm = "searchable";
                      const index = plainText.indexOf(searchTerm);

                      if (index !== -1) {
                        // Format the found term
                        range.formatText(
                          { index, length: searchTerm.length },
                          { fontWeight: 'bold', decoration: 'underline' }
                        );
                      }
                      ```
                    </Prop.Extras>
                  </Prop>

                  <Prop name="readTextRegions" required type="function" sourceLineNumbers={[5672]}>
                    Returns the current state of the richtext as one or more text regions.
                    Each region is an object that contains the text content and its formatting.

                    **Returns**

                    <Prop.List>
                      <Prop name="text" required type="string" sourceLineNumbers={[6216]}>
                        The plaintext content of the region.
                      </Prop>

                      <Prop name="formatting" type="Partial<RichtextFormatting>" sourceLineNumbers={[6220]}>
                        The formatting of the region.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>formatting</strong></>}>
                          <Prop.List>
                            <Prop name="color" type="string" sourceLineNumbers={[4436]}>
                              The color of the text as a hex code.

                              The hex code must include all six characters and be prefixed with a `#` symbol.

                              <Prop.Extras>
                                **Example**

                                ```ts
                                "#ff0099"
                                ```
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontWeight" type="FontWeight" sourceLineNumbers={[4445]}>
                              The weight (thickness) of the font.

                              The available font weights depend on the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"thin"`
                                * `"extralight"`
                                * `"light"`
                                * `"medium"`
                                * `"semibold"`
                                * `"bold"`
                                * `"ultrabold"`
                                * `"heavy"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="fontStyle" type="string" sourceLineNumbers={[4450]}>
                              The style of the font.

                              <Prop.Extras>
                                **Default value**: `"normal"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"normal"`
                                * `"italic"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="decoration" type="string" sourceLineNumbers={[4455]}>
                              The decoration of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"underline"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="strikethrough" type="string" sourceLineNumbers={[4460]}>
                              The strikethrough of the text.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"strikethrough"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="link" type="string" sourceLineNumbers={[4464]}>
                              An external URL that the text links to.
                            </Prop>

                            <Prop name="fontRef" type="FontRef" sourceLineNumbers={[5353]}>
                              A unique identifier that points to a font asset in Canva's backend.
                            </Prop>

                            <Prop name="fontSize" type="number" sourceLineNumbers={[5362]}>
                              The size of the text, in pixels.

                              * In the Canva editor, this number is shown as points (pts), not pixels.

                              <Prop.Extras>
                                **Minimum**: `1`

                                **Maximum**: `1000`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="textAlign" type="string" sourceLineNumbers={[5367]}>
                              The alignment of the text.

                              <Prop.Extras>
                                **Default value**: `"start"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"start"`
                                * `"center"`
                                * `"end"`
                                * `"justify"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="listLevel" type="number" sourceLineNumbers={[5371]}>
                              The list indentation level of the paragraph.
                            </Prop>

                            <Prop name="listMarker" type="string" sourceLineNumbers={[5380]}>
                              The appearance of list item markers.

                              This property only has an effect if `listLevel` is greater than 0.

                              <Prop.Extras>
                                **Default value**: `"none"`
                              </Prop.Extras>

                              <Prop.Extras>
                                **Available values**:

                                * `"none"`
                                * `"disc"`
                                * `"circle"`
                                * `"square"`
                                * `"decimal"`
                                * `"lower-alpha"`
                                * `"lower-roman"`
                                * `"checked"`
                                * `"unchecked"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="lineHeightEm" type="number" sourceLineNumbers={[5390]}>
                              The line height of the paragraph, relative to the font size expressed in Em.

                              <Prop.Extras>
                                **Minimum**: `0.5`

                                **Maximum**: `2.5`

                                **Default value**: `1.4`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="letterSpacingEm" type="number" sourceLineNumbers={[5401]}>
                              The spacing between characters, relative to the font size expressed in Em.

                              * In the Canva editor, this number is shown as a multiple of 1000.

                              <Prop.Extras>
                                **Minimum**: `-0.2`

                                **Maximum**: `0.8`

                                **Default value**: `0`
                              </Prop.Extras>
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    <Prop.Extras>
                      **Examples**

                      **Get text with formatting information**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("Normal text ", {});
                      range.appendText("bold text", { fontWeight: 'bold' });
                      range.appendText(" and ", {});
                      range.appendText("red text", { color: '#FF0000' });

                      // Get formatted regions
                      const regions = range.readTextRegions();
                      // Do something with the regions, e.g.
                      // [
                      //   { text: "Normal text ", formatting: {} },
                      //   { text: "bold text", formatting: { fontWeight: 'bold' } },
                      //   { text: " and ", formatting: {} },
                      //   { text: "red text", formatting: { color: '#FF0000' } }
                      // ]
                      ```

                      **Analyze formatting variations**

                      ```typescript
                      import { createRichtextRange } from "@canva/design";

                      const range = createRichtextRange();
                      range.appendText("Mixed ", {});
                      range.appendText("formatted ", { fontWeight: 'bold' });
                      range.appendText("text", { color: '#0066CC' });

                      // Analyze formatting variations
                      const regions = range.readTextRegions();
                      const formattingTypes = regions.map(region => {
                        const formatting = region.formatting || {};
                        return {
                          text: region.text,
                          hasWeight: !!formatting.fontWeight,
                          hasColor: !!formatting.color
                        };
                      });
                      ```
                    </Prop.Extras>
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>

            <Prop name="sync" required type="function" sourceLineNumbers={[5314]}>
              Saves any changes made during the session while keeping the transaction open.

              * Any changes in the session are only reflected in the design after this method is called.
              * Once this method is called, further changes in the session can still be made.

              **Returns**

              `Promise<void>`

              <Prop.Extras>
                **Example: Sync changes after modifying content**

                ```typescript
                import { editContent } from "@canva/design";

                await editContent(
                  { contentType: 'richtext', target: 'current_page' },
                  async (session) => {
                    if (session.contents.length > 0) {
                      const range = session.contents[0];

                      // Make modifications to the content
                      range.appendText(" - Modified by app");

                      try {
                        // Save changes back to the design
                        await session.sync();
                      } catch (error) {
                        console.error('Failed to sync changes:', error);
                      }
                    }
                  }
                );
                ```
              </Prop.Extras>
            </Prop>
          </Prop.List>
        </PillAccordion>
      </Prop>
    </Prop.List>

    **Returns**

    `void` or `Promise<void>`
  </Prop>
</Prop.List>

## Returns

`Promise<void>`

## Permissions

To use this method, the following permissions must be enabled for the app:

* `canva:design:content:read`, to read the content
* `canva:design:content:write`, if the app calls the `sync` method

To learn more, see [Permissions](https://www.canva.dev/docs/apps/configuring-intents-permissions/).

## Rate limit

This method has the following rate limits:

* Reading content: 10 requests every 10 seconds
* Calling the `sync` method: 10 requests every 10 seconds