skills.rest
dream-num
dream-numOFFICIAL
Explore all skills by this author →
Website𝕏@univerhqGitHub

univer-integrate

Integrate Univer units into React, Vue 3, HTML, and Node.js apps.

7|4|Updated Apr 23, 2026
Search Tags:#frontend#integration#react#vue#plugin#univer
One-click install
npx skills add https://github.com/dream-num/univer-sdk-skills --skill univer-integrate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: univer-integrate
Source: https://github.com/dream-num/univer-sdk-skills/tree/main/skills/univer-integrate
Command: npx skills add https://github.com/dream-num/univer-sdk-skills --skill univer-integrate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Embedding and managing Univer units in web apps is complex; this skill provides a structured approach to integrate Univer across React, Vue 3, HTML, or Node.js environments, enabling initialization, plugin registration, and Facade API usage.

Core Features & Use Cases

  • Embedding Univer Spreadsheets/Documents/Slides into modern frontends (React, Vue, Web Component) and Node.js.
  • Initializing Univer instances, registering engines, UI infra, and unit plugins in correct order.
  • Configuring themes and locales and performing data manipulations via the Facade API (FUniver, FWorkbook, FWorksheet, FRange).
  • Real-world scenario: quickly spin up a demo editor in a web app to manage a workbook and sheets.

Quick Start

Register the core engines, UI infra, and unit plugins in the correct order, create a Univer unit, and obtain the API with FUniver.newAPI.

Frequently Asked Questions about univer-integrate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a Univer spreadsheet into a React or Vue 3 web app?▼

To embed a Univer spreadsheet in React or Vue 3, initialize a Univer instance, register engines and UI plugins in the correct order, and use FUniver.newAPI to create and manage workbook units.

What is the correct order for registering Univer plugins during initialization?▼

Registering Univer plugins requires adding core engines first, followed by UI infrastructure, and finally unit plugins to ensure proper initialization and side-effect facade imports for data manipulation.

Does Univer integration support Node.js environments or only frontend frameworks?▼

Univer integration supports Node.js environments alongside React, Vue 3, and HTML, allowing you to initialize instances and manipulate data via the Facade API outside of a browser UI.

How do I configure themes and locales when integrating Univer?▼

You can configure themes and locales during Univer initialization, then perform data manipulations using the Facade API classes like FWorkbook, FWorksheet, and FRange.

What is the best way to manage Univer workbooks and sheets in a web component?▼

The best way to manage Univer workbooks in a web component is by using the Facade API, which provides structured access to FUniver, FWorkbook, and FWorksheet for efficient unit manipulation.

Related Skills

Explore More Software Engineering Skills→
dream-numdream-num
7

univer-pro-integrate

Integrate Univer Pro enterprise features into frontend projects.

Official
Advanced
dream-numdream-num
7

univer-node-backend

Run Univer in Node.js for headless spreadsheet processing and workbook automation.

Official
Advanced
dreamtidesdreamtides

univer

Create and manipulate dynamic spreadsheet applications with the Univer TypeScript library.

Official
Advanced
RedWoodOGRedWoodOG
174

frontend-design

Design accessible, responsive frontend components for React, Vue, Svelte, or vanilla HTML/CSS/JS.

Community
Advanced