Univer Docs

https://docs.univer.ai/guides/docs
Admin
Univer Docs is the document component of Univer, a full-stack framework for building productivity...
Tokens:76,141
Snippets:750
Trust Score:7.7
Update:4 days ago
Show doc for...
Tokens:
Raw
### Install @univerjs/preset-docs-drawing with bun

Source: https://docs.univer.ai/guides/docs/features/images

Install the preset package using bun.

```bash
bun add @univerjs/preset-docs-drawing
```

--------------------------------

### Install @univerjs/preset-docs-drawing with yarn

Source: https://docs.univer.ai/guides/docs/features/images

Install the preset package using yarn.

```bash
yarn add @univerjs/preset-docs-drawing
```

--------------------------------

### Install @univerjs-pro/docs-column with bun

Source: https://docs.univer.ai/guides/docs/features/columns

Install the required packages using bun.

```bash
bun add @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

--------------------------------

### Install @univerjs/preset-docs-drawing with npm

Source: https://docs.univer.ai/guides/docs/features/images

Install the preset package using npm.

```bash
npm install @univerjs/preset-docs-drawing
```

--------------------------------

### Install @univerjs/preset-docs-drawing with pnpm

Source: https://docs.univer.ai/guides/docs/features/images

Install the preset package using pnpm.

```bash
pnpm add @univerjs/preset-docs-drawing
```

--------------------------------

### Install via bun

Source: https://docs.univer.ai/guides/docs/features/list

Command to install the list plugins using bun.

```bash
bun add @univerjs-pro/docs-list @univerjs-pro/docs-list-ui
```

--------------------------------

### Installation

Source: https://docs.univer.ai/guides/docs/features/footnotes

Install the required plugins using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

Install the plugins with your package manager:

```bash
npm install @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

```bash
pnpm add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

```bash
yarn add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

```bash
bun add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```
```

--------------------------------

### Install via npm

Source: https://docs.univer.ai/guides/docs/features/list

Command to install the list plugins using npm.

```bash
npm install @univerjs-pro/docs-list @univerjs-pro/docs-list-ui
```

--------------------------------

### Install via yarn

Source: https://docs.univer.ai/guides/docs/features/list

Command to install the list plugins using yarn.

```bash
yarn add @univerjs-pro/docs-list @univerjs-pro/docs-list-ui
```

--------------------------------

### Install @univerjs-pro/docs-column with npm

Source: https://docs.univer.ai/guides/docs/features/columns

Install the required packages using npm.

```bash
npm install @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

--------------------------------

### Install @univerjs-pro/docs-column with yarn

Source: https://docs.univer.ai/guides/docs/features/columns

Install the required packages using yarn.

```bash
yarn add @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

--------------------------------

### Install dependencies via bun

Source: https://docs.univer.ai/guides/docs/features/footnotes

Command to install the reference and UI plugins using bun.

```bash
bun add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

--------------------------------

### Install via pnpm

Source: https://docs.univer.ai/guides/docs/features/list

Command to install the list plugins using pnpm.

```bash
pnpm add @univerjs-pro/docs-list @univerjs-pro/docs-list-ui
```

--------------------------------

### Install @univerjs/themes via bun

Source: https://docs.univer.ai/guides/docs/ui/themes

Install the themes package using bun.

```bash
bun add @univerjs/themes
```

--------------------------------

### Install Univer with bun

Source: https://docs.univer.ai/guides/docs/getting-started/installation

Install the core Univer packages using bun.

```shell
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/ui
```

--------------------------------

### Install Content Controls via bun

Source: https://docs.univer.ai/guides/docs/features/content-controls

Install the required SDT packages using bun.

```bash
bun add @univerjs-pro/docs-sdt @univerjs-pro/docs-sdt-ui
```

--------------------------------

### Install @univerjs-pro/docs-column with pnpm

Source: https://docs.univer.ai/guides/docs/features/columns

