Guides

Installation & Basic Usage

This chapter introduces the installation and basic usage of Univer Bases. Bases 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

A browser Bases application usually registers the shared Univer runtime, render engine, UI shell, formula engine, Pro license, and then the Bases model and UI plugins.

Installation

Install the minimal packages for a browser Bases editor:

Shell
npm install @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

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)

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/bases@alpha
pnpm add @univerjs-pro/bases@beta

How is this guide?

© 2026 DreamNum Co., Ltd.