Guides

Installation & Basic Usage

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

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

Create with plugin mode

Univer exposes Boards as a set of plugins. A browser editor usually registers the shared Univer runtime, the Pro license plugin, document and drawing dependencies, then the Board model and UI plugins.

Installation

Install the minimal packages for a browser Board editor:

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

Usage

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:

    TypeScript
    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'

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

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

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

    TypeScript
    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)

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-uipnpm add @univerjs-pro/boards-mind @univerjs-pro/boards-mind-ui

For feature registration examples, see Tables, Mind Maps, and Import & Export.

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

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

How is this guide?

© 2026 DreamNum Co., Ltd.