Install the required packages using pnpm.

```bash
pnpm add @univerjs-pro/docs-column @univerjs-pro/docs-column-ui
```

--------------------------------

### Install Univer with npm

Source: https://docs.univer.ai/guides/docs/getting-started/installation

Install the core Univer packages using npm.

```shell
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/ui
```

--------------------------------

### Install @univerjs/presets and @univerjs/preset-docs-core with npm

Source: https://docs.univer.ai/guides/docs/features/core

Use npm to install the required Univer preset packages.

```bash
npm install @univerjs/presets @univerjs/preset-docs-core
```

--------------------------------

### Installation

Source: https://docs.univer.ai/guides/docs/features/quote

Install the quote block plugins using your preferred package manager.

```APIDOC
## Installation

### npm
```bash
npm install @univerjs-pro/docs-quote @univerjs-pro/docs-quote-ui
```

### pnpm
```bash
pnpm add @univerjs-pro/docs-quote @univerjs-pro/docs-quote-ui
```

### yarn
```bash
yarn add @univerjs-pro/docs-quote @univerjs-pro/docs-quote-ui
```

### bun
```bash
bun add @univerjs-pro/docs-quote @univerjs-pro/docs-quote-ui
```
```

--------------------------------

### Install dependencies via yarn

Source: https://docs.univer.ai/guides/docs/features/footnotes

Command to install the reference and UI plugins using yarn.

```bash
yarn add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

--------------------------------

### Install Print Plugin via bun

Source: https://docs.univer.ai/guides/docs/features/print

Command to install the print plugin using bun.

```bash
bun add @univerjs-pro/docs-print
```

--------------------------------

### Install @univerjs/watermark via bun

Source: https://docs.univer.ai/guides/docs/features/watermark

Installs the watermark package using bun.

```bash
bun add @univerjs/watermark
```

--------------------------------

### Install Univer with pnpm

Source: https://docs.univer.ai/guides/docs/getting-started/installation

Install the core Univer packages using pnpm.

```shell
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/ui
```

--------------------------------

### Install @univerjs/presets and @univerjs/preset-docs-core with bun

Source: https://docs.univer.ai/guides/docs/features/core

Use bun to install the required Univer preset packages.

```bash
bun add @univerjs/presets @univerjs/preset-docs-core
```

--------------------------------

### Install dependencies via npm

Source: https://docs.univer.ai/guides/docs/features/footnotes

Command to install the reference and UI plugins using npm.

```bash
npm install @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

--------------------------------

### Installation

Source: https://docs.univer.ai/guides/docs/features/callout

Install the required packages for the callout feature using your preferred package manager.

```APIDOC
## Installation

### npm

```bash
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

### pnpm

```bash
pnpm add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

### yarn

```bash
yarn add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

### bun

