← Back
In Depth

Developers: Do 12 Months of Work in Two Weeks With This SDK

Jackson GabbardJackson Gabbard
  • Engineering
A code editor with an App running Cord code from cord-sdk that is surrounded by examples of Cord components

Google Docs taught the world how to work collaboratively in software.

A shared workspace. Real-time presence indicators. Inline comments. @mentions. Rich notifications. Live chat. Those are the baseline features for modern collaboration.

So if you’re a developer responsible for adding these features to your product, you might start with what sounds the easiest. Chat can’t be too hard to add to your app, right? It’s just a stream of plain text messages sent back and forth. A quick search for an open-source chat NPM package will confirm your suspicions, with a handful of ways to add chat to your app. Easy.

Of course, if you’re a backend engineer, you know exactly what it takes to code a custom chat app. Spin up a socket server like Node.js, a real-time Redis server, and an SQL db for long-term data storage, then build a UI to pull it all together. You also know, though, that live chat and comments will generally come with latency and scalability issues. Definitely possible to build (albeit not as simple as it sounds at first).

But maybe you’re trying to hack together live chat in your app in a few days. Then, you’d need to move faster. Perhaps you have a long list of other major features you need to implement, so you want to quickly get commenting out of the way. Or maybe you’re a frontend engineer, and would rather build from a pre-built framework – the chat equivalent of the headless CMS you implemented for your marketing team.

A collaboration SDK can help. But before we can explain what exactly a collaboration SDK is, let’s take a look at all the necessary ingredients for in-app collaboration.

Minimum viable collaboration

Image of Cord thread and facepile components

Minimum viable collaboration today requires at least the same collaboration features that Google Docs, Figma, Miro, and Airtable have. Users won’t compare your app to another with no collaboration features at all. They’ll compare your collaboration experience to the leaders in space.

So, what does that mean practically?

Chat and comments

You’ll need polished chat that integrates seamlessly with your app. People have seen chat in dozens of contexts now. They know what a good conversational UI is. You can’t just give them a text input. They expect text formatting, emoji support, auto-linking, image and file attachments. These are the things you get in every top-tier application and users have been trained that these are “standard” features. If you don’t have them, you’re below standard.

@mentions

Chat conversations will need to tie into your user database, so people can @mention collaborators and loop them into new and existing conversations. Users have seen this in every modern application. They expect it. If your app doesn’t have it, they’ll perceive that it’s missing.

Presence

It’ll need real-time presence indicators that show who’s online right now and in the past. Great apps even show where in the page someone is. This is a table stakes feature for human-to-human context that makes your app feel alive.

Notifications

Your app needs to send notifications to people who aren’t in the app right now. Those notifications will require deep links into your product, paired with in-line comments so people can point to exactly what they’re talking about in your app.

If your app comes up short in the collaboration department, your users will – at best – learn not to use the features you worked hard to build. And at worst, bad/confusing/broken collaboration features can make your users consider jumping ship.

Say for instance that you add commenting with no notifications as a v0. The surprising thing you might find is that users feel worse about your product. It goes like this – they add comments, but none of their teammates ever respond to them. So, they learn not to use the comments feature, and feel less happy with the application.

Notifications are required in this situation because otherwise there’s no way to pull the teammates to where the comments are. You’re relying on the lucky chance that a teammate just happens to find the comments. The problem isn’t that the teammates aren’t willing. The problem is that incomplete collaboration is worse than none at all.

Unsurprisingly, each feature you add reveals additional functionality you need to build, each with its own scalability and security concerns. What looked like simple chat or comments can quickly spiral into a suite of modern collaboration must-haves.

The complexities of modern collaboration

Stylised image showing multiple users represented by squares with browser icon connecting to each other via dotted lines. One square is server.

The devil is in the details. Each part of building a collaborative application comes with unique technical concerns that are not obvious when you have a greenfield project in front of you.

Take online/offline status. Is your colleague available to talk or are they offline? Show me the green dot. That should be easy enough to implement, a boolean field in a database to show online status. Even chat apps in the ’90’s had this figured out.

But you can accidentally DOS attack your own servers and users if you don’t build out online status carefully.

Imagine a user has your app open in multiple tabs. Are they online when a tab is open in the background? Is the background tab setting their status to offline, while the foreground tab is furiously overwriting the status to online? As someone navigates around your app, are they shown as offline on the first page then online on the second page?

Now scale this up to a 100-person team, each with multiple tabs open, and suddenly everything gets much more complex. One user coming online and offline rapidly turns into multiple updates per second for 100 concurrent connections. The CPU fans start to whir and suddenly your users are wondering why your app is so slow and their hands are so hot.

Online status was one of the many multiplayer collaboration features that we started building out, only to uncover the hidden complexity in creating real-time collaboration tools that seem, to the user, to work effortlessly.

It’s something repeated throughout the collaboration stack. The things that seem the simplest, like chat and comments, are filled with dozens of smaller considerations that require far more dev time to implement and run than it’d seem at first glance.

The good thing is, you don’t have to build it all from scratch.

A multiplayer collaboration SDK

When Linus Torvalds wanted a portable version of Unix, he coded the operating system that today powers most of the internet. When Jeff Bezos raised an initial $100k to build an online bookstore, he plowed that investment into Sun SPARCstation servers, set them up in his garage, and ran extension cords to keep from blowing fuses.

