Univer Boards
Univer Boards provides a canvas workspace for whiteboards, diagrams, tables, and mind maps.
What is Univer Boards
Univer Boards is the canvas product in Web SDK. It is used when the document is no longer a grid, a page, or a slide deck, but a free-form workspace: whiteboards, diagrams, sticky notes, connectors, embedded tables, and mind maps all belong here.
Boards is implemented as an independent Web SDK unit type. At runtime you create a UniverInstanceType.UNIVER_BOARD unit, then register the model and UI plugins you need for the elements you want to support.
Browser Compatibility
Web SDK is compiled with a target of Chrome 88, but this does not mean it fully supports all mainstream environments. We strive to ensure Web SDK works well in the following browsers and Node.js environments:
| Edge | Firefox | Chrome | Safari | Electron |
|---|---|---|---|---|
| >=88 | >=90 | >=88 | >=14.1 | >=12 |
Web SDK relies on Intl.Segmenter. If your browser or runtime environment does not support it, please add a
corresponding polyfill first. We recommend using @formatjs/intl-segmenter.
If you encounter compatibility issues, please first try to resolve them using the appropriate polyfills. If the issue persists, feel free to submit an issue.
Node.js Compatibility
Note: This only applies to running Web SDK in a Node.js environment and does not apply to cases where Web SDK is run in a browser using build tools based on Node.js.
Web SDK can run in a Node.js environment, supporting versions v18.17.0 and later.
Highlights
- Pages and element ordering: Store pages in
pagesand drawable objects in each page'selements, 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
IBoardDatasnapshot, including pages, resources, themes, and active-page state.
How to Read the Documentation
On the left side of the screen, you’ll find the docs navbar. The pages of the docs are organized sequentially, from basic to advanced, so you can follow them step-by-step when building your application. However, you can read them in any order or skip to the pages that apply to your use case. You can also checkout Univer Boards at the top of the sidebar.
On the right side of the screen, you’ll see a table of contents that makes it easier to navigate between sections of a page. If you need to quickly find a page, you can use the search bar at the top, or the search shortcut (Ctrl+K or Cmd+K).
To get started, check out the Quick Start guide.
Pre-Requisite Knowledge
Although our docs are designed to be beginner-friendly, we need to establish a baseline so that the docs can stay focused on Web SDK.
To get the most out of our docs, it’s recommended that you have a basic understanding of JavaScript and its ecosystem.
If you are interested in running Web SDK on Node.js, you should also have a basic understanding of Node.js.
If you would like to try Web SDK and deploy Univer Server, we recommend that you have a basic understanding of Linux, Docker and Docker Compose (or Kubernetes).
Extend Univer Boards
Web SDK is designed to be highly extensible so you can shape it to fit your needs.
How is this guide?