Liveblocks uses Plasmo to deliver a real-time debugger for collaborative apps to their users

Liveblocks is a real-time collaboration infrastructure for developers. A fully hosted solution, Liveblocks, provide the complete toolkit to modularly embed collaborative experiences to your product in just days, not months.

Liveblocks recently launched a browser extension which is the natural next step in improving their users’ developer experience, allowing real-time visualization of Liveblocks data while developers embed collaborative experiences into their web apps.

In this case study, we explore the journey of Liveblocks' Plasmo browser extension, from its conception to its eventual launch. Through the insights of Vincent Driessen and Marc Bouchenoire, two members of the Liveblocks team, we dive into the process of creating the browser extension and how they leveraged Plasmo to make their vision a reality.

Vincent Driessen is a developer and focuses on making changes to public packages, APIs exposed to customers and backend work. Marc Bouchenoire is a design engineer at the company. He focused on the front-end side of the extension.

Introduction

Thousands of developers use Liveblocks to embed collaborative experiences inside their apps. Here’s Vincent describing it:

Vincent Driessen: Liveblocks allows developers to embed collaborative experiences into their products through APIs and tools. This enables them to make their existing app multiplayer, displaying the presence of other users and allowing simultaneous edits to shared documents. Liveblocks provides hosted conflict-free data storage and infrastructure, with features like automatic conflict resolution and undo/redo. We believe that the future of the web is collaborative, and Liveblocks can be used to add those features to existing apps. We have a strong focus on developer experience, and our simple APIs, rich documentation, and example gallery demonstrate that.

They’ve recently shipped a browser extension using Plasmo that makes it 10x easier to build with Liveblocks:

Vincent Driessen: Our browser extension is the next step in improving developer experience by providing a way to visualize Liveblocks data in real-time while building an app. The extension will be useful for discovering and playing with Liveblocks APIs, debugging apps, and adding new features.

Why a Browser Extension?

We build to solve problems, and some solutions are better than others. So — what was the problem Liveblocks was looking to solve, and why did they choose a browser extension?

Marc Bouchenoire: We wanted to provide a way to visualize Liveblocks data in real-time while a developer builds an app, and a browser extension seemed like the most natural solution. We saw browser extensions as the best way to allow people to quickly discover and play with Liveblocks APIs, debug apps, and add new features. With a browser extension, users could have greater control over the data they’re working with and more control over their workflow.

Marc Bouchenoire: The project started as a note from Vincent and evolved into a browser extension. The first idea was to have an embeddable component in a page that developers could add, but it became clear that a browser extension would offer a much better user experience.

The main reason is not having to make any code changes, you can just fire up the browser extension, and it works no matter which browser you prefer.

How the Liveblocks extension got started

Browser extensions are front-end adjacent. After all, they use the same technologies under the hood. But the skills and techniques required are quite different.

Marc and Vincent had no prior browser extension knowledge, but they could create an MVP of the Liveblocks DevTools extension in one weekend, thanks to Plasmo!

Marc Bouchenoire: We started building the Liveblocks DevTools extension at a hackathon. Despite the limited time, we began working on the Plasmo project, as we had very little knowledge of browser extensions, there were no expectations of what to expect.

Vincent Driessen: I went into the project with no experience building a browser extension. We quickly realized that I had underestimated the effort involved. We were fortunate to find Plasmo. It made the process a lot easier.

Favorite Plasmo Features

If you’ve built a non-Plasmo extension and wanted to use a modern front-end framework like React, you likely had to mess around with Webpack configs or use an existing template and retrofit it to your use case. With Plasmo, we take a different approach. Rather than providing static templates, the Plasmo Framework is a living program that constantly watches your files and handles all the config and bundling for you without you having to worry about any browser-specific quirks or fiddling with Webpack configs all day.

Vincent Driessen: The primary feature for me was the bundling setup. It made it incredibly easy to get started. We installed Plasmo, started from a template, and were off and running. The bundling has just always worked, which is great because it's one less thing we have to worry about. Multi-browser support was also a nice touch. We wanted to support Chrome out of the box, but having support for multiple browsers is a bonus. Before deciding to build a browser extension or a React component, the browser extension option made it easy to check out the example gallery by simply opening the browser extension and browsing through different examples. In terms of documentation, Plasmo has been helpful for me as a beginner in browser extension development. The documentation helped me understand the different components that make up a browser extension. For example, I learned about the pop-up and background components by simply creating a popup.tsx file or a background.ts file and playing around with it. Overall, the learning experience with Plasmo was a compact and dense way to learn about browser extensions, which I believe is one of its most valuable aspects.

Advice on using Plasmo

As experienced Plasmo users, the Liveblocks team had some advice for folks planning on trying out Plasmo.

Vincent Driessen: Use it! That's the advice. It takes away so much hassle. It’s almost like we take it for granted. It’s easy to forget how much Plasmo helps and to remember what life was like before Plasmo. As I said, the whole bundling and multi-browser setup helps a lot. On top of that, easily being able to just add a file, call it popup.tsx and have it just work is amazing. That convenience is just really, really good. Plasmo offers a lot of value out of the box.

Marc Bouchenoire: Yeah, I’d say definitely check out the examples. A lot of the time, in other projects, examples are super-specific and not very useful, but Plasmo has great examples that are useful for a wide variety of cases. We started with the dev tools example and were up and running in no time.

Criteria for picking Plasmo

Picking a framework is a very important process, as a lot of the time, frameworks tend to lock users down to a specific way of thinking, and it could be hard to migrate if you’re not liking something. The Plasmo framework's abstraction philosophy is to remove the most common configuration and boilerplate code. This enables developers to work under a higher abstraction layer, their UI library, and have easy escape-hatches. The Liveblocks team understood this which is why they decided to go with Plasmo:

Marc Bouchenoire: For us, it was either use Plasmo, or do everything in the vanilla extension way. The big thing we wanted from a solution like Plasmo was to not have so much tie-in and commitment to a specific platform. Once we saw that the abstraction was mostly the React layer, and that we’d use the native Chrome APIs for everything else, we realized that it was the right level of abstraction and commitment for us.

Back to Blog