Core Features

Univer Boards core combines a page-and-element model with an interactive browser canvas. The model and UI are delivered by two Web SDK packages and operate as an independent UNIVER_BOARD unit.

Features

• Pages and element ordering: Store pages in pages and drawable objects in each page's elements, with explicit order arrays for both levels.
• Canvas elements: Work with text, shapes, images, connectors, groups, containers, and swimlanes.
• Command-driven editing: Route element changes, ordering, and parent relationships through one command layer with permissions and hooks for optional history and collaboration integrations.
• Browser canvas: Render elements and provide selection, transforms, clipboard, text editing, viewport controls, and panels.
• Extensible adapters: Add optional Board capabilities such as tables, mind maps, charts, resources, print, and exchange.
• Persistence: Create, restore, and save an IBoardData snapshot, including pages, resources, themes, and active-page state.

Plugin Mode

Installation

Add the two Boards product packages to the Univer runtime described in Installation & Basic Usage:

pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui

npm install @univerjs-pro/boards @univerjs-pro/boards-ui

yarn add @univerjs-pro/boards @univerjs-pro/boards-ui

bun add @univerjs-pro/boards @univerjs-pro/boards-ui

Product plugin registration

Register the shared render, document, drawing, ink, shape-editing, and license dependencies first as shown in the installation guide, then register the Boards plugins:

import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import '@univerjs-pro/boards-ui/lib/index.css'univer.registerPlugin(UniverBoardsPlugin)univer.registerPlugin(UniverBoardsUIPlugin)

UniverBoardsPlugin registers the Board model, commands, element services, adapters, and permissions. UniverBoardsUIPlugin adds the rendered canvas and browser interactions.

Preset Mode

Univer Boards does not currently provide a dedicated preset. Use plugin mode for both the model and browser UI.

Menu configuration and the canvas toolbar

Boards context menus use the shared MenuConfig. Add menu to the existing UniverUIPlugin registration, rather than to UniverBoardsUIPlugin. This example puts Duplicate before the other items in its context-menu group:

Initial configuration

import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'board.menu.duplicate-selection': { order: -1 },}univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })

order sorts sibling context-menu items in ascending order; it does not move an item between groups. Use the menu item ID from the product menu definition, which can differ from the command ID.

Runtime updates

Import @univerjs/ui/facade before creating univerAPI with FUniver.newAPI(univer). updateMenuConfig() merges the changes, preserves unspecified fields, and refreshes the menus. Overrides also apply to menus registered later.

import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'board.menu.duplicate-selection': { order: 5 },})

Canvas toolbar

Boards uses its own canvas toolbar and does not register a standard product Ribbon. gridLayout controls only the shared grid Ribbon; it does not rearrange the canvas toolbar or context menus. Configure the canvas tools through UniverBoardsUIPlugin.toolbar.tools, for example to disable the pen tool in the existing plugin registration:

import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'univer.registerPlugin(UniverBoardsUIPlugin, {  toolbar: { tools: { pen: false } },})

toolbar.tools controls tool availability, not their order or grid placement. See the Boards UI reference for the distinction between canvas controls and shared menus.