This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/document-authoring/editing-content/text-and-formatting.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Text and formatting

Format text

Markdown version of this page, suitable for AI agents and automation

Text in a document lives in a paragraph’s text view. Inside a transaction, use setFormatting() to apply character formatting to a whole paragraph or a specific range.

Character formatting includes font, size, color, highlight, bold, italic, and underline.

Before you start, make sure the Document Authoring library is installed and running in your app. If you haven’t set it up yet, refer to the getting started guide.

The examples omit error handling. Add it before you use this code in production.

Formatting properties

setFormatting() accepts a partial Formatting object. Every field is optional, so set only the fields you want to change:

  • font — Font family name.
  • fontSize — Size in points.
  • bold, italic, underline, strikeout — Boolean values.
  • color — Text color as a hex string.
  • highlight — Highlight color as a hex string.

Format a whole paragraph

Call setFormatting() without a range to format every character in the text view:

const currentDoc = editor.currentDocument();


await currentDoc.transaction(async ({ draft }) => {
  const paragraph = draft.body().content().addParagraph();
  const textView = paragraph.asTextView();


  textView.setText('Quarterly results');
  textView.setFormatting({ bold: true, fontSize: 14, color: '#1D4ED8' });


  return true;
});

Format part of a paragraph

Pass a Range to format part of a paragraph. Get a range from setText(), which returns the range of the text it wrote, or from searchText():

await currentDoc.transaction(async ({ draft }) => {
  const paragraph = draft.body().content().addParagraph();
  const textView = paragraph.asTextView();


  textView.setText('This wording is final and approved.');


  const match = textView.searchText('final and approved');


  if (match) {
    textView.setFormatting({ italic: true, highlight: '#FEF08A' }, match.range);
  }


  return true;
});

Add and format text

setText() returns the range it wrote, so you can format text after adding it:

await currentDoc.transaction(async ({ draft }) => {
  const textView = draft.body().content().addParagraph().asTextView();


  const range = textView.setText('Heads up');
  textView.setFormatting({ bold: true, color: '#B91C1C' }, range);


  return true;
});

To append text within the same paragraph instead of replacing it, use addInlineText(), which also returns a range you can format.

Read existing formatting

A text view contains inline segments. Each segment has uniform formatting. Use inlines() to read those segments. This example finds bold segments:

await currentDoc.transaction(async ({ draft }) => {
  for (const blockLevel of draft.body().content().blocklevels()) {
    if (blockLevel.type !== 'paragraph') continue;


    for (const { inline } of blockLevel.asTextView().inlines()) {
      if (inline.type !== 'text') continue;


      if (inline.formatting().bold) {
        console.log(`Bold: ${inline.plainText()}`);
      }
    }
  }


  return false;
});

Set paragraph styles and properties

Use setFormatting() for character-level formatting. For paragraph-level styling, use setParagraphProperties() to set built-in styles, alignment, spacing, indentation, tab stops, borders, and shading:

const currentDoc = editor.currentDocument();


await currentDoc.transaction(async ({ draft }) => {
  const paragraph = draft.body().content().addParagraph();


  paragraph.asTextView().setText('Styled paragraph');
  paragraph.setParagraphProperties({
    styleId: 'Heading 2',
    alignment: 'center',
    spaceBefore: 12,
    spaceAfter: 6,
    indentation: {
      left: 24,
      right: 24,
      firstLineShift: null,
    },
    shading: {
      fill: '#F3F4F6',
    },
  });


  return true;
});

Pass { clear: true } as the second argument to clear existing direct paragraph properties before applying new ones:

paragraph.setParagraphProperties(
  {
    alignment: 'left',
    styleId: 'Normal',
  },
  { clear: true },
);

For bullet and numbered lists, refer to the lists guide.

Learn more

Find and replace
Reformat matched text in bulk while replacing it.

Programmatic editing
Learn how transactions work and how to use paragraph properties and the document model.