Web SDK

Installation & Basic Usage

This chapter introduces the installation and basic usage of Univer Slides. This guide uses the Web SDK 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.

Setting Up via Plugin Mode

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

Using Package Manager

Use a build tool that supports ES Modules and the exports field in package.json.

Installation

Univer uses React for its UI and RxJS for data streams; it can also be embedded in Vue or Angular applications. Check that react, react-dom, and rxjs peer dependencies are installed. The Yarn command below includes them explicitly.

Keep all @univerjs/* and @univerjs-pro/* packages on the same version.

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

Create the container before initializing Univer and give it an explicit height:

HTML
<div id="app" style="height: 600px"></div>

Import the facade entries used below before calling FUniver.newAPI(univer). Import @univerjs/design CSS first, then @univerjs/ui CSS, and finally product CSS.

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 Methods

univer.registerPlugin method is used to register a plugin to the Univer instance. You can call this method after creating the Univer instance to register plugins.

You can register a plugin using the univer.registerPlugin(Plugin, options) method, where Plugin is the plugin to be registered, and options are optional configuration items, as each plugin may have different configuration items.

Use univer.registerPlugins to pass an array and register multiple plugins at once. This is useful for scenarios where you need to manage plugins centrally.

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, Table, Charts, and Import and 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 Releases

In addition to stable releases, Univer offers alpha / beta channels. These versions allow you to get early access to the newest features that have not been officially released yet. However, keep in mind that more features also mean more risks. These versions may contain bugs, incomplete functionality, or unstable features. Please avoid using these versions in production environments whenever possible.

Alpha / Beta Release

When the Univer development team completes a new feature or significant change, they may pre-release it to the alpha or beta channel. You can install the alpha / beta version of a Univer package using the following command:

Shell
pnpm add @univerjs-pro/slides@alpha # Alpha version
pnpm add @univerjs-pro/slides@beta # Beta version

If you encounter any issues or have any feedback while using alpha / beta versions, please report them to the Univer development team through GitHub Issues.

We welcome your feedback on these early releases.

Next Steps

How is this guide?

© 2026 DreamNum Co., Ltd.