# Slides

- Human documentation: [https://docs.univer.ai/reference/facade/slides](https://docs.univer.ai/reference/facade/slides)

- Agent Markdown: [https://docs.univer.ai/reference/facade/slides.md](https://docs.univer.ai/reference/facade/slides.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [facade/slides.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/slides.mdx)

---

| Packages | `@univerjs-pro/slides`, `@univerjs-pro/slides-thread-comment` |
| -------- | ------------------------------------------------------------- |

Facade APIs for presentations, slides, shared Shapes, images, and groups.

```ts
import '@univerjs-pro/slides/facade'
```

## Unit access

```typescript
createPresentation(data?: Partial<ISlideData>, options?: ICreateUnitOptions): FPresentation
getActivePresentation(): FPresentation | null
getPresentation(id: string): FPresentation | null
getSlideCommandTarget(params?: { unitId?: string; subUnitId?: string; slideId?: string }): { presentation: FPresentation; slide: FSlide; unitId: string; subUnitId: string } | null
```

## Permissions

Presentations expose unit-level Edit, Copy, Export, and Comment points. Slides, page elements, master views, and master elements expose effective object-level edit permissions.

```typescript
import { UnitAction } from '@univerjs/protocol'

const presentation = univerAPI.getActivePresentation()
const slide = presentation?.getSlideByIndex(0)
const element = slide?.getElements()[0]

if (presentation) await presentation.getPermission().setPoint(UnitAction.Copy, false)
await slide?.getPermission().setReadOnly()
await element?.getPermission().setEditable()
```

An object's `canEdit()` still honors the presentation and parent-object permission ceilings.

## Thread comments

Import `@univerjs-pro/slides-thread-comment/facade` for slide-position and element anchors:

```typescript
import '@univerjs-pro/slides-thread-comment/facade'

if (slide) {
  await slide.createPositionCommentAsync({ x: 0.5, y: 0.25 }, 'Review this area.')
  const element = slide.getElements()[0]
  if (element) await element.createCommentAsync('Verify this element.')
}
```

`FSlide` exposes `getComments()` and `listCommentsAsync()` for the whole page, plus element-scoped query methods. `FPageElement` exposes comment creation and query methods for itself.

## FPresentation

| Category          | Methods                                                                                                                                      |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Identity and data | `getId`, `getName`, `setName`, `getPresentation`, `save`                                                                                     |
| Page size         | `getPageSize`, `setPageSize`                                                                                                                 |
| Master graphics   | `getPresentationBackgroundGraphics`, `setPresentationBackgroundGraphics`, `clearPresentationBackgroundGraphics`                              |
| Transitions       | `applyTransitionToAll`                                                                                                                       |
| Slides            | `getSlides`, `getSlideById`, `getSlideByIndex`, `getActiveSlide`, `setActiveSlide`, `appendSlide`, `insertSlide`, `moveSlide`, `deleteSlide` |

```typescript
getId(): string
getName(): string
setName(name: string): this
getPresentation(): SlideModel
save(): ISlideData
getPageSize(): ISlidePageSize
setPageSize(pageSize: Partial<ISlidePageSize>): this
getPresentationBackgroundGraphics(masterPageId?: string): ISlidePresentationBackgroundGraphic[]
setPresentationBackgroundGraphics(graphics: ISlidePresentationBackgroundGraphic[], options?: ISetPresentationBackgroundGraphicsOptions): this
clearPresentationBackgroundGraphics(options?: ISetPresentationBackgroundGraphicsOptions): this
applyTransitionToAll(transition: ISlideTransition): this
getSlides(): FSlide[]
getSlideById(id: string): FSlide | null
getSlideByIndex(index: number): FSlide | null
getActiveSlide(): FSlide | null
setActiveSlide(slide: FSlide): this
appendSlide(options?: Partial<ISlidePage>): FSlide
insertSlide(index: number, options?: Partial<ISlidePage>): FSlide
moveSlide(slide: FSlide, toIndex: number): boolean
deleteSlide(slide: FSlide): boolean
```

## FSlide

| Category             | Methods                                                                                                    |
| -------------------- | ---------------------------------------------------------------------------------------------------------- |
| Identity and data    | `getId`, `getName`, `getData`, `getSlide`                                                                  |
| Notes and transition | `getSpeakerNotes`, `setSpeakerNotes`, `getTransition`, `setTransition`                                     |
| Page layout          | `getPageSize`, `getPageLayout`, `setPageSize`, `getBackground`, `setBackground`, `setShowMasterBackground` |
| Elements             | `getElements`, `getElementById`, `insertElement`, `deleteElement`                                          |
| Shapes               | `insertShape`, `getShape`, `getShapes`                                                                     |
| Images               | `newImage`, `insertImage`, `insertImageAsync`, `updateImage`, `getImages`, `removeImage`                   |
| Groups               | `getGroups`, `group`, `ungroup`                                                                            |

### Shared Shapes

`insertShape()` accepts `IShapeCreateInput`; geometry belongs under `transform`. The returned handle exposes the full common [Shape Facade](https://docs.univer.ai/reference/facade/shape.md).

```ts
const presentation = univerAPI.getActivePresentation()
const slide = presentation?.getActiveSlide()
if (!slide) throw new Error('No active slide')

const shape = slide.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,
  transform: { left: 100, top: 120, width: 240, height: 120 },
  shapeData: {
    fill: { fillType: univerAPI.Enum.ShapeFillEnum.SolidFill, color: '#fef3c7' },
  },
})
if (!shape) throw new Error('Cannot insert shape')

shape.getText().setText('Slide highlight').setFontSize(24)
shape.setRotation(-6)
```

### Images

Use `insertImageAsync()` for URL or blob sources. Use `FImageBuilder` when you need to build or update a complete image descriptor synchronously.

```ts
const image = await slide.insertImageAsync('https://example.com/image.png', {
  imageSourceType: univerAPI.Enum.ImageSourceType.URL,
  left: 80,
  top: 120,
  width: 320,
  height: 180,
})

image.setCrop({ left: 10, top: 10, right: 10, bottom: 10 })
```

## FSlidePageElement

All slide elements expose common transform and accessibility metadata.

```typescript
getId(): string
getType(): SlidePageElementType
getData(): ISlidePageElement
getRichText(): RichTextValue | null
setRichText(richText: RichTextValue): this
getTransform(): ISlideDrawingTransform
setTransform(transform: Partial<ISlideDrawingTransform>): this
setPosition(left: number, top: number): this
setSize(width: number, height: number): this
setName(name: string): this
setDescription(description: string): this
setVisible(visible: boolean): this
setSelectable(selectable: boolean): this
```

## FImage and FImageBuilder

```typescript
// FImage
getSource(): string
setSource(source: string, imageSourceType?: ImageSourceType): this
setCrop(crop: ISlideImageElement['crop']): this
setClipShape(prstGeom: ShapeTypeEnum, adjustValues?: Record<string, number>): this
setShapeData(shapeData: ISlideImageElement['shapeData']): this
toBuilder(): FImageBuilder

// FImageBuilder
setSource(source: string, imageSourceType?: ImageSourceType): this
setAbsolutePosition(left: number, top: number): this
setSize(width: number, height: number): this
setRotation(rotation: number): this
setCrop(crop: ISlideImageElement['crop']): this
setClipShape(prstGeom?: ShapeTypeEnum, adjustValues?: Record<string, number>): this
setShapeData(shapeData: ISlideImageElement['shapeData']): this
build(): ISlideImageBuilderInfo
```

## FGroup

```typescript
getChildren(): FSlidePageElement[]
ungroup(): FSlidePageElement[]
```

Source: 

`@univerjs-pro/slides`