How Yuque Built Its Own Online Spreadsheet: Architecture, Challenges, and Lessons

Background

Zhao Yong (nickname "Yuchun") joined Alibaba Taobao UED in 2009, moved to Ant Experience Technology in 2015, and now leads online spreadsheet development in the Yuque team.

Yuque, an innovative product of Ant Financial's Experience Technology Department, provides knowledge creation, organization, and communication services for individuals and teams. Emphasizing a superior creation experience, Yuque continuously invests in its editor, and this article introduces the self‑developed online spreadsheet.

Development Timeline

2019

May: Project initiated.

August: Beta released with basic row/column operations, styling, merge cells, filter/sort, and support for links, images, attachments, checkboxes, and dropdowns.

September: Import feature, multi‑sheet, formulas, statistics bar, and date/currency/time types added.

October: Format brush, image copy‑paste, attachment preview, border functionality.

November: Export, real‑time collaboration, cell protection.

December: Charting and selective paste.

2020

January–March: Stability, compatibility, performance, and experience optimizations.

April: Conditional formatting and dropdown improvements.

May: Table templates, filter enhancements, and color filtering.

After a year of development, Yuque’s spreadsheet meets 80‑90% of typical Excel users' needs.

WHY

The team asks “Why build an online spreadsheet?” and “Why develop it in‑house?”

Spreadsheets originated with VisiCalc in 1978, not Excel. Over the decades, products like Excel, Google Docs, Numbers, Airtable, and various Chinese solutions emerged, each influencing the market.

Yuque adopts the DIKW model (Data → Information → Knowledge → Wisdom) to illustrate how spreadsheets transform raw data into actionable knowledge, reinforcing the need for robust data handling within a knowledge‑base product.

HOW

Technology Stack

The front‑end follows an MVC architecture: Model handles data, View renders via native Canvas and UI built with React, Ant Design, and AntV. Events funnel through a control layer to handlers, then to commands that encapsulate operations and maintain a history for undo/redo. Commands are synchronized across users via WebSocket.

Co‑editing Model

Instead of transmitting low‑level operation transforms (OT), Yuque synchronizes high‑level commands, reducing latency (typically <100 ms) and minimizing conflict probability. Conflict handling is further mitigated by restricting undo on conflicting actions.

Cell Capacity

Client‑side storage (LocalStorage, 5 MB limit) allows roughly 250 k cells after compression; with optimal network conditions and minimal formulas/styles, the limit can be higher.

Performance

Benchmarks show acceptable editing performance even at the million‑cell scale.

Copy‑Paste Repair

Yuque’s spreadsheet robustly restores data when copying from HTML sources that may lose tr or td tags, outperforming many competitors.

WHAT

The final section shares informal lessons from the self‑development process, emphasizing the benefits of full control over data models, user experience, performance, development cost, maintenance, and business flexibility.

Yuque now fully self‑develops four editors, including the spreadsheet, and will continue iterating to provide the best creation experience.