Univer Setup: Embed an Excel-Like Spreadsheet in Your Web App

Univer is an open-source Office SDK from DreamNum that lets you drop a real, Excel-like spreadsheet (plus documents and slides) into your own web app instead of embedding Google Sheets or paying for a commercial grid. It picked up about 1,100 GitHub stars in the last day, on top of roughly 21,000 total, after version 1.0 shipped on 24 September. A working spreadsheet with live formulas takes about ten minutes: scaffold a Vite project, install two npm packages, paste twenty lines of code.

• Univer is a framework, not a hosted app: you compose spreadsheet, document and slide editors from plugins, render them on a canvas, and drive them through one TypeScript "Facade" API.
• The open-source core is Apache-2.0 and covers formulas, number formats, filter, sort, data validation, conditional formatting and comments. Collaboration, import/export, charts and pivot tables sit in the paid Univer Pro layer.
• The same code runs headless in Node.js, which is the pitch behind its new "Office harness for AI agents" tagline: agents read and write workbooks through an API, people review the result in the editor.
• Univer is the official successor to Luckysheet, the same team's older spreadsheet library, which is now archived and unmaintained.

The exact steps, start to finish

1. Check your prerequisites. You need Node.js 20.19 or 22.12 or newer (Vite's floor; headless Univer itself only needs 18.17) and npm 7 or newer so peer dependencies install correctly. The commands are identical in PowerShell, Command Prompt and a macOS or Linux terminal.

   $ node --version
   $ npm --version

2. Scaffold a Vite project. Univer recommends Vite, esbuild or Webpack 5. The vanilla TypeScript template keeps the example free of any UI framework.

   $ npm create vite@latest univer-sheets -- --template vanilla-ts
   $ cd univer-sheets
   $ npm install

3. Install the Sheets preset. A preset is a curated bundle of plugins with styles and the Facade API already wired in.

   $ npm install @univerjs/presets @univerjs/preset-sheets-core

4. Give the editor a container. In index.html, replace the empty app div with one that has a height, because the canvas fills whatever box you give it.

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

5. Replace src/main.ts with the preset code. This is the README's Preset Mode example, plus four lines from the Facade API docs that write a tiny budget into the sheet, including a formula.

   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({})
   
   // Facade API: write values and a formula into A1:B4
   const fWorksheet = univerAPI.getActiveWorkbook()!.getActiveSheet()
   fWorksheet.getRange('A1:B4').setValues([
     ['Item', 'Cost'],
     ['Hosting', 20],
     ['Domain', 12],
     ['Total', '=SUM(B2:B3)'],
   ])

6. Run it and open the sheet. Start the dev server and open the URL it prints (normally http://localhost:5173). You get a full toolbar, a formula bar, and B4 showing 32, computed by Univer's formula engine. Change B2 and the total updates.

   $ npm run dev

7. Optional: build for production. This writes a static bundle to dist/ that any host can serve; there is no Univer server or account involved.

   $ npm run build

What is Univer and why is it trending?

Univer is DreamNum's second attempt at an embeddable spreadsheet. The first, Luckysheet, collected about 16,600 stars before the team archived it and pointed users here. Univer rebuilt the idea around a plugin architecture, a canvas renderer that keeps large workbooks responsive, and a dedicated formula engine, and it now spans six editors: Sheets, Docs, Slides, Boards, Bases and PDFs, though not all of them are in the open-source repo.

RelatedAgent-Native Setup: Build an Agent App With Its Own UI in 15 Min

The spike this week is the 1.0 release on 24 September, followed the same day by two patch releases. The team used the milestone to reposition the project as "The Office Harness for AI Agents." In practice that means the headless Node.js runtime, an AI SDK for agent workflows, and companion repos such as a Univer CLI and an MCP integration, so an agent can build or edit a workbook through structured calls and a person can then open it in the same editor to check the work.

How do you install Univer on Windows, macOS or Linux?

There is nothing OS-specific to install. Univer ships as npm packages, so the checklist above works unchanged in PowerShell, Command Prompt, Terminal on macOS or any Linux shell. The only decision is how to install it. Preset Mode, used above, is two packages and handles plugin order, styles and the Facade API for you. Plugin Mode is the README's longer route: you install thirteen individual @univerjs/* packages and register each plugin yourself.

$ npm install @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

Pick Plugin Mode when bundle size or lazy loading matters, or when you are writing your own plugins. Otherwise start with the preset. If you would rather not use a build tool at all, the docs also offer a CDN build and a single downloadable HTML file.

We ran the full checklist on a Windows 10 laptop with Node.js 24.17 and npm 11.13. The scaffold step added 16 packages, the preset install added 122 more, and Univer 1.0.2 rendered on the first run with no console errors. The formula cell calculated immediately.

How does Univer compare with other embeddable spreadsheets?

What are the gotchas before you rely on it?

The biggest one is the open-source boundary. The Apache-2.0 packages give you a genuinely capable spreadsheet, but real-time collaboration, edit history, importing or exporting .xlsx files, printing, charts and pivot tables are Univer Pro features. If your product needs users to upload an Excel file, budget for Pro or write your own import, and read the capability matrix before you commit.

RelatedBrowserSkill Setup: Give Claude Code Your Logged-In Browser

Second, it is heavy. Our production build of the single Sheets preset produced a main JavaScript chunk of about 6.9 MB, around 1.8 MB gzipped, and the installed node_modules folder was about 260 MB. That is fine for an internal tool or a dashboard people keep open all day, and a real cost on a marketing page. Plugin Mode with lazy loading is the fix the docs point to.

Third, version discipline. The README says every @univerjs/* SDK package must stay on the same release line, and the docs warn against importing a plugin that a preset already includes. Mixing versions or doubling up plugins is the fastest way to get odd runtime errors. Finally, the snapshot you load is data only: change a workbook through commands or the Facade API, never by editing the snapshot object, and call save() when you want to persist the current state.

Our take

Univer is the most complete open-source answer we have tried to "we need a real spreadsheet inside our app," and the setup is genuinely quick: two packages and a container div got us a formula-aware sheet in minutes. The Facade API is the best part, readable enough that the four-line budget example above needed no guesswork. The catch is that the features buyers ask about first, Excel import and live collaboration, are exactly the paid ones, and the bundle is big. Use it for internal tools, dashboards and agent-generated reports today. If you need .xlsx round-tripping on a free license, you will be writing that part yourself.

Original analysis by GenZTech. Tool documentation: dream-num/univer on GitHub.