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.

Univer supports two integration modes: Preset Mode and Plugin Mode. Preset Mode simplifies setup with preconfigured plugin bundles. If you need deep customization or extensions, we recommend Plugin Mode so you can combine and configure plugins individually.

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.

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

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

yarn 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 react react-dom rxjs

bun 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:

<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.

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)

   Expand code

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.

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:

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:

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:

univer.registerPlugin(UniverSlidesPlugin)

The model plugin supports headless snapshot processing. To expose collaboration or file-conversion APIs, integrate the corresponding Server SDK modules; registering this plugin alone does not create those services.

Mobile support

Use mobile UI plugins for touch-oriented controls in Univer Slides.³ Choose the UI mode before creating the editor.

In the plugin-mode example above, replace the following UI imports and registrations before createUnit(); do not append them to an initialized desktop editor. Keep model plugins, engines, locale files, CSS and Facade imports. Desktop and mobile classes are named exports from the same package entry.

import { UniverSlidesMobileUIPlugin } from '@univerjs-pro/slides-ui'import { UniverDocsMobileUIPlugin } from '@univerjs/docs-ui'import { UniverMobileUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverMobileUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsMobileUIPlugin)univer.registerPlugin(UniverSlidesMobileUIPlugin)

Plugin mapping

Only register features you use. Keep their model plugins and required dependencies; a mobile UI export does not mean the desktop and mobile interfaces have identical controls. Pro features still require the appropriate license. Features that need a backend require application-side integration with Univer Server SDK.

Container and touch interaction

Give the container an explicit height and configure the page viewport. 100dvh follows the dynamic viewport height. Check scrolling, pinch zoom, text selection, clipboard access and the on-screen keyboard in your target mobile browsers. Resizing a desktop editor alone does not select mobile plugins.

UniverMobileUIPlugin defaults to disableAutoFocus: true, preventing the editor from taking focus automatically during initialization.

<meta name="viewport" content="width=device-width, initial-scale=1" /><div id="app" style="height: 100dvh"></div>

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:

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

npm install @univerjs-pro/slides@alpha # Alpha version
npm install @univerjs-pro/slides@beta # Beta version

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

bun add @univerjs-pro/slides@alpha # Alpha version
bun 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

• Learn how to use Facade API.
• License configuration
• Server SDK integration
• Add feature plugins from the Features section.