```bash
bun add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```
```

--------------------------------

### Install dependencies via pnpm

Source: https://docs.univer.ai/guides/docs/features/footnotes

Command to install the reference and UI plugins using pnpm.

```bash
pnpm add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui
```

--------------------------------

### Install Content Controls via npm

Source: https://docs.univer.ai/guides/docs/features/content-controls

Install the required SDT packages using npm.

```bash
npm install @univerjs-pro/docs-sdt @univerjs-pro/docs-sdt-ui
```

--------------------------------

### Install Content Controls via pnpm

Source: https://docs.univer.ai/guides/docs/features/content-controls

Install the required SDT packages using pnpm.

```bash
pnpm add @univerjs-pro/docs-sdt @univerjs-pro/docs-sdt-ui
```

--------------------------------

### Install Content Controls via yarn

Source: https://docs.univer.ai/guides/docs/features/content-controls

Install the required SDT packages using yarn.

```bash
yarn add @univerjs-pro/docs-sdt @univerjs-pro/docs-sdt-ui
```

--------------------------------

### Install @univerjs/preset-docs-thread-comment with bun

Source: https://docs.univer.ai/guides/docs/features/comments

Use bun to install the thread comment preset package.

```bash
bun add @univerjs/preset-docs-thread-comment
```

--------------------------------

### Install via bun

Source: https://docs.univer.ai/guides/docs/features/find-replace

Command to install the necessary Find & Replace packages using bun.

```bash
bun add @univerjs/find-replace @univerjs/docs-find-replace
```

--------------------------------

### Install @univerjs/presets and @univerjs/preset-docs-core with pnpm

Source: https://docs.univer.ai/guides/docs/features/core

Use pnpm to install the required Univer preset packages.

```bash
pnpm add @univerjs/presets @univerjs/preset-docs-core
```

--------------------------------

### Install table plugins via bun

Source: https://docs.univer.ai/guides/docs/features/table

Command to install the required table and UI packages using bun.

```bash
bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui
```

--------------------------------

### Install Preset Mode dependencies

Source: https://docs.univer.ai/guides/docs/features/hyper-link

Commands to install the preset package for Hyperlink mode.

```bash
npm install @univerjs/preset-docs-hyper-link
```

```bash
pnpm add @univerjs/preset-docs-hyper-link
```

```bash
yarn add @univerjs/preset-docs-hyper-link
```

```bash
bun add @univerjs/preset-docs-hyper-link
```

--------------------------------

### Install @univerjs/presets and @univerjs/preset-docs-core with yarn

Source: https://docs.univer.ai/guides/docs/features/core

Use yarn to install the required Univer preset packages.

```bash
yarn add @univerjs/presets @univerjs/preset-docs-core
```

--------------------------------

### Install @univerjs/preset-docs-thread-comment with npm

Source: https://docs.univer.ai/guides/docs/features/comments

Use npm to install the thread comment preset package.

```bash
npm install @univerjs/preset-docs-thread-comment
```

--------------------------------

### Install @univerjs/preset-docs-thread-comment with pnpm

Source: https://docs.univer.ai/guides/docs/features/comments

Use pnpm to install the thread comment preset package.

```bash
pnpm add @univerjs/preset-docs-thread-comment
```

--------------------------------

### Install callout packages via bun

Source: https://docs.univer.ai/guides/docs/features/callout

Command to install the callout and UI packages using bun.

```bash
bun add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

--------------------------------

### Install via yarn

Source: https://docs.univer.ai/guides/docs/features/find-replace

Command to install the necessary Find & Replace packages using yarn.

```bash
yarn add @univerjs/find-replace @univerjs/docs-find-replace
```

--------------------------------

### Install via npm

Source: https://docs.univer.ai/guides/docs/features/find-replace

Command to install the necessary Find & Replace packages using npm.

```bash
npm install @univerjs/find-replace @univerjs/docs-find-replace
```

--------------------------------

### Install via bun

Source: https://docs.univer.ai/guides/docs/features/code

Command to install the required code block packages using bun.

```bash
bun add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui
```

--------------------------------

### Install Embed plugins via bun

Source: https://docs.univer.ai/guides/docs/features/embed

Install the required embed and embed-ui packages using bun.

```bash
bun add @univerjs-pro/embed @univerjs-pro/embed-ui
```

--------------------------------

### Install @univerjs-pro/collaboration-embed with bun

Source: https://docs.univer.ai/guides/docs/features/embed

Install the collaboration embed package using the bun package manager.

```bash
bun add @univerjs-pro/collaboration-embed
```

--------------------------------

### Install via yarn

Source: https://docs.univer.ai/guides/docs/features/code

Command to install the required code block packages using yarn.

```bash
yarn add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui
```

--------------------------------

### Install table plugins via yarn

Source: https://docs.univer.ai/guides/docs/features/table

Command to install the required table and UI packages using yarn.

```bash
yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui
```

--------------------------------

### Install dependencies via npm

Source: https://docs.univer.ai/guides/docs/getting-started/node

