Skip to main content Skip to footer

Introducing Real-Time Collaboration in JavaScript Spreadsheets

  • 0 Comments

SpreadJS v18 introduces a robust set of collaboration features designed to bring seamless real-time editing to JavaScript spreadsheets. These collaboration features are similar to what you will find in Excel for the Web or Google Sheets. Whether you're building applications for teams, enterprises, or embedded SaaS tools, these capabilities eliminate synchronization delays, streamline user interaction, and reduce the complexity of maintaining consistent data states across users. You can try it for yourself in our online JavaScript Spreadsheet Collaboration demo.

The Collaboration framework and Add-on are currently available in Preview Mode and will be officially released later this year. Features may evolve based on user feedback and testing.

Exploring Real-Time Collaboration in JavaScript Spreadsheet Apps

Add complete JavaScript spreadsheets into your enterprise web apps. Download SpreadJS Now!


🔧 Collaboration Framework (Developer Preview)

At the heart of this system is the JavaScript Collaboration Framework, a modular and extensible foundation that enables high-performance, low-latency collaboration for diverse document types including spreadsheets, rich text editors, and code editors.

Core Modules

  • js-collaboration - Handles core communication and synchronization:
    • Real-time, bidirectional data exchange
    • Scalable message broadcasting for live updates
  • js-collaboration-ot - Operational Transformation (OT)-based logic for conflict-free concurrent editing:
    • Integrates database adapters for seamless backend compatibility
  • js-collaboration-presence - Enables rich user presence features:
    • Displays active user cursors and selections
    • Supports UI elements for co-editing awareness

Customization and Extensibility

The framework supports rapid development of collaborative apps:

  • Reusable across spread-sheets-collaboration, quilljs-collaboration, and other document models
  • Support for adding user authentication, access control, and version tracking
JavaScript Spreadsheet Collaboration Architecture
This modular design gives developers flexibility to tailor collaboration features to their exact use cases.
Learn more in our Collaboration Framework docs.

🤝 SpreadJS Sheets Collaboration Add-on (Developer Preview)

To simplify spreadsheet-specific collaboration, SpreadJS includes a dedicated system built on our framework. The SpreadJS Sheets Collaboration Add-on provides drop-in features for enabling multi-user or multi-view editing on workbook data.

SpreadJS Sheets Collaboration (spread-sheets-collaboration)

  • Introduces OT types specific to spreadsheets
  • Defines:
    • Reducer logic for state merging
    • Transform logic for concurrency resolution

SpreadJS Collaboration Add-on (spread-sheets-collaboration-addon)

  • Enhances workbooks with collaboration logic:
    • Detects local changes to workbook state
    • Converts changes to ops and groups them into ChangeSets
    • Applies inbound ChangeSets to synchronize user views

Learn more in our Collaboration Add-on docs or try our online JavaScript Spreadsheet Collaboration demo.

Add complete JavaScript spreadsheets into your enterprise web apps. Download SpreadJS Now!

↩️ Undo and Redo Support

The add-on also supports collaborative undo and redo, with some important behavioral notes:

  • Undo Stack stores changes as ops, ensuring that all undo actions are synchronized across clients.
  • Undo affects only the user's own actions, not operations received from others.
  • If external operations arrive before an undo, the undo result may be transformed to apply correctly within the updated context.
  • Commands still define do, undo, and redo, but in collaborative mode, undo/redo execute via ops, not command logic.
  • Four events support custom handling during collaborative undo:
    • CollaborationStartUndo
    • CollaborationEndUndo
    • CollaborationStartRedo
    • CollaborationEndRedo

This provides developers with precise control over UI and state changes in collaborative sessions.

Learn more in our Collaboration Undo docs.

🔐 Permissions Management

The SpreadJS Collaboration Add-on supports configurable permission modes that define how users interact with the shared spreadsheet. View Mode restricts users to read-only access with optional local-only UI interactions (such as sorting or resizing), while Edit Mode enables full synchronized editing. These controls allow developers to implement fine-grained collaboration policies that reflect user roles.

This approach helps developers balance collaboration with control—empowering different user roles while safeguarding the integrity of the shared data.

Learn more in our User Permissions docs.


🏗️ Architecture Overview

Wondering how this all works? Here is a breakdown of how the new collaboration features are implemented:

  • Uses spread-sheets-collaboration-addon to generate ChangeSets from workbook changes
  • Relays ChangeSets to the server via the Collaboration Framework
  • Server processes and re-broadcasts operations to connected clients
  • Maintains data integrity using OT-based conflict resolution

Supported Use Cases

SpreadJS collaboration features cover a wide range of practical scenarios:

  • Multi-User Real-Time Collaboration - Multiple contributors edit the same spreadsheet simultaneously with instant updates.
  • Distributed Team Review - Enable reviewers and stakeholders to monitor changes live with selection tracking and cursor presence.
  • Audit and Version Tracking - Pair the collaboration system with version history to ensure traceability and accountability.
  • Collaborative Undo/Redo with Isolation - Allow users to reverse their own actions safely without disrupting others’ changes—even in concurrent edit sessions.

By integrating the SpreadJS Collaboration Framework and Sheets Add-on, developers gain access to production-ready infrastructure for real-time collaboration. With full control over sync logic, data flow, and user visibility, you can deliver modern, intuitive spreadsheet applications with minimal setup.

Feel free to test the Developer Preview for yourself in our online JavaScript Spreadsheet Collaboration demo.

To add Collaboration into your JavaScript Spreadsheet application, follow along in our Real-Time Collaboration Tutorial.

Tags: