Shapes and Text

Slides uses the shared Shape engine for editable shapes, connectors, and shape text. FSlide.insertShape() returns a shape Facade backed by the Slides command pipeline.

Insert a shape

TypeScript
const slide = univerAPI.getActivePresentation()?.getActiveSlide()if (!slide) {  throw new Error('No active slide')}const shape = slide.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,  transform: { left: 80, top: 64, width: 320, height: 120 },  visible: true,  selectable: true,  shapeData: {    fill: {      fillType: univerAPI.Enum.ShapeFillEnum.SolidFill,      color: '#dbeafe',    },  },})

insertShape() can return null when the Shape host adapter is unavailable or the input cannot be created. Register the Shape dependencies used by the Slides setup before inserting shapes.

Add rich text

TypeScript
if (shape) {  const richText = univerAPI.newRichText()    .text('Quarterly ')    .bold('review')  shape.getText()    .setRichText(richText)    .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)    .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)}

Use slide.getShape(id) or slide.getShapes() to retrieve shape Facades. Common element methods update position, size, visibility, name, and description; slide.deleteElement(shape) removes the shape.

Edit shape text

Use the shape returned by insertShape() below or in the preceding example. getText() returns a live FShapeText handle. Read plain text with getPlainText(), replace the entire text with setText(), and format it with font, color and alignment methods.

TypeScript
if (!shape) throw new Error('Shape is not available')const shapeText = shape.getText()console.log(shapeText.getPlainText())shapeText  .setText('Quarterly review')  .setFontSize(18)  .setColor('#2563eb')  .setBold(true)  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)  .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)

setText() replaces the existing text; use setRichText() when you need multiple styles in one shape. To modify existing rich text, call getRichText()?.copy(), edit the builder, then pass it to setRichText(). Changes to that detached builder are not applied automatically. See text style and text box padding and layout for more options.

TypeScript
const richText = univerAPI.newRichText()  .text('Quarterly ')  .bold('review')shapeText.setRichText(richText)

Shape format painter

Select a shape, activate the format painter, then select the target shape. It copies fill, stroke, effects, and supported text formatting while keeping the target’s identity, geometry, text content, and formula bindings. Clear formatting restores insertion defaults. SmartArt is excluded. The corresponding shape UI plugin registers this behavior automatically.

How is this guide?

© 2026 DreamNum Co., Ltd.