Web SDK

Installation & Basic Usage

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

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

Setting Up via Plugin Mode

A browser Bases application usually registers the shared Univer runtime, render engine, UI shell, formula engine, license, and then the Bases 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.

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/engine-formula @univerjs/engine-render @univerjs/ui @univerjs-pro/bases @univerjs-pro/bases-ui @univerjs-pro/engine-formula @univerjs-pro/license

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.

Caution

  • Register UniverLicensePlugin before registering Bases plugins.
  • Import shared UI CSS before product UI CSS.
  • Register both UniverFormulaEnginePlugin and UniverProFormulaEnginePlugin when using formula fields.

  1. Import styles, locale packs, and the required plugins:

    TypeScript
    import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIEnUS from '@univerjs-pro/bases-ui/locale/en-US'import BasesEnUS from '@univerjs-pro/bases/locale/en-US'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'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-pro/bases-ui/lib/index.css'

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

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

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

    TypeScript
    const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DesignEnUS,      UIEnUS,      BasesEnUS,      BasesUIEnUS,    ),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverBasesPlugin)univer.registerPlugin(UniverBasesUIPlugin)univer.createUnit(UniverInstanceType.UNIVER_BASE, {})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' }],  UniverFormulaEnginePlugin,  UniverProFormulaEnginePlugin,  [UniverLicensePlugin, {    license: process.env.CLIENT_LICENSE_TEXT,  }],  UniverBasesPlugin,  UniverBasesUIPlugin,])

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:

Shell
pnpm add @univerjs-pro/bases@alpha # Alpha version
pnpm add @univerjs-pro/bases@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.

We welcome your feedback on these early releases.

Next Steps

How is this guide?

© 2026 DreamNum Co., Ltd.