Guides

Installation & Basic Usage

This chapter introduces the installation and basic usage of Univer Slides. This guide uses the Univer SDK Pro Slides packages. There is currently no Slides preset, so create the application in plugin mode.

If you are not familiar with Univer's core concepts, read Quickstart first.

Create with plugin mode

Univer exposes Slides as a set of plugins. A browser editor usually registers the shared Univer runtime, the Pro license plugin, Docs and Drawing dependencies, and then the Slides model and UI plugins.

Use a package manager

If your project already uses modern frontend tooling, we recommend Vite, esbuild, or Webpack 5. Slides packages rely on ESM entry points, so older bundlers may require extra configuration.

Installation

Install the minimal packages for a browser Slides editor:

Shell
npm install @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

Caution

  • Register UniverLicensePlugin before registering Slides plugins.
  • Import the shared UI CSS before product UI CSS.
  • Optional feature packages such as print, tables, charts, and import/export should be added only when the product needs them.

  1. Import styles, locale packs, and the required plugins:

    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, UniverInstanceType } from '@univerjs/core'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/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'

  2. Import facade entries if you want to use Facade API:

    TypeScript
    import { FUniver } from '@univerjs/core/facade'import '@univerjs-pro/slides/facade'

  3. Create a Univer instance, register plugins, and create a Slides unit:

    TypeScript
    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)univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})const univerAPI = FUniver.newAPI(univer)

The univerAPI object returned by FUniver.newAPI(univer) is Univer's Facade API. Use it to create presentations and call Slides APIs.

univer.registerPlugin and univer.registerPlugins

univer.registerPlugin registers one plugin on the Univer instance. Use univer.registerPlugins to pass an array and register multiple plugins in one place.

TypeScript
univer.registerPlugins([  UniverRenderEnginePlugin,  [UniverUIPlugin, {    container: 'app',  }],  UniverDocsPlugin,  UniverDocsUIPlugin,  UniverDrawingPlugin,  [UniverLicensePlugin, {    license: process.env.CLIENT_LICENSE_TEXT,  }],  UniverSlidesPlugin,  UniverSlidesUIPlugin,])

Optional feature packages

Add feature packages when the editor needs the corresponding capability:

Shell
pnpm add @univerjs-pro/slides-printpnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-uipnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-uipnpm add @univerjs-pro/slides-exchange-client

For feature registration examples, see Printing, Tables, Charts, and Import & Export.

Lazy-load optional plugins

Plugin mode lets you delay feature plugins until the product actually needs them:

TypeScript
univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})import('@univerjs-pro/slides-chart').then(({ UniverSlidesChartPlugin }) => {  univer.registerPlugin(UniverSlidesChartPlugin)})

Server-side usage

In Node.js, register the model plugins and skip browser UI plugins:

TypeScript
univer.registerPlugin(UniverSlidesPlugin)

This setup is suitable for snapshot processing, server-side import/export, and collaboration services.

Other release channels

Besides stable releases, Univer provides alpha, beta, and nightly channels. These channels let you try upcoming capabilities earlier, but they may contain incomplete or unstable behavior. Avoid using them in production unless you have a clear validation plan.

Shell
pnpm add @univerjs-pro/slides@alpha
pnpm add @univerjs-pro/slides@beta

Next steps

How is this guide?

© 2026 DreamNum Co., Ltd.