Installation & Basic Usage

From version 0.5.0, Univer provides the @univerjs/presets package, which provides presets for common scenarios to help you quickly build a Univer application without worrying about how to import and configure Univer plugins.

🍃

If you are using Univer for the first time, we recommend starting with Presets. In the following sections, unless otherwise specified, we will assume that you are using Presets. If you are already familiar with Univer and want to import plugins more flexibly (e.g., lazy loading some plugins), you can refer to the Advanced Installation section.

Using Package Managers

If you are familiar with modern frontend development, using package managers to build applications containing Univer will be a good choice.

We recommend using build tools such as Vite, esbuild, or Webpack 5 that have good support for ES Modules to build Univer applications. If you are using other build tools like Webpack 4, you may require some additional configurations. For more information, please refer to Read More and the Troubleshooting.

Installation

Choose your package manager to install @unvierjs/presets:

npm install @univerjs/presets

pnpm add @univerjs/presets

yarn add @univerjs/presets

bun add @univerjs/presets

Usage

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverDocsCorePreset } from '@univerjs/presets/preset-docs-core';
import UniverPresetDocsCoreEnUS from '@univerjs/presets/preset-docs-core/locales/en-US';
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    enUS: UniverPresetDocsCoreEnUS,
  },
  theme: defaultTheme,
  presets: [
    UniverDocsCorePreset(),
  ],
});
 
univerAPI.createUniverDoc({});

Update

Since Univer uses a monorepo to manage its codebase, each release will update the version number of all official plugins. Therefore, when updating Univer, you should update all plugins at the same time to ensure that their version numbers are consistent.

If you are using pnpm, you can use the following command to update all plugins:

pnpm update "@univerjs/presets" @latest

Import by a `<script>` Tag

If you are not using a package manager, you can also import Univer via a <script> tag.

Example

Current mainstream CDN service providers (such as jsDelivr and unpkg) support Univer’s UMD build, and you can include these resources in your HTML file:

<head>
  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
 
  <script src="https://unpkg.com/@univerjs/presets/lib/umd/index.js"></script>
  
  <script src="https://unpkg.com/@univerjs/preset-docs-core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/preset-docs-core/lib/umd/locales/en-US.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-docs-core/lib/index.css" />
</head>
<body>
  <div id="app"></div>
 
  <script>
    const { createUniver, LocaleType, Tools, defaultTheme } = UniverPresets
    const { UniverDocsCorePreset } = UniverPresetDocsCore
 
    const { univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        enUS: Tools.deepMerge(
          {},
          UniverPresetDocsCoreEnUS,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverDocsCorePreset(),
      ],
    });
 
    univerAPI.createUniverDoc({});
  </script>
</body>

univerAPI is the API object that you can use to interact with Univer.

Specifying Versions

Both unpkg and jsDeliver support specifying specific versions of resources. For example, if you want to use version 0.1.16 of Univer, you only need to add @<version> to the URL to specify the version:

- https://unpkg.com/@univerjs/presets/lib/umd/index.js
+ https://unpkg.com/@univerjs/presets@0.5.0/lib/umd/index.js

Quickstart Internationalization