---
title: "Images and shapes"
canonical_url: "https://www.nutrient.io/guides/document-authoring/editing-content/images-and-shapes/"
md_url: "https://www.nutrient.io/guides/document-authoring/editing-content/images-and-shapes.md"
last_updated: "2026-07-09T00:00:00.000Z"
description: "Find, resize, wrap, and restyle images and shapes in Document Authoring by reading inline elements from paragraphs, scaling images, and changing shape properties."
---

# Work with images and shapes

Images and shapes can appear in document content as inline or floating objects. They usually enter a document when you import a file, such as a DOCX file, or when a user pastes content.

As of [1.17.0](https://www.nutrient.io/guides/document-authoring/changelog.md#1.17.0), users can choose additional text wrapping options for images and shapes in the editor, including inline with text, square, in front of text, behind text, and top-and-bottom wrapping.

Inside a [transaction](https://www.nutrient.io/guides/document-authoring/editing-content/programmatic-editing.md), use a paragraph’s [inlines()](https://www.nutrient.io/api/document-authoring/types/programmatic/textview/#inlines) method to find image and shape inline elements. Then update their size or appearance.

The programmatic API works with images and shapes that already exist in the document. It resizes and restyles them, but it doesn’t create new images or shapes.

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](https://www.nutrient.io/sdk/document-authoring/getting-started.md) guide.

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

## Set text wrapping in the UI

Right-click an image or shape in the editor and choose **Text Wrapping** to control how text flows around it:

- **In Line with Text** — Places the object in the text flow as an inline element.

- **Square** — Floats the object with text wrapping around its bounding box.

- **In front of text** — Places the image or shape above the text layer.

- **Behind text** — Places the image or shape behind the text layer.

- **Top and bottom** — Keeps text above and below the object, with no text on its sides.

Use these options when authors need watermark-like objects, foreground callouts, or full-width figures that should interrupt text flow.

## Find inline elements programmatically

Use [`inlines()`](https://www.nutrient.io/api/document-authoring/types/programmatic/textview/#inlines) to return the segments of a text view. Each segment includes an `inline` object with a `type`, such as `text`, `image`, or `shape`. Check the type before you update the inline element:

```js

const currentDoc = editor.currentDocument();

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()) {
      console.log(inline.type); // 'text' | 'image' | 'shape' | …
    }
  }

  return false;
});

```

## Resize an image

An [`Image`](https://www.nutrient.io/api/document-authoring/types/programmatic/image/) exposes its display size through [`extent()`](https://www.nutrient.io/api/document-authoring/types/programmatic/image/#extent) and [`setExtent()`](https://www.nutrient.io/api/document-authoring/types/programmatic/image/#setextent). Width and height use points. Pass a partial extent to change one or both dimensions. This example scales every image to half size:

```js

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!== 'image') continue;

      const { width, height } = inline.extent();
      inline.setExtent({ width: width / 2, height: height / 2 });
    }
  }

  return true;
});

```

## Restyle a shape

A [`Shape`](https://www.nutrient.io/api/document-authoring/types/programmatic/shape/) exposes its geometry, size, fill, outline, and optional text body. Use these methods to update shape properties:

- [`setGeometry()`](https://www.nutrient.io/api/document-authoring/types/programmatic/shape/#setgeometry) — Sets the shape form, as a preset such as `roundRect` or `star5`.

- [`setExtent()`](https://www.nutrient.io/api/document-authoring/types/programmatic/image/#setextent) — Sets the width and height in points.

- [`setFill()`](https://www.nutrient.io/api/document-authoring/types/programmatic/shape/#setfill) — Sets a fill color, or `null` for no fill.

- [`setOutline()`](https://www.nutrient.io/api/document-authoring/types/programmatic/shape/#setoutline) — Sets an outline color and width, or `null` for no outline.

- [`ensureText()`](https://www.nutrient.io/api/document-authoring/types/programmatic/shape/#ensuretext) — Gets the shape text body, or creates one if needed.

```js

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!== 'shape') continue;

      inline.setGeometry({ type: 'preset', preset: 'roundRect' });
      inline.setExtent({ width: 180, height: 48 });
      inline.setFill({ color: '#E0F2FE' });

      inline.setOutline({ color: '#0284C7', width: 1 });

      const body = inline.ensureText();
      const [firstBlock] = body.blocklevels();

      if (firstBlock && firstBlock.type === 'paragraph') {
        firstBlock.asTextView().setText('Reviewed');
      } else {
        body.addParagraph().asTextView().setText('Reviewed');
      }
    }
  }

  return true;
});

```

The values passed to `setExtent({ width, height })` define the shape’s size in the document layout, not its exact onscreen pixel size. The rendered size in the editor can vary depending on zoom level, page scaling, browser rendering, text wrapping, grouping, and other document layout constraints. For example, setting `{ width: 180, height: 48 }` updates the shape’s document-level dimensions, but the shape may appear larger or smaller onscreen depending on how the page is rendered.

## Learn more

**[Text and formatting](https://www.nutrient.io/guides/document-authoring/editing-content/text-and-formatting.md)**\
Format text inside a shape.

**[Programmatic editing](https://www.nutrient.io/guides/document-authoring/editing-content/programmatic-editing.md)**\
Learn how transactions work and how to use the document model.
---

## Related pages

- [Use copy/paste and HTML interoperability](/guides/document-authoring/editing-content/copy-paste-and-html-interoperability.md)
- [Work with lists](/guides/document-authoring/editing-content/lists.md)
- [Find and replace text](/guides/document-authoring/editing-content/find-and-replace.md)
- [Work with footnotes and endnotes](/guides/document-authoring/editing-content/footnotes-and-endnotes.md)
- [Edit documents programmatically](/guides/document-authoring/editing-content/programmatic-editing.md)
- [Format text](/guides/document-authoring/editing-content/text-and-formatting.md)
- [Work with tables](/guides/document-authoring/editing-content/tables.md)