univer

Univer is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.

13,879

1,241

13,879

168

View on GitHub View on NPM

Top Related Projects

handsontable

21,997

JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

ag-grid

15,514

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

sheetjs

36,333

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

Quick Overview

Univer is an open-source, high-performance spreadsheet and document processing engine. It aims to provide a powerful and flexible solution for building web-based office applications, offering features similar to Microsoft Excel and Google Sheets but with enhanced customization and integration capabilities.

Pros

High performance and scalability, capable of handling large datasets efficiently
Extensive API for customization and integration into various web applications
Cross-platform compatibility, working seamlessly across different browsers and devices
Active development and community support

Cons

Relatively new project, may have fewer resources and documentation compared to more established alternatives
Learning curve for developers unfamiliar with spreadsheet engine architectures
Limited built-in features compared to fully-fledged office suites (though this is by design for flexibility)

Code Examples

Creating a new Univer instance:

import { Univer } from '@univerjs/core';

const univer = new Univer();
const workbook = univer.createWorkbook();

Adding data to a sheet:

const sheet = workbook.getActiveSheet();
sheet.setCellValue('A1', 'Hello');
sheet.setCellValue('B1', 'World');
sheet.setCellValue('C1', '=A1&" "&B1');

Applying formatting:

import { BoldPlugin } from '@univerjs/sheets-ui';

univer.registerPlugin(BoldPlugin);
sheet.getRange('A1:C1').applyStyle({ fontWeight: 'bold' });

Rendering the spreadsheet:

import { UniverRender } from '@univerjs/engine-render';

const container = document.getElementById('spreadsheet-container');
const render = new UniverRender(univer, container);
render.render();

Getting Started

To get started with Univer, follow these steps:

Install Univer and its dependencies:

npm install @univerjs/core @univerjs/engine-render @univerjs/sheets-ui

Create a basic HTML file with a container for the spreadsheet:
```
<div id="spreadsheet-container"></div>
```

Initialize Univer and render the spreadsheet (using the code examples above):

import { Univer } from '@univerjs/core';
import { UniverRender } from '@univerjs/engine-render';
import { BoldPlugin } from '@univerjs/sheets-ui';

const univer = new Univer();
univer.registerPlugin(BoldPlugin);

const workbook = univer.createWorkbook();
const sheet = workbook.getActiveSheet();

// Add data and apply formatting
sheet.setCellValue('A1', 'Hello Univer!');
sheet.getRange('A1').applyStyle({ fontWeight: 'bold' });

// Render the spreadsheet
const container = document.getElementById('spreadsheet-container');
const render = new UniverRender(univer, container);
render.render();

This basic setup will create a simple spreadsheet with a bold "Hello Univer!" message in cell A1. From here, you can explore Univer's extensive API to add more functionality and customize the spreadsheet to your needs.

Competitor Comparisons

handsontable

21,997

JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

More mature and established project with a larger community and ecosystem
Extensive documentation and examples available
Supports more advanced features like data validation and custom cell types

Cons of Handsontable

Commercial license required for many use cases
Heavier and potentially slower for large datasets
Less flexible for custom styling and advanced UI modifications

Code Comparison

Handsontable:

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

Univer:

const univer = new Univer({
  container: document.getElementById('container'),
  sheet: {
    row: 100,
    column: 20,
    data: data
  }
});

Both libraries provide similar basic functionality for creating spreadsheet-like interfaces in web applications. Handsontable offers a more feature-rich experience out of the box, while Univer focuses on performance and flexibility for custom implementations.

Handsontable is better suited for projects requiring a comprehensive spreadsheet solution with minimal customization, while Univer may be preferable for developers looking to build more tailored experiences or work with larger datasets.

ag-grid

15,514

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

More mature and widely adopted project with extensive documentation
Offers both community and enterprise editions with advanced features
Supports multiple frameworks (React, Angular, Vue) out of the box

Cons of ag-grid

