Web SDK

Core Features

Plugins Info

Univer Slides core combines a presentation model with the browser editing UI. The model stores a presentation as an ISlideData snapshot, while the UI renders and edits that model through Univer commands.

Features

  • Presentation model: Manages presentation identity, page size, slide order, slides, master pages, layout pages, themes, transitions, and resources.
  • Rendering and editing: Provides the slide canvas, thumbnails, selection, clipboard, text and shape editing, alignment guides, and presentation playback.
  • Command pipeline: Applies page and element changes through commands and mutations so model updates, rendering, and undo and redo stay synchronized.
  • Facade API: Creates and finds presentations, saves snapshots, and exposes slide and element operations through application-facing objects.
  • Plugin architecture: Keeps optional features such as tables, charts, printing, and import/export outside the core stack.

Preset Mode

Univer Slides does not currently export a preset package. Use Plugin Mode for both the model-only runtime and the browser editor.

Plugin Mode

Installation

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui

Usage

TypeScript
import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverSlidesPlugin } from '@univerjs-pro/slides'import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US'import SlidesEnUS from '@univerjs-pro/slides/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs-pro/slides/facade'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs-pro/slides-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesUIPlugin)const univerAPI = FUniver.newAPI(univer)const presentation = univerAPI.createPresentation({ name: 'Quarterly review' })

Set UniverSlidesUIPlugin to { editor: { enabled: false } } when the browser should render a presentation without editing controls. In a Node.js process, register UniverSlidesPlugin without the UI plugin.

How is this guide?

© 2026 DreamNum Co., Ltd.