Install the core Univer packages and necessary engine plugins using npm.

```bash
npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/docs
```

--------------------------------

### Install callout packages via npm

Source: https://docs.univer.ai/guides/docs/features/callout

Command to install the callout and UI packages using npm.

```bash
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

--------------------------------

### Initialize Univer with Plugins

Source: https://docs.univer.ai/guides/docs/getting-started/installation/cdn

Register the Docs and UI plugins and create a document instance using the Univer API.

```javascript
univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)

    const univerAPI = FUniver.newAPI(univer)

    univerAPI.createDocument({})
```

--------------------------------

### Install callout packages via yarn

Source: https://docs.univer.ai/guides/docs/features/callout

Command to install the callout and UI packages using yarn.

```bash
yarn add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

--------------------------------

### Initialize Univer with plugins

Source: https://docs.univer.ai/guides/docs/features/core

Configure the Univer instance with required plugins and locales, then create a document using the facade API.

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/lib/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/docs/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)

const univerAPI = FUniver.newAPI(univer)

univerAPI.createDocument({})
```

--------------------------------

### Install @univerjs/themes via yarn

Source: https://docs.univer.ai/guides/docs/ui/themes

Install the themes package using yarn.

```bash
yarn add @univerjs/themes
```

--------------------------------

### Install @univerjs/themes via pnpm

Source: https://docs.univer.ai/guides/docs/ui/themes

Install the themes package using pnpm.

```bash
pnpm add @univerjs/themes
```

--------------------------------

### Install @univerjs/themes via npm

Source: https://docs.univer.ai/guides/docs/ui/themes

Install the themes package using npm.

```bash
npm install @univerjs/themes
```

--------------------------------

### Initialize Find & Replace plugin

Source: https://docs.univer.ai/guides/docs/features/find-replace

Example showing how to import the plugin and register it with the Univer instance.

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverDocsFindReplacePlugin } from '@univerjs/docs-find-replace'
import FindReplaceEnUS from '@univerjs/find-replace/locale/en-US'

import '@univerjs/find-replace/lib/index.css'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(FindReplaceEnUS),
  },
})

univer.registerPlugin(UniverDocsFindReplacePlugin)
```

--------------------------------

### Install @univerjs/watermark via yarn

Source: https://docs.univer.ai/guides/docs/features/watermark

Installs the watermark package using yarn.

```bash
yarn add @univerjs/watermark
```

--------------------------------

### Install @univerjs/watermark via pnpm

Source: https://docs.univer.ai/guides/docs/features/watermark

Installs the watermark package using pnpm.

```bash
pnpm add @univerjs/watermark
```

--------------------------------

### Install alpha and beta versions with bun

Source: https://docs.univer.ai/guides/docs/getting-started/installation

Use these commands to install the alpha or beta version of a Univer package via bun. The alpha version is for early access to new features, while the beta version is more stable but still pre-release. Avoid using these in production.

```bash
bun add @univerjs/<package-name>@alpha # Alpha version
bun add @univerjs/<package-name>@beta # Beta version
```

--------------------------------

### Install Preset Dependencies via bun

Source: https://docs.univer.ai/guides/docs/features/print

Command to install the required drawing and advanced presets using bun.

```bash
bun add @univerjs/preset-docs-drawing @univerjs/preset-docs-advanced
```

--------------------------------

### Install @univerjs/watermark via npm

Source: https://docs.univer.ai/guides/docs/features/watermark

Installs the watermark package using npm.

```bash
npm install @univerjs/watermark
```

--------------------------------

### Install alpha and beta versions with npm

Source: https://docs.univer.ai/guides/docs/getting-started/installation

Use these commands to install the alpha or beta version of a Univer package via npm. The alpha version is for early access to new features, while the beta version is more stable but still pre-release. Avoid using these in production.

```bash
npm install @univerjs/<package-name>@alpha # Alpha version
npm install @univerjs/<package-name>@beta # Beta version
```

