# Installation & Basic Usage

- Human documentation: [https://docs.univer.ai/guides/slides/getting-started/installation](https://docs.univer.ai/guides/slides/getting-started/installation)

- Agent Markdown: [https://docs.univer.ai/guides/slides/getting-started/installation.md](https://docs.univer.ai/guides/slides/getting-started/installation.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [slides/getting-started/installation/index.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/getting-started/installation/index.mdx)

---

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](https://docs.univer.ai/guides/slides/getting-started/quickstart.md) 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.

#### pnpm

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

#### npm

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

#### yarn

```shell
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

```shell
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:

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

> [!WARNING: 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'
   ```

1.
   Import facade entries if you want to use Facade API:
   
   ```typescript
   import { FUniver } from '@univerjs/core/facade'
   import '@univerjs-pro/slides/facade'
   ```

1.
   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-print
pnpm add @univerjs-pro/slides-table @univerjs-pro/slides-table-ui
pnpm add @univerjs-pro/chart-ui @univerjs-pro/slides-chart @univerjs-pro/slides-chart-ui
pnpm add @univerjs-pro/slides-exchange-client
```

For feature registration examples, see [Printing](https://docs.univer.ai/guides/slides/features/print.md), [Table](https://docs.univer.ai/guides/slides/features/tables.md), [Charts](https://docs.univer.ai/guides/slides/features/charts.md), and [Import and export](https://docs.univer.ai/guides/slides/features/import-export.md).

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

#### npm

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

#### pnpm

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

#### yarn

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

#### bun

```bash
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](https://github.com/dream-num/univer/issues).

We welcome your feedback on these early releases.

## Next Steps

* Learn how to use [Facade API](https://docs.univer.ai/guides/slides/getting-started/facade.md).
* Read [Using Web SDK](https://docs.univer.ai/server/license.md) for license and deployment requirements.
* Add feature plugins from the [Features](https://docs.univer.ai/guides/slides/features/print.md) section.