univer-integrate

Univer Integrate

Guide for embedding Univer into existing web applications.

Compatibility: This skill is written for Univer v0.21.x. Core concepts (plugin architecture, Facade API patterns) remain stable across minor versions, but specific method signatures may shift. When in doubt, check the user's installed @univerjs/* versions and prefer their project's existing API patterns.

Quick Start

1. Install dependencies

npm install react react-dom rxjs
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui

Requirements: Use npm ≥ 8 or pnpm ≥ 8. npm 6–7 may fail to resolve peerDependencies correctly. Yarn is not recommended — it does not auto-install peerDependencies, which leads to missing react, react-dom, or rxjs at runtime.

2. Import CSS

Style import order matters. Import base styles before plugin-specific styles:

import '@univerjs/design/lib/index.css';
import '@univerjs/ui/lib/index.css';
import '@univerjs/docs-ui/lib/index.css';
import '@univerjs/sheets-ui/lib/index.css';
import '@univerjs/sheets-formula-ui/lib/index.css';
import '@univerjs/sheets-numfmt-ui/lib/index.css';

3. Initialize

import { LocaleType, mergeLocales, Univer, UniverInstanceType } 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/locale/en-US';
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
import { UniverSheetsPlugin } from '@univerjs/sheets';
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui';
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui';
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
import SheetsEnUS from '@univerjs/sheets/locale/en-US';
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US';
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US';
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US';
import { UniverUIPlugin } from '@univerjs/ui';
import UIEnUS from '@univerjs/ui/locale/en-US';

// Side-effect imports to register Facade methods
import '@univerjs/core/facade';
import '@univerjs/engine-formula/facade';
import '@univerjs/ui/facade';
import '@univerjs/docs-ui/facade';
import '@univerjs/sheets/facade';
import '@univerjs/sheets-ui/facade';
import '@univerjs/sheets-formula/facade';
import '@univerjs/sheets-numfmt/facade';

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

// Registration order: engines → UI infra → unit core → unit UI → features
univer.registerPlugins([
  [UniverRenderEnginePlugin],
  [UniverFormulaEnginePlugin],
  [UniverUIPlugin, { container: 'app' }], // or DOM node
  [UniverDocsPlugin],
  [UniverDocsUIPlugin],
  [UniverSheetsPlugin],
  [UniverSheetsUIPlugin],
  [UniverSheetsFormulaPlugin],
  [UniverSheetsFormulaUIPlugin],
  [UniverSheetsNumfmtPlugin],
  [UniverSheetsNumfmtUIPlugin],
]);

univer.createUnit(UniverInstanceType.UNIVER_SHEET, workbookData);

const univerAPI = FUniver.newAPI(univer);