Univer: The Open Source SDK That Gives Your App Spreadsheets, Docs, and Slides

You know that moment when your app needs to display a table, and you think “maybe I’ll just embed a Google Sheet”? Then you remember the iframe clutter, the OAuth dance, and the fact that you can’t control the UI. Or maybe you want to let users edit documents inside your product without sending them to another site.

That’s where Univer comes in. It’s an open source SDK that lets you embed spreadsheets, documents, and presentations directly into your web app. No iframe trickery, no vendor lock-in. Just clean, customizable components you drop in and extend.

What It Does

Univer is a set of Web Components (and React/Angular/Vue wrappers) that render full-featured office document editors in your app. You initialize a workbook, document, or slide deck, point it at data, and users get a professional editing experience:

• Spreadsheets – cells, formulas, formatting, charts, conditional rules. Works offline if you configure it that way.
• Documents – rich text, headings, lists, images. Think Notion-like editing but embeddable.
• Presentations – slides, shapes, animations. Still early but functional.

The data layer is schema-agnostic, so you can back it with local state, a file store, a database, or even a live collaboration backend. It’s not a thin wrapper over a hidden iframe — it’s rendering everything in the DOM with Canvas, which means you get full control over styling and behavior.

Why It’s Cool

Three things stand out:

1. Real offline support – Univer can work entirely in the browser without a server. Great for internal tools or desktop-like web apps where users need to edit without connectivity.

2. Plugin architecture – The core is tiny. Everything else (formulas, charts, toolbar, undo/redo) is a plugin. You can swap out features, add custom buttons, or build your own formula engine without forking the repo.

3. It’s not an iframe – Because Univer renders natively in your page, you don’t have the classic iframe problems. No double scrollbars, no cross-origin communication hacks, no weird z-index bugs. CSS in your app affects the editor layout naturally, and you can integrate it with your own drag-and-drop or keyboard shortcuts.

Use cases include:

• An internal dashboard that lets users edit live data tables
• A collaborative document editor hooking into your own auth system
• A custom presentation tool for your product’s workshop mode
• A Notion-like app built without paying for a proprietary embed service

How to Try It

The easiest way is to pull the package and drop a spreadsheet into a page.

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

Then in your code:

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

const univer = new Univer();
univer.createUnit(defaultSheet);

Check the Interactive demo on the GitHub repo for a live example. They also have a full playground at univer.ai/playground if you want to click around before touching code.

For a bare-bones React setup, you can use the pre-built component:

import { UniverSheet } from '@univerjs/sheets-react';

function MyApp() {
  return <UniverSheet data={myData} />;
}

Documentation covers all the major frameworks, plus a guide for building custom plugins.

Final Thoughts

Univer is still in active development (v0.x), and you might hit rough edges — some features like pivot tables or advanced animations aren’t there yet. But for an open source project that hasn’t hit 1.0, it’s shockingly polished. If you’ve ever spent a weekend building a janky spreadsheet UI from scratch, you’ll appreciate what they’ve done.

The team is responsive on GitHub issues, and the community is growing. If you need document editing that’s not a black box, give it a spin. Worst case, you learn something new about Canvas rendering. Best case, you ship a feature your users actually enjoy.

Found this project via @githubprojects