Runway uses Liveblocks for real‑time collaboration to stay focused on their core product

Challenge

Runway is an applied AI research company building the next generation of creativity tools. Their mission is to make professional video and content creation accessible to all. They do so by taking recent advancements in computer graphics, the web, and machine learning to push the boundaries of creativity and lower the barriers to content creation.

Even with tremendous growth, they tried to keep a team small enough to fit at one (growing) table. But their mission required them to handle a lot of different technologies and tech stacks simultaneously: computer vision, deep learning, machine learning, deployments, infrastructure, GPU support...

As a result, they had to be lean and focus on their business’s core fundamentals and competitive differentiators to grow and scale. They also knew that having a browser-based experience with a single source of truth and a collaborative space for the entire team was a baseline for a competitive video editor.

It’s tough for me to imagine any professional tool built on the web that doesn’t have built-in collaboration components. You need to provide an experience that addresses how people work nowadays. You will take advantage of a huge opportunity to scale your product if you do.

Cristóbal ValenzuelaCo-Founder and CEO of Runway

That’s when the question arose: “Should we build our own collaboration infrastructure or outsource it to experts?”

Solution

Upholding their lean philosophy, they prioritized focus and tasked their tech team to find the best collaboration partner on the market.

Although many providers offered infrastructure for building high-performance and offline-capable collaborative web apps, Runway did not want the overhead of hosting, scaling, and maintaining their own WebSocket collaboration infrastructure.

Instead, they wanted a partner that would enable them to embed collaborative experiences in a matter of days.

That’s where Liveblocks stood out.

Runway uses React, so they installed the @liveblocks/react package to implement real‑time collaboration. In just a few hours, they added our Live Avatar Stack to their video editor so users would know who’s working simultaneously and what they’re currently doing.

Results

Runway brilliantly used Liveblocks features. The presence avatars are not only displayed at the top like in most products, but they also show it directly on the timeline to indicate where other people are looking. In addition, if someone starts editing a specific asset, they’ll pin their avatar next to it.

Previous

Show slide 1Show slide 2Show slide 3

Next

Not only does presence provide a fantastic user experience, allowing their members to be more productive, but it also reduces the risks of conflicts with two people losing time working on the same thing. If you see someone is already looking at an asset, you won’t start working on it.

[⚠️ Missing: ask Runway if they have any metrics/rates related to collaborative features]

Runway understood from the beginning that collaboration within a product is essential. If people love a product and feel they can be productive while using it, they’ll stick around and quickly spread the word by inviting others to collaborate. With Liveblocks, you can quickly implement a sharing system with permissions.

If this inspired you to make your product collaborative, here are a few references that will help you accelerate development:

• To implement the same presence logic, check our example: Live Avatar Stack.
• To show real‑time updates, check our tutorial: Creating a multiplayer to-do list with Liveblocks.
• For the share dialog, check our guide: Managing rooms, users, and permissions

[⚠️ Missing: ask Cristobal a quote about their experience with Liveblocks]