# Edit Text

Edit text content programmatically with range-based APIs for replacing, formatting, and querying text.

![Edit Text example showing styled text with mixed formatting](/docs/cesdk/_astro/browser.hero.DpxDU3sh_Z1UNEks.webp)

10 mins

estimated time

Live Demo[

Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[

StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-text-edit-browser)[

GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-text-edit-browser)

CE.SDK provides text editing through two approaches: interactive canvas editing where users type directly into text blocks, and programmatic editing through range-based APIs. This guide focuses on the programmatic approach, covering how to replace text, apply formatting to specific ranges, and query text properties.

```
import type { EditorPlugin, EditorPluginContext } from "@cesdk/cesdk-js";import packageJson from "./package.json";
/** * CE.SDK Plugin: Edit Text Guide * * Demonstrates text editing capabilities: * - Replacing and removing text content * - Applying formatting to text ranges * - Managing cursor position and selection * - Querying line information */class Example implements EditorPlugin {  name = packageJson.name;
  version = packageJson.version;
  async initialize({ cesdk }: EditorPluginContext): Promise<void> {    if (!cesdk) {      throw new Error("CE.SDK instance is required for this plugin");    }
    // Initialize CE.SDK with Design mode and load asset sources    await cesdk.addDefaultAssetSources();    await cesdk.addDemoAssetSources({      sceneMode: "Design",    });    await cesdk.createDesignScene();
    const engine = cesdk.engine;    const page = engine.block.findByType("page")[0];
    // Set page dimensions    engine.block.setWidth(page, 800);    engine.block.setHeight(page, 600);
    // Create a text block    const text = engine.block.create("text");    engine.block.appendChild(page, text);    engine.block.setPositionX(text, 50);    engine.block.setPositionY(text, 100);    engine.block.setWidthMode(text, "Auto");    engine.block.setHeightMode(text, "Auto");
    // Define a typeface with bold variant support    const typeface = {      name: "Roboto",      fonts: [        {          uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf",          subFamily: "Regular",        },        {          uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf",          subFamily: "Bold",          weight: "bold" as const,        },      ],    };
    // Set the font (required for bold weight support)    engine.block.setFont(text, typeface.fonts[0].uri, typeface);
    // Replace the entire text content    engine.block.replaceText(text, "Hello World!");
    // Replace "World" with "CE.SDK" (positions 6-11)    engine.block.replaceText(text, "CE.SDK", 6, 11);
    // Insert " Guide" before the exclamation mark (position 12)    engine.block.replaceText(text, " Guide", 12, 12);
    // Remove "Hello " to get "CE.SDK Guide!" (positions 0-6)    engine.block.removeText(text, 0, 6);
    // Apply bold formatting to "CE.SDK" (positions 0-6)    engine.block.setTextFontWeight(text, "bold", 0, 6);
    // Apply color to "Guide" (positions 7-12)    engine.block.setTextColor(text, { r: 0.2, g: 0.6, b: 1.0, a: 1.0 }, 7, 12);
    // Set font size for the entire block    engine.block.setTextFontSize(text, 240);
    // Query formatting properties    const colors = engine.block.getTextColors(text);    const weights = engine.block.getTextFontWeights(text);    const sizes = engine.block.getTextFontSizes(text);
    console.log("Text colors:", colors);    console.log("Font weights:", weights);    console.log("Font sizes:", sizes);
    // Query line information    const lineCount = engine.block.getTextVisibleLineCount(text);    console.log("Line count:", lineCount);
    if (lineCount > 0) {      const lineContent = engine.block.getTextVisibleLineContent(text, 0);      console.log("First line content:", lineContent);
      const lineBounds = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(        text,        0,      );      console.log("First line bounds:", lineBounds);    }
    // Enable auto-fit zoom to keep the page visible when resizing    engine.scene.zoomToBlock(page);    engine.scene.enableZoomAutoFit(page, "Both", 40, 40);
    // Select the text block to show it in the inspector    engine.block.select(text);  }}
export default Example;
```

This guide covers creating text blocks, replacing and removing text content, applying formatting to character ranges, and querying line information.

## Creating a Text Block[#](#creating-a-text-block)

We first create a text block and position it on the page. Text blocks support automatic sizing based on content using the `Auto` width and height modes.

```
// Create a text blockconst text = engine.block.create("text");engine.block.appendChild(page, text);engine.block.setPositionX(text, 50);engine.block.setPositionY(text, 100);engine.block.setWidthMode(text, "Auto");engine.block.setHeightMode(text, "Auto");
```

The text block is appended to the page and positioned with explicit X and Y coordinates. Setting width and height modes to `Auto` allows the block to resize based on its content.

## Setting a Typeface[#](#setting-a-typeface)

We define a typeface with font variants to enable formatting options like bold. The typeface must include variants for each weight or style you want to apply.

```
// Define a typeface with bold variant supportconst typeface = {  name: "Roboto",  fonts: [    {      uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Regular.ttf",      subFamily: "Regular",    },    {      uri: "https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Roboto/Roboto-Bold.ttf",      subFamily: "Bold",      weight: "bold" as const,    },  ],};
// Set the font (required for bold weight support)engine.block.setFont(text, typeface.fonts[0].uri, typeface);
```

The `setFont()` method sets the font and typeface for the text block. Once set, the block supports all formatting options defined in the typeface’s font variants.

## Replacing and Removing Text[#](#replacing-and-removing-text)

We modify text content using `engine.block.replaceText()` and `engine.block.removeText()`. Text positions use UTF-16 indices where `[from, to)` defines the range.

```
// Replace the entire text contentengine.block.replaceText(text, "Hello World!");
// Replace "World" with "CE.SDK" (positions 6-11)engine.block.replaceText(text, "CE.SDK", 6, 11);
// Insert " Guide" before the exclamation mark (position 12)engine.block.replaceText(text, " Guide", 12, 12);
```

The `replaceText()` method can replace all text (when no indices provided), insert at a position (when `from` equals `to`), or replace a range. Here we start with a full replacement, insert text, then replace a portion.

```
// Remove "Hello " to get "CE.SDK Guide!" (positions 0-6)engine.block.removeText(text, 0, 6);
```

The `removeText()` method deletes characters in the specified range. When we omit indices, operations apply to the entire text content.

## Applying Text Formatting[#](#applying-text-formatting)

We apply formatting to specific character ranges using setter methods. Each method accepts optional `from` and `to` parameters to target specific ranges.

```
// Apply bold formatting to "CE.SDK" (positions 0-6)engine.block.setTextFontWeight(text, "bold", 0, 6);
// Apply color to "Guide" (positions 7-12)engine.block.setTextColor(text, { r: 0.2, g: 0.6, b: 1.0, a: 1.0 }, 7, 12);
// Set font size for the entire blockengine.block.setTextFontSize(text, 240);
```

The `setTextFontWeight()` method applies bold or normal weight. The `setTextColor()` method accepts RGBA color objects. The `setTextFontSize()` method sets the font size in design units.

## Querying Text Properties[#](#querying-text-properties)

We retrieve formatting information using getter methods that return arrays of unique values found in the specified range.

```
// Query formatting propertiesconst colors = engine.block.getTextColors(text);const weights = engine.block.getTextFontWeights(text);const sizes = engine.block.getTextFontSizes(text);
console.log("Text colors:", colors);console.log("Font weights:", weights);console.log("Font sizes:", sizes);
```

The getter methods return arrays because text blocks can contain mixed formatting. For example, `getTextColors()` returns all unique colors applied within the queried range.

## Line Information[#](#line-information)

We query information about rendered text lines including count, content, and bounding boxes.

```
// Query line informationconst lineCount = engine.block.getTextVisibleLineCount(text);console.log("Line count:", lineCount);
if (lineCount > 0) {  const lineContent = engine.block.getTextVisibleLineContent(text, 0);  console.log("First line content:", lineContent);
  const lineBounds = engine.block.getTextVisibleLineGlobalBoundingBoxXYWH(    text,    0,  );  console.log("First line bounds:", lineBounds);}
```

The `getTextVisibleLineCount()` returns the number of rendered lines. For each line, `getTextVisibleLineContent()` returns the text content and `getTextVisibleLineGlobalBoundingBoxXYWH()` returns the bounding box in scene coordinates.

## Troubleshooting[#](#troubleshooting)

**Text not updating**: Verify the text block ID is valid using `engine.block.isValid()`.

**Range indices incorrect**: Remember indices are UTF-16 code units. Multi-byte characters (emojis, some Unicode) occupy multiple indices.

**Formatting not applied**: Check that the range `[from, to)` is valid and within the text length. Also ensure the typeface includes a font variant for the requested weight or style.

**Line count is zero**: Ensure the text block has content and is rendered. Empty text blocks return zero lines.

## API Reference[#](#api-reference)

| Method | Purpose |
| --- | --- |
| `engine.block.setFont()` | Set font and typeface for the text block |
| `engine.block.replaceText()` | Replace or insert text at specified indices |
| `engine.block.removeText()` | Remove text at specified indices |
| `engine.block.setTextColor()` | Set color for entire text or specific range |
| `engine.block.getTextColors()` | Get unique colors in text range |
| `engine.block.setTextFontWeight()` | Set font weight for text range |
| `engine.block.getTextFontWeights()` | Get unique font weights in range |
| `engine.block.setTextFontSize()` | Set font size for text range |
| `engine.block.getTextFontSizes()` | Get unique font sizes in range |
| `engine.block.getTextVisibleLineCount()` | Get number of rendered lines |
| `engine.block.getTextVisibleLineContent()` | Get text content of a specific line |
| `engine.block.getTextVisibleLineGlobalBoundingBoxXYWH()` | Get line bounds in scene coordinates |

---



[Source](https:/img.ly/docs/cesdk/vue/text/custom-fonts-9565b3)