Miro and Figma have triggered the imagination of many developers looking to build similar collaborative features into their applications.
It’s a fast developing landscape with new entrants and innovations emerging all the time across product categories - CMS to slide decks, spreadsheets to project management.
However, building the underlying realtime infrastructure and architecting the collaborative features is a costly and lengthy process - just look at some of Figma’s posts on the subject and you’ll find out why.
Thankfully there is another way. A number of solutions have become available to address these problems and make it quicker and easier to add realtime collaboration capabilities. Each has its own unique qualities and advantages. This is our round-up of the five best solutions.
What are realtime collaboration solutions?
There isn't a one-size fits all explanation for what a realtime collaboration solution is, but here is a non-exhaustive list describing the main types:
Collaboration APIs and SDKs
Collaboration APIs and SDKs enable developers to build and add collaborative features to their web applications without having to build and manage the realtime infrastructure necessary to support them. Some support low level functionality such as presence, whilst others offer higher level APIs for specific collaborative tasks like live cursors, locations or app state management. The two main types are summarised here:
- Collaboration PaaS: Managed infrastructure with server-side APIs and SDKs for building multiplayer solutions and features. Some collaboration PaaS also offer UI components for specific features.
- Realtime PaaS: Managed serverless Pub/Sub infrastructure capable of powering a wide range of realtime applications including chat, broadcast, data sync, multiplayer and more. Accessed through a host of SDKs and APIs, you can use to build a range of realtime features (not just collaborative ones).
Multiplayer frameworks
A multiplayer framework is typically a JavaScript library/framework for storing data persistently in the cloud and synchronizing updates in realtime between client/users. However these typically don’t come with a realtime backend. You must build/bring this, including a scalable WebSockets infrastructure. There is much to still implement yourself.
What to look for in a realtime collaboration solution
Miro, Google docs and Figma have set the experience users now expect. To meet these high expectations you need a solution that delivers not just the functionality required but is also high performing. From working with customers, building a broad range of collaborative solutions, these are the most commonly talked about requirements:
- Great developer experience: From docs, to example code, intuitive APIs to support everything should go towards creating a smooth, developer experience.
- Feature flexibility: Have your cake and eat it! A balance between purpose-built, opinionated APIs and flexible Pub/Sub channels for building collaborative environments around applications, plus flexible realtime APIs to add a host of additional features and deliver realtime sync throughout.
- Integrations: Will easily slot into your existing tech stack, with a number of front and backend integrations
- High performing: Built for scale. Reliable, highly available, and ensures data integrity out-of-the-box. In short, it just works!
The five best collaboration APIs and SDKs
Ably
Ably is a realtime experience platform. Founded in 2016, our realtime APIs and SDKs help you create multiplayer collaboration and a host of other realtime experiences ‘in-app’, without having to build the underlying infrastructure. Our globally-distributed, multi-region network offers unrivalled guarantees around performance, data integrity, reliability, and scalability. While the flexible Pub/Sub channels allow you to build any realtime experiences you need. Specifically for collaboration, Ably offers Spaces, a purpose-built product for building collaborative environments, and LiveSync, an upcoming product that will help you deal with app state management between the frontend and your own backend with ease, while offering optimistic updates on the frontend.
Best fit for
Building a large scale, fully featured collaborative app with realtime sync throughout. Our collaboration product Spaces is built to work with Ably’s other realtime products like Pub/Sub Channels to unlock end-to-end realtime messaging throughout your app. While Spaces powers the features you need to enable synchronous collaboration for teams and manage their participant state, Pub/Sub Channels allows you to flexibly broadcast and sync app state changes between members, your backend and any other pieces in your system design. With this mix of building blocks you can add any feature you want from: live avatar stacks, live cursors, member locations, live updates, component locking, annotations, chat, comments, notifications, and more.
Points to note
- Feature specific APIs: The only product that comes with purpose-built, realtime collaboration APIs for adding avatar stacks, member location, live cursors, and component locking. All APIs are optimized for top performance. For example, the live cursors API automatically batches pointer position events to avoid unnecessary streaming of messages whilst ensuring negligible latency.
- Easy to use: Spaces is a simple and intuitive SDK that can be used with any web application.
- High performing: Powered by our market-proven, realtime infrastructure that’s built for reliability at scale, backed by five nines SLAs and messaging guarantees.
- <65 ms median latency.
- Guaranteed message ordering and (exactly-once) delivery, even in unreliable network conditions.
- Redundancy at regional and global levels.
- Dynamic elasticity, built for scale.
- Integrations: From Webhooks and React Hooks to Lambdas and streaming processors like Kafka, Ably has built front and backend integrations for a range of protocols, frameworks, databases and cloud services.
- Realtime experiences unlocked: Spaces is built to work with Ably’s other complementary products like Pub/Sub Channels to unlock end-to-end realtime messaging throughout your app. More specifically, our upcoming LiveSync product will help you deal with app state management between the frontend and your own backend systems with ease.
Liveblocks
Liveblocks is a realtime collaboration infrastructure for developers. First launched in 2021, it provides a set of APIs and tools to add multiplayer features to applications. Developed purely for multiplayer, they offer a fully hosted solution and toolkit to modularly embed collaborative experiences into products.
Best fit for
If you are looking to build a small-scale application with a handful of collaborative features, Liveblocks supports four core features to help you build what you need, these include: presence (for building features such as avatar stacks, live cursors, etc.), broadcast (to push updates to clients) and data stores for co-editing and conflict resolution.
Points to note
- Features available in a range of frameworks: Next.js, React, Redux, Zustand.
- Examples available for key use cases: Examples show how you can build different features using their presence and broadcast APIs.
- Collaborative feature SDK: Liveblocks doesn’t come with purpose-built APIs for collaborative features, you need to architect and build from scratch using their presence and broadcast APIs.
- Limited messaging architectures: Restricted to P2P. Liveblocks doesn’t support backend systems except for token auth.
- Realtime experiences unlocked: Multiplayer collaboration only. To add other realtime functionality, such as chat and notifications, you’d need to use a different system which adds extra complexity.
- Not built for global scale: Limited detail available on global network. They only offer a four nines SLA, available to enterprise customers only.
- No data integrity guarantees: Messages can arrive out of order, more than once, or not at all, creating poor user experience.
- Provide long-term storage: Liveblocks provides full long-term storage for everything, although this means that you are forced to use their storage mechanism, potentially in place of or in addition to the main DB.
Replicache
Launched in 2022, Replicache is a framework for creating multiplayer web applications. It allows you to connect your data model and your UI with a backend (third party or your own) that takes care of handling data transactions. By doing so updates are handled quickly, eliminating the need for any kind of waiting indicator - ‘spinning wheel’.
Best fit for
Replicache is great when it comes to enabling users to see each others' changes as they happen, without any reloads (UI responds instantly). Furthermore applications can go offline for minutes or hours and sync up when they come back online. To run, it requires an infrastructure that normal web apps don’t have, so best if you are creating an application from scratch - otherwise you’ll have to refactor all your business logic.
Points to note
- Realtime updates: Users see each others’ changes live, as they happen. No refreshes, no locking.
- Instant UI: All reads and writes are “optimistic” by default. No more waiting indicators or progress bars.
- Offline support: Applications can go offline and sync up smoothly when they come back online.
- Have to bring/build your own backend: Whilst this offers a great deal of flexibility, it also greatly adds to the build time as you will have to work out the implementation of a number of features required for an end-to-end collaborative solution. Plus you then have the ongoing management overhead.
- Best for new applications: Replicache requires a very specific way of modelling your application state. That means that if you’re thinking about integrating Replicache into your existing application, you’ll probably have a hard time doing it, because you’ll have to refactor all your business logic.
- Collaborative feature SDK: Replicache doesn’t come with ready made APIs for collaborative features, you need to architect and build from scratch.
- Not built for global scale: You have to bring the backend. It will be as reliable and scalable as what you choose to put in your backend and what you use for transport.
- No data integrity guarantees: Have to bring your own backend - so dependent on chosen stack.
- Integrations: No formally supported integrations.
Cord
Founded in 2020, Cord describes themselves as “a toolkit for adding chat and live collaboration to your product”. They offer pre-built components for chat, messaging, commenting and user interactions that you can drop-in to your application. They also have an SDK and APIs for building your own features.
Best fit for
If you're looking to drop-in collaboration features, where you can tweak the UI to match your brand, then Cord is worth exploring. Their pre-built UI components, for things like comments, enable you to add features to your application, and tweak certain elements like colours, and fonts, etc. to match your brand.
Points to note
- Drop-in components: Add out-of-the-box capability and tweak the UI to match your brand.
- Lower level APIs add flexibility: Have the option to tailor functionality of UI components further using their JS SDK.
- Chat features: If the primary goal is to enable collaboration via chat, comments, and annotations, Cord has built a number of dedicated components and examples.
- Collaborative components and SDK: Largely focused on asynchronous chat, comments, and annotations. You can build collaborative features such as avatar stacks, but you need to work through implementation using their lower level APIs in combination with feature components
- Integrations: Templates available for Next.js and Remix
- Realtime experiences unlocked: Very focused on adding chat capability as a means to collaborate. To add additional realtime functionality you’d need to use a different system which adds extra complexity.
- Not built for global scale: Three nines SLA for enterprise customers only.
- No data integrity guarantees: Messages can arrive out of order, more than once, or not at all.
PubNub
PubNub is a realtime communication platform that can be used to support a range of applications, including collaborative apps. It is compatible with various platforms across web, desktop, mobile, and IoT, with various SDKs for rapid development of clients and servers.
Best fit for
If you are happy to invest the time in architecting the collaboration features you need, PubNub is an option to consider when your roadmap requires more than just collaboration features.
Points to note
- Collaborative features SDK: PubNub doesn’t come with purpose-built APIs for collaborative features, you need to architect and build from scratch using their presence and broadcast APIs.
- Realtime platform: PubNub can be used to build a range of realtime features, not limited to multiplayer.
- No data integrity guarantees: Messages can arrive out of order, more than once, or not at all, creating a poor user experience.
- They use long-polling instead of Websockets: Long-polling can mean less reliability, more latencies and overhead.
- No data center fallback support for SDKs: A regional outage will impact users in that region.
Which is the best collaboration solution for your use case?
Like everything in software, the answer is “it depends” - what realtime and collaborative features do you need? How do you envision users engaging with your application? Are you looking to save time up front with a turn key solution at the cost of flexibility later? It's critical to try and answer these questions early on so you don't end up locked-in with a vendor. And consider your appetite for sourcing and managing multiple vendors if you start with a solution that’s built just for collaboration but doesn’t support the implementation of other realtime features like chat, broadcast, Pub/Sub, data sync, notifications, and more.
If you are looking for a solution that can support you now - as you integrate collaborative features - and as you scale, and introduce new features, you can try Ably for free (no credit card required) and make your own assessment.
Our free plan includes:
- 6M monthly messages
- 200 peak concurrent channels
- 200 peak concurrent connections
Learn more at the following links:
