Web SDK

Images

Images can be used to enrich document content, enhance visual expression, and help illustrate or highlight key information.

Text wrapping around an image

Switch layouts and follow the text beside and below the image.

Univer Docs

Univer Docs combines text, images, and page layout in an editable document. Use headings to organize ideas and images to explain details. The wrapping style controls how surrounding text flows. Choose a layout that keeps the reading order clear as the document changes.

Square wrapping lets text flow beside the rectangular image.

Plugin Mode

Installation

Shell
pnpm add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-ui

Usage

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsDrawingPlugin } from '@univerjs/docs-drawing'import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui'import DocsDrawingUIEnUS from '@univerjs/docs-drawing-ui/locale/en-US'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/docs-drawing-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DrawingUIEnUS,       DocsDrawingUIEnUS,     ),  },})univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverDocsDrawingPlugin)univer.registerPlugin(UniverDocsDrawingUIPlugin)

If you are using the Collaboration feature, you need to add the override configuration:

TypeScript
univer.registerPlugin(UniverDrawingPlugin, {  override: [[IImageIoService, null]], })

Mobile support

First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.

PackageDesktop registrationMobile registration
@univerjs/docs-drawing-uiUniverDocsDrawingUIPluginUniverDocsDrawingMobileUIPlugin
@univerjs/drawing-uiUniverDrawingUIPluginUniverDrawingMobileUIPlugin

Preset Mode

Installation

Shell
pnpm add @univerjs/preset-docs-drawing

Usage

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'import UniverPresetDocsDrawingEnUS from '@univerjs/preset-docs-drawing/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-drawing/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetDocsCoreEnUS,      UniverPresetDocsDrawingEnUS,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsDrawingPreset(),   ],})

If you are using the Collaboration feature, make sure to pass the collaboration: true option in UniverDocsDrawingPreset:

TypeScript
UniverDocsDrawingPreset({  collaboration: true, })

Facade API

In plugin mode, import the Facade extension first:

TypeScript
import '@univerjs/docs-drawing/facade'

Use FDocument to insert, query, and manage document images:

TypeScript
const document = univerAPI.getActiveDocument()const image = await document?.insertImage({  source: 'https://example.com/image.png',  imageSourceType: univerAPI.Enum.ImageSourceType.URL,  width: 320,  wrappingStyle: univerAPI.Enum.DocsImageWrappingStyle.INLINE,})document?.getImage(image?.getId() ?? '')document?.getImages()

The returned FDocumentImage can resize, rotate, reposition, rewrap, reorder, or remove the image.

How is this guide?

© 2026 DreamNum Co., Ltd.