Quickstart

If you want to get started with Univer as quickly as possible, you've come to the right place! This page will guide you through building a working Univer app in just a few minutes.

Play Online

You can play with Univer online without installing anything. Just click the link below and start using Univer right away.

Starter Kit

If you prefer to start with a local development environment, you can use the following starter kits to create a new Univer app in just a few seconds.

Run the following command requires your device has nodejs >= 18, npm >= 8 and git installed.

npx degit dream-num/univer-doc-start-kit univer-doc-start-kit
cd univer-doc-start-kit
npm install
npm run dev

Run the following command requires your device has nodejs >= 18, pnpm >= 7 and git installed.

pnpm dlx degit dream-num/univer-doc-start-kit univer-doc-start-kit
cd univer-doc-start-kit
pnpm install
pnpm dev

Great job on your first steps with Univer! You've successfully created your first project and gotten a taste of what Univer can do.

Basic Concepts

Before diving deeper into Univer, please read this document to understand the basic concepts of Univer, which will help you use Univer more smoothly.

The basic concepts include:

Plugin
Snapshot
Command
Facade API

Plugins

All of Univer's features are provided by plugins, which are the basic building blocks of Univer. Multiple plugins combined together form a Univer application.

The responsibilities of plugins include:

Implementing features, such as @univerjs/sheets-filter provides filtering functionality.
Providing some basic capabilities, such as @univerjs/engine-render provides rendering capabilities.

You can combine Univer's plugins to customize a Univer application that meets your requirements and avoid loading unnecessary code. You can also extend Univer's functionality by writing plugins to meet personalized needs.

Write a CSV import plugin to learn how to write a plugin.
Univer Architecture to learn more about Univer's architecture design.

Snapshot

You need to load a snapshot in Univer to load a document. Each type of document provides its own snapshot format. Please refer to the above API documentation to learn how to write a snapshot that meets the format requirements:

The snapshot format of a spreadsheet is IWorkbookData.
The snapshot format of a document is IDocumentData.

Functional plugins can store resources, such as images, etc., through the resources field. For more information, see Plugin Custom Model.

Caution

Note! Univer's snapshot is only used to store data. It does not reflect the latest document status at runtime! If you want to save the document status as a snapshot, use the method to save the snapshot on the Facade API.

Command

In Univer, all data modifications need to be executed through commands. The command-based approach can better track changes in values, implement functions such as undo, redo, and collaborative editing, handle complex associated logic between functions, etc.

If you want to modify document data through commands, please refer to How to Find Command ID. If you choose to modify document data through the Facade API, the Facade API will actually prepare parameters for you and execute commands behind the scenes.

Caution

Do not modify the snapshot directly! This will not take effect and will not trigger the update of views or UI. Please modify data through commands or the Facade API.

Facade API

Due to the high complexity of office applications, Univer's architecture is also very complex. To make it easier for developers to use Univer, we provide the Facade API, which is a wrapper for Univer's first-party plugins, providing simpler interfaces that make it easier for developers to use Univer.

We are improving the Facade API. Stay tuned for more updates. If you have any questions or requirements, please submit an issue on GitHub.

Of course, everything comes with a price. The Facade API is a high-level API that abstracts the underlying details. If you need to implement some complex features, you may need to understand Univer's architecture and use the low-level API directly.