# Installation & Basic Usage

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

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

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

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

---

This chapter introduces the installation and basic usage of Univer Boards. Boards is distributed as a Web SDK product and currently uses plugin mode.

If you are not familiar with Univer's core concepts, read [Quickstart](https://docs.univer.ai/guides/boards/getting-started/quickstart.md) first.

## Setting Up via Plugin Mode

Univer exposes Boards as a set of plugins. A browser editor usually registers the shared Univer runtime, the license plugin, document and drawing dependencies, then the Board 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/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### npm

```shell
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### yarn

```shell
yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-ui react react-dom rxjs
```

#### bun

```shell
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/drawing-ui @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/ink-ui @univerjs-pro/shape-editor-ui @univerjs-pro/boards @univerjs-pro/boards-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 Board plugins.
> * Import shared UI CSS before product UI CSS.
> * Register optional element plugins before opening snapshots that contain those element types.

1.
   Import styles, locale packs, and the required plugins:
   
   ```ts
   import { UniverBoardsPlugin } from '@univerjs-pro/boards'
   import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'
   import BoardsUIEnUS from '@univerjs-pro/boards-ui/locale/en-US'
   import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'
   import InkUIEnUS from '@univerjs-pro/ink-ui/locale/en-US'
   import { UniverLicensePlugin } from '@univerjs-pro/license'
   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 { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'
   import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US'
   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/drawing-ui/lib/index.css'
   import '@univerjs-pro/ink-ui/lib/index.css'
   import '@univerjs-pro/boards-ui/lib/index.css'
   ```

1.
   Import the facade entry if you want to use Facade API:
   
   ```ts
   import { FUniver } from '@univerjs/core/facade'
   import '@univerjs-pro/boards/facade'
   ```

1.
   Create a Univer instance, register plugins, and create a Board unit:
   
   ```ts
   const univer = new Univer({
     locale: LocaleType.EN_US,
     locales: {
       [LocaleType.EN_US]: mergeLocales(
         DesignEnUS,
         UIEnUS,
         DocsUIEnUS,
         DrawingUIEnUS,
         InkUIEnUS,
         BoardsUIEnUS,
       ),
     },
   })
   
   univer.registerPlugin(UniverRenderEnginePlugin)
   univer.registerPlugin(UniverUIPlugin, { container: 'app' })
   univer.registerPlugin(UniverDocsPlugin)
   univer.registerPlugin(UniverDocsUIPlugin)
   univer.registerPlugin(UniverDrawingPlugin)
   univer.registerPlugin(UniverDrawingUIPlugin)
   univer.registerPlugin(UniverInkUIPlugin)
   univer.registerPlugin(UniverLicensePlugin, {
     license: process.env.CLIENT_LICENSE_TEXT,
   })
   univer.registerPlugin(UniverBoardsPlugin)
   univer.registerPlugin(UniverBoardsUIPlugin)
   
   univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})
   
   const univerAPI = FUniver.newAPI(univer)
   ```

#### `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,
  UniverDrawingUIPlugin,
  UniverInkUIPlugin,
  [UniverLicensePlugin, {
    license: process.env.CLIENT_LICENSE_TEXT,
  }],
  UniverBoardsPlugin,
  UniverBoardsUIPlugin,
])
```

The `univerAPI` object returned by `FUniver.newAPI(univer)` is Univer's Facade API. Use it to create boards and operate on board elements.

## Optional feature packages

Add feature packages when the Board editor needs the corresponding element type:

```shell
pnpm add @univerjs-pro/boards-table @univerjs-pro/boards-table-ui
pnpm add @univerjs-pro/boards-mind @univerjs-pro/boards-mind-ui
```

For feature registration examples, see [Table](https://docs.univer.ai/guides/boards/features/tables.md), [Mind Maps](https://docs.univer.ai/guides/boards/features/mind-maps.md), and [Import and export](https://docs.univer.ai/guides/boards/features/import-export.md).

## 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/boards@alpha # Alpha version
npm install @univerjs-pro/boards@beta # Beta version
```

#### pnpm

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

#### yarn

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

#### bun

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

* [Quickstart](https://docs.univer.ai/guides/boards/getting-started/quickstart.md)
* [Facade API](https://docs.univer.ai/guides/boards/getting-started/facade.md)
* [License and deployment](https://docs.univer.ai/server/license.md)