# Import Web SDK via CDN

- Human documentation: [https://docs.univer.ai/guides/sheets/getting-started/installation/cdn](https://docs.univer.ai/guides/sheets/getting-started/installation/cdn)

- Agent Markdown: [https://docs.univer.ai/guides/sheets/getting-started/installation/cdn.md](https://docs.univer.ai/guides/sheets/getting-started/installation/cdn.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [sheets/getting-started/installation/cdn.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/getting-started/installation/cdn.mdx)

---

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:

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

## Plugin Mode

### Using Global Build

Univer provides UMD builds for plugins. When using CDN script tags, you need to manually include the UMD builds of each plugin and their dependencies. This process is cumbersome, so we recommend using it only after fully understanding the plugin mechanism, including plugin dependencies and the order of style files.

#### Example

```html
<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>
    /**
     * Starting from Univer 0.6.0, with the support for React 19[^1], UMD users may need additional adaptation.
     * It is recommended to migrate to module script[^2] and a more modern build system.
     *
     * [^1]: [support for React 19] https://github.com/dream-num/univer/pull/4247
     * [^2]: [Module Script] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html
     */

    /**
     * Fix `Uncaught TypeError: client.createRoot is not a function`
     * If using UMD React < 18, you might need the following code.
     */
    ;(function (global) {
      'use strict'
      if (!global.ReactDOM) {
        throw new Error('ReactDOM must be loaded before ReactCreateRoot.')
      }
      const ReactDOM = global.ReactDOM
      if (!ReactDOM.createRoot) {
        ReactDOM.createRoot = function (container) {
          return {
            render: (element) => {
              ReactDOM.render(element, container)
            },
          }
        }
      }
    })(this)

    /**
     * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`
     * If using UMD React, you might need the following code.
     * Reference: https://unpkg.com/react@18.3.1/cjs/react-jsx-runtime.production.min.js
     */
    ;(function (global) {
      'use strict'
      if (!global.React) {
        throw new Error('React must be loaded before ReactJSXRuntime.')
      }
      const React = global.React
      if (!React.jsx || !React.jsxs) {
        const REACT_ELEMENT_TYPE = Symbol.for('react.element')
        const hasOwnProperty = Object.prototype.hasOwnProperty
        const RESERVED_PROPS = {
          key: true,
          ref: true,
          __self: true,
          __source: true,
        }
        const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
        function createReactElement(type, config, maybeKey) {
          const props = {}
          let key = null
          let ref = null
          if (maybeKey !== undefined) {
            key = `${maybeKey}`
          }
          if (config.key !== undefined) {
            key = `${config.key}`
          }
          if (config.ref !== undefined) {
            ref = config.ref
          }
          for (var propName in config) {
            if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
              props[propName] = config[propName]
            }
          }
          if (type && type.defaultProps) {
            const defaultProps = type.defaultProps
            for (var propName in defaultProps) {
              if (props[propName] === undefined) {
                props[propName] = defaultProps[propName]
              }
            }
          }
          return {
            $$typeof: REACT_ELEMENT_TYPE,
            type,
            key,
            ref,
            props,
            _owner: ReactCurrentOwner.current,
          }
        }
        React.jsx = createReactElement
        React.jsxs = createReactElement
      }
    })(this)
  </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@1.1.2/dist/umd/index.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/react-bindings/index.js"></script>

  <script src="https://unpkg.com/@univerjs/themes/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/protocol/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/network/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/rpc/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/design/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/engine-render/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/drawing/lib/umd/index.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/core/lib/umd/facade.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, mergeLocales, UniverInstanceType } = UniverCore
    const { FUniver } = UniverCoreFacade
    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]: mergeLocales(
          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(UniverSheetsPlugin)
    univer.registerPlugin(UniverSheetsUIPlugin)
    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:

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