Import Univer via CDN

If you don't use a package manager, you can also import Univer via <script> tags.

Namespace Convention

Univer's global build (UMD) exposes a namespace on the global object, following the naming convention below:

# Presets
@univerjs/presets -> UniverPresets
@univerjs/preset-docs-core -> UniverPresetDocsCore
@univerjs/preset-docs-core/locales/en-US -> UniverPresetDocsCoreEnUS

# Plugins
@univerjs/core -> UniverCore
@univerjs/docs-ui -> UniverDocsUi
@univerjs-pro/docs-print -> UniverProDocsPrint
@univerjs/docs-ui/locale/en-US -> UniverDocsUiEnUS
@univerjs/core/facade -> UniverCoreFacade

Preset Mode

Using Global Build

We provide UMD builds of Univer on popular CDN providers like jsDelivr and unpkg. You can include these resources in your HTML file (or download them for distribution via your own server or CDN):

Caution

When using <script> tags to include Univer's UMD builds, the usage is similar to using package management tools and build tools. However, you need to note that although preset packages are essentially collections of plugins, when you want to access a specific plugin's objects or methods, you must obtain them from the plugin's namespace, not from the namespace of the preset package that contains them.

For example, although @univerjs/core is included in @univerjs/presets, you still need to access it from the namespace UniverCore of @univerjs/core:

Example

<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/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/echarts@5.6.0/dist/echarts.min.js"></script>

  <script src="https://unpkg.com/@univerjs/presets/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/locales/en-US.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-sheets-core/lib/index.css" />
  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { createUniver } = UniverPresets
    const { LocaleType, merge } = UniverCore
    const { UniverSheetsCorePreset } = UniverPresetSheetsCore

    const { univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: merge({}, UniverPresetSheetsCoreEnUS),
      },
      presets: [UniverSheetsCorePreset()],
    })

    univerAPI.createWorkbook({ name: 'Test Sheet' })
  </script>
</body>

Plugin Mode

Using Global Build

Univer also provides UMD builds for each plugin, but unlike preset mode, you need to manually include the UMD builds of each plugin and their dependencies. This process is very cumbersome, and we do not recommend this approach. Please consider using it only after fully understanding the plugin mechanism (such as the dependencies between plugins and the order of including plugin style files).

Example

<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi/dist/umd/index.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi/dist/umd/react-bindings/index.js"></script>

  <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/facade.js"></script>

  <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/locale/en-US.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/index.css" />

  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { Univer, LocaleType, merge, UniverInstanceType } = UniverCore
    const { FUniver } = UniverCoreFacade
    const { defaultTheme } = UniverDesign
    const { UniverRenderEnginePlugin } = UniverEngineRender
    const { UniverFormulaEnginePlugin } = UniverEngineFormula
    const { UniverUIPlugin } = UniverUi
    const { UniverSheetsPlugin } = UniverSheets
    const { UniverSheetsUIPlugin } = UniverSheetsUi
    const { UniverDocsPlugin } = UniverDocs
    const { UniverDocsUIPlugin } = UniverDocsUi
    const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
    const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
    const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
    const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

    const univer = new Univer({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: merge(
          {},
          UniverDesignEnUS,
          UniverUiEnUS,
          UniverSheetsEnUS,
          UniverSheetsUiEnUS,
          UniverDocsUiEnUS,
          UniverSheetsFormulaUiEnUS,
          UniverSheetsNumfmtUiEnUS,
        ),
      },
    })

    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverFormulaEnginePlugin)

    univer.registerPlugin(UniverUIPlugin, {
      container: 'app',
    })

    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)

    univer.registerPlugin(UniverSheetsFormulaPlugin)
    univer.registerPlugin(UniverSheetsFormulaUIPlugin)
    univer.registerPlugin(UniverSheetsNumfmtPlugin)
    univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})

    const univerAPI = FUniver.newAPI(univer)
  </script>
</body>

Specifying Versions

unpkg & jsDeliver both support specifying a specific version of the resource. For example, if you want to use version x.y.z of Univer, you can simply add @<version> to the URL:

- https://unpkg.com/@univerjs/presets/lib/umd/index.js
+ https://unpkg.com/@univerjs/presets@x.y.z/lib/umd/index.js

How is this guide?

On this page