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.

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.

Preset Mode

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

Menu order and grid layout

Configure menu and ribbonType in the existing UniverUIPlugin registration. These are shared UI options; they do not belong to UniverSlidesUIPlugin. The example uses menu IDs from Slides:

Initial configuration

TypeScript
import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.view': { order: -1 },  'ribbon.start.layout': { order: -1 },  'slide.menu.insert.text': {    order: 1,    gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 },  },  'slide.menu.insert.shape': {    order: 0,    gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true },  },}univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', menu })

order sorts sibling tabs, groups, or menu items in ascending order; it does not move an item between groups. Use the actual menu item ID, available from its data-u-command attribute, rather than assuming it is the command ID.

Runtime updates

Import @univerjs/ui/facade before creating univerAPI with FUniver.newAPI(univer). updateMenuConfig() merges the changes, preserves unspecified fields, and refreshes the menus. Overrides also apply to menus registered later.

TypeScript
import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } },})

gridLayout only affects the grid Ribbon. Each group has two rows, and row and column start at 1. Explicit positions take precedence over visual ordering by order; update both items when swapping occupied cells. Optional fields inherit the existing configuration or schema. See IRibbonGridLayout for spans, labels, widths, and icon sizes.

Keep editing enabled in UniverSlidesUIPlugin: editor.enabled: false skips registration of the product Ribbon. Menu overrides do not register missing buttons.

For custom buttons and submenu triggers, createMenu() and createSubmenu() also accept order and gridLayout; call appendTo() to register them. The popup contents do not use the Ribbon grid layout.

How is this guide?

© 2026 DreamNum Co., Ltd.