It wasn’t long before startups stopped coding operating systems and buying servers. One piece of the stack after another was abstracted away.

Stripe did it for payments. Twilio for SMS and phone calls. Okta for single sign-on. Mailgun for email. AWS for compute and storage and almost anything else one needs to build an app.

We build on the shoulders of giants. Rare today is the software team who builds everything from scratch. We code in languages others wrote, build with user interface frameworks shared by other companies, and add features powered by integrations. That frees us to build the things we set out to code and solve the truly unique, challenging problems that no one else can do.

Odds are, you didn’t join your team to figure out real-time commenting. You joined to build something cool–and now, that cool thing needs collaboration features. You need a Stripe for collaboration.

That’s what a multiplayer collaboration SDK is. Cord’s multiplayer collaboration SDK includes everything you need to build a world-class collaborative app, without coding comments, presence, chat, and notifications from scratch.

Stripe, famously, required only 7 lines of code to add a branded checkout to your app. That’s the easiest way to start accepting payments. Or, you could use Stripe’s APIs to build out a customized payments flow unique to your product. Either way, Stripe handles the complexities of actually accepting payments and preventing fraud. You get to focus on building a better experience for your users, without worrying about financial institutions.

The same goes for Cord’s multiplayer collaboration SDK. You can copy and paste in Cord’s UI elements, and add basic chat, presence, and commenting to your app in minutes. You could customize part of the experience, using Cord’s UI primitives to build chat and commenting experiences that look and feel like your app, without designing each part by hand. Or, you could go the AWS route, and use Cord’s APIs to build fully custom chat, commenting, and more, powered by Cord on the backend, but using 100% of your frontend code.

Maybe you want to iterate over time. Start out with UI elements, get feedback from your users, then migrate to a more custom build over time.

What you can build with Cord’s multiplayer collaborator SDK?

A multiplayer collaboration SDK, at a minimum, should include the tools you need to build a modern collaborative work experience similar to Google Docs, Figma, and other modern collaborative software.

Add collaboration quickly with UI Elements

Collage of various Cord components

Cord’s prebuilt UI Elements—including a single conversation thread, threaded comments, notification center, and page presence—are the easiest way to add multiplayer collaboration to your app.

These are one-and-done components that include everything you need for a rich experience out-of-the-box:. The message composer supports @mentions, file attachments, emoji reactions, and the ability to edit, delete, and resolve messages. Notifications are time stamped and support deep linking. Page presence automatically shows who is (and who has been) on a page, with last visit tool tips to show exactly when. Latency? Badging? Solved for.

This is the quickest—but admittedly least customizable way—to ship collaboration features. It’s like using Substack to power your team’s blog and newsletter—quick and easy, with little to think about.


Build custom collaborative features with UI Primitives

2x3 grid showing 6 of Cord components

Want to take more control over your app’s collaboration experience, without custom-coding everything? Cord’s UI primitives are the best option. They’re smaller elements from the collaborator system—the avatar element from the presence component, or the emoji picker from the comment message composer, among dozens of others—that you can pair with our APIs and JS hooks to create the exact functionality you need.

Think of Cord’s UI Primitives like using Tailwind UI components; they’ll help you build faster, while giving you a baseline of design and functionality to speed up your work.

Code a new collaborative UI for your app powered by Cord’s API

Or you can handle the entire collaboration UX, while taking advantage of Cord’s backend tech to power presence, notification delivery, chat sync, and more in your app. This way, you have full control over how everything works, without having to spin up Redis servers and find ways to prevent duplicate notifications, among other real-time collaboration challenges.

Cord’s multiplayer collaboration API is the AWS of real-time collaboration. It handles all of the backend complexity while freeing you to build what you want on a collaborative foundation.

Whichever route you take, you’ll get new features automatically added to your app’s collaboration, while you’re working on building the next important thing on your roadmap. Cord recently added Markdown and inline link support to comments—and if you’re using its UI elements or primitives, you get those new features with zero extra work. That’ll increase your developer velocity with time savings that compound over time.


The tech behind Cord’s multiplayer collaboration SDK

Cord’s tech stack includes the same tech you’re likely using in your application. We use TypeScript for both server and client, modern React with Hooks for the client UIs, GraphQL for the client-server interaction, Apollo on the client and server using WebSockets, React-JSS for managing styles, Webpack + Babel for transpilation, NodeJS on the backend, and Postgres database.

And we’ve dug deep to find ways to make Cord fit seamlessly into your development process, working through first WebComponents and ShadowDOM, then CSS variables, then CSS parts were the solution to enabling custom styling, before finally landing on using vanilla CSS classnames and open WebComponents.

The original version of Word had fewer features than today’s WordPad or TextEdit. The original version of Photoshop had scarcely more features than Preview.

Yesterday’s cutting edge is today’s minimum viable product. People expect more.

And whether they’re asking for it today or not, collaboration is part of that minimum viable feature stack. Collaboration aids adoption rates; it’s easier to convince someone to try out new software when you’re inviting them to collaborate with you. They boost productivity; less context switching, more content creation. They also cut churn; hard to quit using software when your entire team’s work revolves around it.

You can do it—but it’ll be tough trying building it all on your own. With Cord’s multiplayer collaboration SDK, you can offload one more thing from your devops list, and build your next feature that, with any luck, will be the next minimum viable feature every other app has to scramble to build in.

Sign up now and start building for free.