CDN 経由での Web SDK のインポート

パッケージマネージャーを使わない場合でも、<script> タグで Univer を読み込めます。

名前空間の規約

Univer の UMD(グローバル)ビルドは、グローバルオブジェクトに名前空間を公開します。命名規則は次のとおりです。

text
@univerjs/core -> UniverCore@univerjs/docs-ui -> UniverDocsUi@univerjs-pro/docs-print -> UniverProDocsPrint@univerjs/docs-ui/locale/ja-JP -> UniverDocsUiJaJP@univerjs/core/facade -> UniverCoreFacade

プラグインモード

グローバルビルド版を使う

Univer はプラグイン向けの UMD ビルドを提供しています。CDN の <script> タグで利用する場合は、各プラグインと依存関係を手動で読み込む必要があります。手間が大きいため、プラグインの依存関係や CSS の読み込み順を十分理解した上で利用してください。

例

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/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/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/design/lib/umd/locale/ja-JP.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/ja-JP.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/ja-JP.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" />  <style>    html,    body,    #root,    #app {      padding: 0;      margin: 0;      height: 100%;    }  </style></head><body>  <div id="app"></div>  <script>    const { Univer, LocaleType, mergeLocales } = UniverCore    const { FUniver } = UniverCoreFacade    const { UniverRenderEnginePlugin } = UniverEngineRender    const { UniverFormulaEnginePlugin } = UniverEngineFormula    const { UniverUIPlugin } = UniverUi    const { UniverDocsPlugin } = UniverDocs    const { UniverDocsUIPlugin } = UniverDocsUi    const univer = new Univer({      locale: LocaleType.JA_JP,      locales: {        [LocaleType.JA_JP]: mergeLocales(UniverDesignJaJP, UniverUiJaJP, UniverDocsUiJaJP),      },    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverFormulaEnginePlugin)    univer.registerPlugin(UniverUIPlugin, {      container: 'app',    })    univer.registerPlugin(UniverDocsPlugin)    univer.registerPlugin(UniverDocsUIPlugin)    const univerAPI = FUniver.newAPI(univer)    univerAPI.createDocument({})  </script></body>

バージョン指定

unpkg と jsDelivr は特定バージョンの指定に対応しています。例として unpkg で x.y.z を使用する場合は、URL に @<version> を追加します。

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

このガイドはいかがですか?

© 2026 DreamNum Co., Ltd.