Import Web SDK 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:
text
@univerjs/core -> UniverCore@univerjs/docs-ui -> UniverDocsUi@univerjs-pro/docs-print -> UniverProDocsPrint@univerjs/docs-ui/locale/en-US -> UniverDocsUiEnUS@univerjs/core/facade -> UniverCoreFacadePlugin 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/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/en-US.js"></script> <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/en-US.js"></script> <script src="https://unpkg.com/@univerjs/docs-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" /> <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.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverDesignEnUS, UniverUiEnUS, UniverDocsUiEnUS), }, }) 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>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.jsHow is this guide?