--------------------------------

### Install @univerjs/preset-docs-thread-comment with yarn

Source: https://docs.univer.ai/guides/docs/features/comments

Use yarn to install the thread comment preset package.

```bash
yarn add @univerjs/preset-docs-thread-comment
```

--------------------------------

### Install table plugins via npm

Source: https://docs.univer.ai/guides/docs/features/table

Command to install the required table and UI packages using npm.

```bash
npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-ui
```

--------------------------------

### Install Print Plugin via yarn

Source: https://docs.univer.ai/guides/docs/features/print

Command to install the print plugin using yarn.

```bash
yarn add @univerjs-pro/docs-print
```

--------------------------------

### Install @univerjs/ui-adapter-web-component via npm, pnpm, yarn, and bun

Source: https://docs.univer.ai/guides/docs/ui/components

Install the Web Component UI adapter package using your preferred package manager. Choose one command based on your environment.

```bash
npm install @univerjs/ui-adapter-web-component
```

```bash
pnpm add @univerjs/ui-adapter-web-component
```

```bash
yarn add @univerjs/ui-adapter-web-component
```

```bash
bun add @univerjs/ui-adapter-web-component
```

--------------------------------

### Install Print Plugin via pnpm

Source: https://docs.univer.ai/guides/docs/features/print

Command to install the print plugin using pnpm.

```bash
pnpm add @univerjs-pro/docs-print
```

--------------------------------

### Install Print Plugin via npm

Source: https://docs.univer.ai/guides/docs/features/print

Command to install the print plugin using npm.

```bash
npm install @univerjs-pro/docs-print
```

--------------------------------

### Install via pnpm

Source: https://docs.univer.ai/guides/docs/features/find-replace

Command to install the necessary Find & Replace packages using pnpm.

```bash
pnpm add @univerjs/find-replace @univerjs/docs-find-replace
```

--------------------------------

### Initialize Univer with UniverDocsCorePreset

Source: https://docs.univer.ai/guides/docs/features/core

Basic setup for creating a Univer instance with the Docs Core preset and English locale.

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import '@univerjs/preset-docs-core/lib/index.css'

const { univer, univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(UniverPresetDocsCoreEnUS),
  },
  presets: [UniverDocsCorePreset()],
})

univerAPI.createDocument({})
```

--------------------------------

### Install Preset Dependencies via yarn

Source: https://docs.univer.ai/guides/docs/features/print

Command to install the required drawing and advanced presets using yarn.

```bash
yarn add @univerjs/preset-docs-drawing @univerjs/preset-docs-advanced
```

--------------------------------

### Install via pnpm

Source: https://docs.univer.ai/guides/docs/features/code

Command to install the required code block packages using pnpm.

```bash
pnpm add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui
```

--------------------------------

### Initialize Univer with Shape plugins

Source: https://docs.univer.ai/guides/docs/features/shape

Example of importing and registering the shape and formula engine plugins in the Univer initialization process.

```typescript
import { UniverDocsShapePlugin } from '@univerjs-pro/docs-shape' // [!code ++]
import { UniverDocsShapeUIPlugin } from '@univerjs-pro/docs-shape-ui' // [!code ++]
import DocsShapeUIEnUS from '@univerjs-pro/docs-shape-ui/locale/en-US' // [!code ++]
import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/docs-shape-ui/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      DocsShapeUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverProFormulaEnginePlugin) // [!code ++]
univer.registerPlugin(UniverDocsShapePlugin) // [!code ++]
univer.registerPlugin(UniverDocsShapeUIPlugin) // [!code ++]
```

--------------------------------

### Install via npm

Source: https://docs.univer.ai/guides/docs/features/code

Command to install the required code block packages using npm.

```bash
npm install @univerjs-pro/docs-code @univerjs-pro/docs-code-ui
```
Tokens:
Raw