Steeper learning curve due to complex API and configuration options
Enterprise features require a paid license, which can be costly for some projects
Heavier bundle size compared to lighter alternatives

Code Comparison

ag-grid:

const gridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 }
  ]
};

univer:

const workbook = new Workbook();
const sheet = workbook.createSheet('Sheet1');
sheet.setCellValue('A1', 'Make');
sheet.setCellValue('B1', 'Model');
sheet.setCellValue('C1', 'Price');

Summary

ag-grid is a powerful and feature-rich grid library with extensive support for various frameworks. It offers advanced functionality but comes with a steeper learning curve and potential licensing costs. univer, on the other hand, is a newer project focusing on spreadsheet-like functionality, which may be more suitable for specific use cases requiring Excel-like features.

sheetjs

36,333

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

Pros of sheetjs

Mature and widely adopted project with extensive documentation
Supports a vast array of spreadsheet formats and features
Lightweight and works in both browser and Node.js environments

Cons of sheetjs

Limited built-in UI components for spreadsheet rendering
Requires more custom code for advanced interactive features
Commercial use requires a paid license

Code Comparison

sheetjs:

import * as XLSX from 'xlsx';

const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "output.xlsx");

univer:

import { Univer } from '@univerjs/core';
import { UniverSheet } from '@univerjs/sheet';

const univer = new Univer();
const sheet = univer.createSheet();
sheet.setData(data);
sheet.export('xlsx', 'output.xlsx');

Key Differences

univer focuses on providing a complete spreadsheet solution with built-in UI components
sheetjs excels in file format support and data processing
univer offers a more modern API and is designed for web-based spreadsheet applications
sheetjs has a larger community and more extensive third-party integrations

Both projects have their strengths, with sheetjs being more suitable for data processing tasks and univer better suited for building interactive spreadsheet applications.

exceljs

15,448

Excel Workbook Manager

Pros of ExcelJS

More mature and widely adopted project with extensive documentation
Supports a broader range of Excel features and file formats
Robust API for reading, writing, and manipulating Excel files

Cons of ExcelJS

Primarily focused on server-side Node.js usage, less suitable for browser environments
Heavier library size compared to Univer
Less emphasis on collaborative editing and real-time updates

Code Comparison

ExcelJS:

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');
worksheet.getCell('A1').value = 'Hello, World!';
await workbook.xlsx.writeFile('example.xlsx');

Univer:

const univer = new Univer();
const sheet = univer.createSheet();
sheet.setCellValue('A1', 'Hello, World!');
await univer.exportToExcel('example.xlsx');

Summary

ExcelJS is a more established library with comprehensive Excel file manipulation capabilities, primarily for Node.js environments. Univer, on the other hand, is a newer project focusing on browser-based spreadsheet functionality with collaborative features. ExcelJS offers broader Excel support, while Univer aims for a lighter, more modern approach to spreadsheet operations in web applications.

Luckysheet

16,643

Luckysheet upgraded to Univer

Pros of Luckysheet

More mature and stable project with a longer development history
Extensive documentation and examples available
Larger community and more third-party integrations

Cons of Luckysheet

Limited to spreadsheet functionality
Heavier and potentially slower for large datasets
Less modular architecture, making customization more challenging

Code Comparison

Luckysheet:

luckysheet.create({
    container: 'luckysheet',
    data: [{ name: 'Sheet1', celldata: [{ r: 0, c: 0, v: 'Hello' }] }]
});

Univer:

const univer = new Univer({
    container: document.getElementById('univer'),
    modules: [UniverSheet],
});
univer.createSheet();

Key Differences

Univer is a newer, more modular project aimed at creating a comprehensive office suite, while Luckysheet focuses solely on spreadsheet functionality. Univer's architecture allows for easier extensibility and customization, potentially making it more suitable for complex, tailored solutions. However, Luckysheet's maturity and extensive documentation may make it a better choice for projects requiring a robust, well-established spreadsheet component.

