Footnotes and endnotes

Headless supported

Add footnotes and endnotes to traditional, paginated documents. A footnote is laid out on its reference page; an endnote is placed according to the document’s endnote settings. Modern documents are not supported by this API.

Plugin Mode

Installation

Shell
pnpm add @univerjs-pro/docs-reference @univerjs-pro/docs-reference-ui

Usage

Add these plugins to an existing Docs editor with a configured license. Load the UI styles and the locale matching the editor.

TypeScript
import { UniverDocsReferencePlugin } from '@univerjs-pro/docs-reference'import { UniverDocsReferenceUIPlugin } from '@univerjs-pro/docs-reference-ui'import ReferenceLocale from '@univerjs-pro/docs-reference-ui/locale/en-US'import { LocaleType } from '@univerjs/core'import '@univerjs-pro/docs-reference/facade'import '@univerjs-pro/docs-reference-ui/lib/index.css'univerAPI.loadLocales(LocaleType.EN_US, ReferenceLocale)univer.registerPlugin(UniverDocsReferencePlugin)univer.registerPlugin(UniverDocsReferenceUIPlugin)

Preset Mode

Installation

Shell
pnpm add @univerjs/presets @univerjs/preset-docs-core @univerjs/preset-docs-drawing @univerjs/preset-docs-advanced

Usage

UniverDocsAdvancedPreset already includes both plugins. When using that preset, keep its registration instead of adding the plugins again.

Combine the core, drawing, and advanced presets, and merge their locale resources. Configure the client license as described in using a license.

TypeScript
import { UniverDocsAdvancedPreset } from '@univerjs/preset-docs-advanced'import AdvancedLocale from '@univerjs/preset-docs-advanced/locales/en-US'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import CoreLocale from '@univerjs/preset-docs-core/locales/en-US'import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'import DrawingLocale from '@univerjs/preset-docs-drawing/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-drawing/lib/index.css'import '@univerjs/preset-docs-advanced/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(CoreLocale, DrawingLocale, AdvancedLocale),  },  presets: [    UniverDocsCorePreset({ container: 'app' }),    UniverDocsDrawingPreset(),    UniverDocsAdvancedPreset(),  ],})

Insert and manage notes

TypeScript
const document = univerAPI.getActiveDocument()if (document) {  const noteId = document.insertFootnote(0)  if (noteId) console.log(document.getParagraphs(noteId))  console.log(document.getFootnotes(), document.getEndnotes())}

The offset is a UTF-16 position in the main body, including structural tokens. An invalid position, invalid note content, insufficient permission, or a modern document makes insertion return null. A successful insertion returns a stable note ID. The reference and note content participate in the same undo and collaboration mutation.

Use getFootnotes() / getEndnotes() to read notes and deleteFootnote(noteId) / deleteEndnote(noteId) to remove them. setFootnoteSettings() and setEndnoteSettings() configure numbering and placement; passing null resets explicit settings. Keep the returned note ID for addressing content; displayed numbers can change after pagination.

How is this guide?

© 2026 DreamNum Co., Ltd.