How Rayon replaced their own WebSocket infrastructure with Liveblocks to power realtime collaboration
By providing a cloud-based software solution, Liveblocks removed the burden of maintaining and scaling a realtime collaboration infrastructure for Rayon, allowing them to enhance their core offering and provide a better user experience for their customers.
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.
Draw and lay out your ideas on an infinite canvas.
Share your work & collaborate with friends & colleagues at the same time.
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.
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, 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.