Both projects are open-source and actively maintained, but Univer's broader scope and modular design position it as a more versatile option for developers looking to implement a full-featured office suite in their applications.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

A full-stack, isomorphic office SDK for building spreadsheets, documents, and presentations.

Build embeddable productivity experiences with a plugin architecture, Canvas-based rendering, a formula engine, and one Facade API that works in the browser and on Node.js.

ð Documentation | â¨ Showcase | ð API Reference | ð Blog

â¨ What is Univer?

Univer is an open-source SDK for creating office applications inside your own product. It gives you the building blocks for spreadsheet, document, and presentation experiences without forcing you into a hosted app or a fixed UI.

Use Univer when you need to:

Embed spreadsheet or document editing into a SaaS product, internal tool, BI workflow, or AI application.
Run workbook/document processing on the server with the same architecture used in the browser.
Compose only the features you need through plugins or start quickly with presets.
Extend behavior through custom plugins, commands, services, UI components, and Facade APIs.

Univer is not a spreadsheet file viewer only. It is a framework for building your own productivity surface.

ð Highlights

â¡ Built for large surfaces _{Canvas-based rendering and a dedicated formula engine keep complex workbooks responsive.}	ð§© Plugin-shaped by default _{Compose, replace, lazy-load, or extend capabilities without taking the whole stack.}	ð¤ Headless for AI infrastructure _{Run workbook and document logic in Node.js to power agents, automation, and server-side workflows.}
ð ï¸ Product-ready SDK _{Framework adapters, Facade APIs, presets, and headless runtime fit real integration paths.}	ð Dark-mode ready _{UI components and the rendering engine both adapt to light and dark themes.}	ð Unified Facade API _{One consistent API surface for workbooks, ranges, formulas, and documents across browser and Node.js.}

ð Why Univer?

Isomorphic by design: run UI apps in browsers and headless processing in Node.js.
Plugin-first architecture: every capability is delivered as a composable plugin, so features can be added, removed, replaced, or lazy-loaded.
Preset mode for fast integration: use curated plugin bundles from univer-presets when you want a working app quickly.
Plugin mode for full control: manually compose packages when you need custom loading, smaller bundles, or deep integration.
Facade API: work with workbooks, worksheets, ranges, documents, formulas, commands, and events through a higher-level API.
Canvas rendering engine: support large editable document surfaces with a rendering layer shared across document types.
Extensible UI: integrate with React, Vue, Web Components, and framework-specific application shells.

â¡ Quick Start

For most applications, start with Preset Mode. Use Plugin Mode when you need to manually compose packages and control plugin registration.

Preset Mode (recommended)

Presets are curated collections of Univer plugins that include the required Facade API registrations and styles.

pnpm add @univerjs/presets @univerjs/preset-sheets-core

import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),
  },
  presets: [
    UniverSheetsCorePreset({
      container: 'app',
    }),
  ],
})

univerAPI.createWorkbook({})

Plugin Mode

Plugin Mode gives you lower-level control over packages, style imports, locale merging, Facade API registration, and plugin order.

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui @univerjs/sheets-ui @univerjs/ui

import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import SheetsEnUS from '@univerjs/sheets/locale/en-US'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import SheetsFormulaEnUS from '@univerjs/sheets-formula/locale/en-US'
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/sheets-ui/lib/index.css'
import '@univerjs/sheets-formula-ui/lib/index.css'
import '@univerjs/sheets-numfmt-ui/lib/index.css'

import '@univerjs/engine-formula/facade'
import '@univerjs/ui/facade'
import '@univerjs/sheets/facade'
import '@univerjs/sheets-ui/facade'
import '@univerjs/sheets-formula/facade'
import '@univerjs/sheets-numfmt/facade'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      DesignEnUS,
      UIEnUS,
      DocsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaEnUS,
      SheetsFormulaUIEnUS,
      SheetsNumfmtUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)
