How Rayon replaced their own WebSocket infrastructure with Liveblocks to power realtime collaboration

Challenge

Rayon is a collaborative space design platform that allows designers to draw, share, and collaborate directly in their browsers.

The majority of our cities are made up of architecture that is neglected by current design software due to technology’s focus on exceptional constructions, which is why Rayon’s manifesto stresses that “ordinary buildings matter.” They advocate for new space design tools to cater to this overlooked segment and democratize space design for the 90% of buildings in our cities.

Previous

Show slide 1Show slide 2

Next

We recently had a fireside chat with Bastien, co-founder of Rayon, where we discussed the company’s mission.

Rayon aims to be more than just a collaborative tool; they want to become the best platform for designing floor plans as a team. This is a significant challenge, especially for complex projects like floor design, which requires collaboration from many different professionals, including interior architects, facility managers, event planners, and retail managers.

To succeed when facing such a challenge, it is crucial to be deliberate about what to build internally and what to outsource. Initially, their team created a prototype for a WebSocket infrastructure but soon realized that building and maintaining it was painful and was taking them away from their core offering focus.

Solution

Bastien came across Liveblocks on Twitter and was intrigued. He delved deeper into the website, documentation, and examples, and ultimately decided to give it a try.

Since Rayon uses React, they installed the @liveblocks/react package to implement realtime collaboration without adding too many dependencies to their codebase.

Within a few hours, they replaced the collaborative layer they had built themselves with Liveblocks. Without the burden of maintaining and scaling their homegrown realtime WebSocket solution, they can focus on their core product.

They implemented a canvas that allowed multiple people to create and view shapes simultaneously. Using Liveblocks’ presence and broadcast APIs, they quickly added presence avatars, live cursors, the ability to view all actions done by others, and the ability to follow someone else.

“I discovered Liveblocks on Twitter. I ripped out what I’d done previously, and actually, the experience was awesome. It took me less than an hour to switch to Liveblocks, and that’s just less stuff to worry about. So it’s all beneficial!”

Bastien DollaCo-Founder at Rayon

Results

Bastien, the co-founder of Rayon, believes that the future of design tools lies in cloud-based software supported by generative AI. This approach will enable you to provide your users with a single source of truth and centralize data to train your AI models. By doing so, you will be able to offer features that make your users more efficient and creative.

Rayon’s team has the necessary domain knowledge, designer empathy, and technical expertise to provide the best floor plan design experience in the market, especially with recent advances in AI technology.

This focus on floor plan design is what Rayon has chosen to pursue, and therefore they outsource everything that is not part of their core offering to experts, such as Liveblocks, to support their collaborative infrastructure.

“Liveblocks just works, and that’s nice. That’s one less thing to think about and that’s pretty much what I expect when I outsource a solution like this. The main goal for me is just to have less maintenance, to have less overhead for the team. And that’s exactly what happens. Liveblocks just works. We don’t have to worry about it.”

Bastien DollaCo-Founder at Rayon

If this has inspired you to build a new collaborative app, you can use our Starter Kit to kickstart it. If you already have a product, here are a few references that will help you accelerate development:

• To show who is currently in the same document as you, check out our example: Live Avatar Stack.
• To show people's cursors in real time, check out Live Cursors.
• To broadcast events to multiple people instantly, such as when a shape is created or moved around, check out Live Cursors Chat.
• To offer a collaborative and conflict-free whiteboarding experience, check out our tutorial: Creating a Collaborative Online Whiteboard with Liveblocks.
• To implement a share dialog, check out our guide: Managing Rooms, Users, and Permissions.