Integrate in Web Component

If you are looking for how to use Web Component components as custom components, please refer to here.

Univer can be integrated into Web Components.

Example

TypeScript
import type { Univer } from '@univerjs/presets'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'class UniverEditorElement extends HTMLElement {  private univer?: Univer  connectedCallback() {    if (this.univer) return    const container = this    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetDocsCoreEnUS,        ),      },      presets: [        UniverDocsCorePreset({          container,        }),      ],    })    univerAPI.createDocument({})    this.univer = univer  }  disconnectedCallback() {    this.univer?.dispose()    this.univer = undefined  }}customElements.define('univer-docs-editor', UniverEditorElement)
HTML
<univer-docs-editor style="display: block; height: 600px"></univer-docs-editor>

How is this guide?

© 2026 DreamNum Co., Ltd.