univer.registerPlugin(UniverSheetsFormulaUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

const univerAPI = FUniver.newAPI(univer)
univerAPI.createWorkbook({})

Your page needs a container:

<div id="app" style="height: 100vh"></div>

Learn more in the Installation & Basic Usage guide, the createUniver reference, and the Facade API reference.

Choose	When to use it	Start here
Preset Mode	You want a working Sheets, Docs, or Node setup with minimal configuration.	`univer-presets` and the getting started guide
Plugin Mode	You need strict control over packages, plugin registration order, lazy loading, or custom runtime composition.	This repository's `examples/` and architecture guide
Headless Mode	You need server-side workbook/document processing, formula calculation, or automation without UI.	Headless Univer

Keep all @univerjs/* packages on the same version. If you use Univer Pro packages, keep @univerjs-pro/* versions aligned as well.

For API compatibility expectations, experimental APIs, internal APIs, and deprecation rules, see the API Stability Policy.

ð§ Compatibility

Browser runtime: Univer is compiled with a Chrome 70 target and aims to work on Edge >=70, Firefox >=63, Chrome >=70, Safari >=12.0, and Electron >=5.
Polyfills: Univer relies on Intl.Segmenter. Add a polyfill such as @formatjs/intl-segmenter if your target browser or runtime does not provide it.
Build tools: We recommend Vite, esbuild, or Webpack 5. If your build tool does not support the exports field in package.json (common in Webpack 4), you may need extra path mapping.
React: Univer's view layer is built on React 18, supports React 18 and 19, and provides minimal compatibility support for React 16.9+ and 17.
Node.js runtime: Headless Univer supports Node.js >=18.17.0. Developing this monorepo requires Node.js >=22.18.

ð ï¸ What You Can Build

Area	Open-source capabilities	Univer Pro extensions
Sheets	Workbooks, worksheets, ranges, selection, formulas, number formatting, filtering, sorting, data validation, conditional formatting, hyperlinks, comments, find and replace, notes, tables, drawing integration, and extensible UI plugins.	Real-time collaboration, edit history, import/export, printing, charts, pivot tables, sparklines, outlines, shapes, in-cell graphics, data connectors, server-side calculation, and performance-enhanced formula features.
Docs	Rich document model, editing UI, lists, hyperlinks, drawing integration, comments, quick insert, and shared document architecture.	Collaboration, import/export, printing, enhanced tables and lists, columns, callouts, code blocks, quotes, shapes, and remote comment resources.
Slides	Presentation data model and UI packages under active development.	Pro slide model and UI, slide import/export, chart and table model/UI plugins, and shared shape-editing infrastructure.
Bases	Build custom structured-data experiences on top of Univer's plugin, command, and model architecture.	Base database model, commands, formula integration, workbench UI, field editors, and render-engine views.
Runtime	Browser apps, Node.js headless usage, Web Worker/RPC patterns, multi-instance usage, and server-oriented automation.	Collaboration client/server packages, Node.js collaboration client, Pro server services, SSR, computing delegation, server-side calculation, and changeset replay tooling.
Integrations	React, Vue, Web Components, framework templates, theming, localization, and custom plugins.	Pro presets and enterprise deployment packages.

Sheets are the most mature product surface today. Docs and Slides share Univer's architecture and continue to evolve in the same SDK.

ð Open Source and Pro

This repository contains Univer's open-source core and first-party OSS plugins. Univer Pro is developed separately as a commercial extension layer for advanced product surfaces, collaboration, server features, and enterprise integrations.

Category	Open source	Univer Pro / commercial
Foundation	Core SDK, plugin system, rendering engine, formula engine, Facade API, themes, i18n, and framework adapters.	Pro presets and enterprise deployment packages.
Sheets	Core spreadsheet editing, formulas, number formatting, filter/sort, data validation, conditional formatting, notes, tables, hyperlinks, comments, drawing, find and replace.	Collaboration, edit history, import/export, print, charts, pivot tables, sparklines, outlines, shapes, in-cell graphics, data connectors, range preprocessing, and enhanced formula engine features.
Docs	Document model and editor UI, lists, hyperlinks, comments, quick insert, and drawing integration.	Collaboration, import/export, print, enhanced tables/lists, columns, callouts, code blocks, quotes, shapes, and remote thread-comment resources.
Slides	OSS presentation model and UI packages.	Pro slide model/UI packages, slide import/export, charts, tables, and reusable shape editor UI.
Bases	Extensible plugin architecture for custom data-centric products.	Base database core model, commands, mutations, formula integration, workbench UI, field editors, and render-engine integration.
Server and runtime	Node.js headless runtime, RPC/Web Worker patterns, and server-oriented automation primitives.	Collaboration server, Node.js collaboration client, SSR services, computing delegation, server-side calculation, and collaboration changeset replay tooling.

Pro features are documented in the Univer Pro guide. They are intentionally separated here so the OSS package surface is clear.

Boundary principles:

OSS packages in this repository are intended to be useful on their own under the Apache-2.0 license. Univer Pro is optional and is not required to use the public OSS SDK APIs.
Bugs, regressions, and security issues in OSS packages should be reported and fixed in the OSS repository, even when a related Pro feature exists.
OSS documentation should not imply that Pro-only capabilities are available in public @univerjs/* packages. Pro-only APIs, packages, and deployment paths should be named explicitly.
When an OSS feature has a Pro enhancement, the OSS behavior should remain documented independently so users can evaluate the open-source surface without reading commercial docs first.

ð Ecosystem

Core SDK: dream-num/univer, this monorepo.
Presets: dream-num/univer-presets, curated plugin bundles for browser and Node.js apps.
AI agent skills: dream-num/univer-sdk-skills, reusable instructions for AI agents working with Univer integration, Pro features, plugin development, and Node backends. See the AI Skills guide.
Documentation: docs.univer.ai, including Sheets, Docs, Slides, recipes, and Pro guides.
API Reference: docs.univer.ai/reference, the Facade API and generated API reference.
Examples and showcase: Univer Showcase and this repository's examples/.
AI-native spreadsheets: dream-num/univer-mcp, Univer Platform / MCP integration for driving Univer Sheets with natural language.

ð¦ Repository Guide

.
âââ packages/      Core packages, engines, document types, UI plugins, and feature plugins
âââ examples/      Local browser and Node.js demos used for development
âââ common/        Shared internal tooling, mock data, storybook, and utilities
âââ e2e/           Playwright and visual comparison tests
âââ tests/         Additional integration test projects
âââ docs/          Architecture notes, images, and repository-local documentation

Package-level READMEs live beside each package under packages/.

ð§âð» Development

Requirements:

Node.js >=22.18
pnpm >=10

git clone https://github.com/dream-num/univer.git
cd univer
pnpm install
pnpm dev

Useful commands:

Command	Purpose
`pnpm dev`	Start the local examples app.
`pnpm build`	Build workspace packages, excluding internal common packages.
`pnpm test`	Run unit tests through Turbo.
`pnpm typecheck`	Run TypeScript checks through Turbo.
`pnpm lint`	Run ESLint.
`pnpm test:e2e`	Run Playwright tests.
`pnpm storybook:dev`	Start Storybook for UI component development.

Read CONTRIBUTING.md before opening a pull request.

ð Contributor Notes

Repository-local notes worth reading before deeper changes:

Building Isomorphic Univer: how to split browser, Node.js, UI, and shared plugin logic.
API Stability Policy: stable, experimental, internal, deprecated, and breaking-change expectations.
Contributing to Facade API: API design expectations for FUniver, FWorkbook, FRange, and related Facade classes.
Naming Convention: file, folder, interface, plugin, command, and dependency injection token conventions.
Fixing Memory Leaks: common leak patterns and debugging workflow for Univer instances.
Architecture TLDRs: concise notes for formula engine, web worker, permission, selection, and ref-range behavior.