Liveblocks is a set of APIs that enables developers to build collaborative experiences into their apps and tools in minutes. In other words, if a maker wants to build a product where users can see other users on their webpage or document in real-time, they can integrate the Liveblocks API rather than build that element from scratch.
This Wordle-inspired game that uses the Liveblocks APIs is one great example of the types of multiplayer experiences Liveblocks can enable:
Steven Fabre and his co-founder, Guillaume Salles, launched the product publically last July. Since then, the startup has gone on to raise $1.4M in pre-seed funding and hire a team to continue building its offering
Like some startups, Liveblocks was born from a pivot, i.e. what Steven and Guillaume originally set out to build was a video presentation tool, not an API. Also like some startups, Liveblocks was born out of a necessity whilst solving another problem. But live, collaborative experiences was a problem that had frustrated Fabre for years, not just a few hours while fiddling with a new project.
Steven and I spoke about how the twists and turns of his career led him to the idea for Liveblocks. If you’re a designer learning to code, a make frustrated with a problem, or an entrepreneurial spirit trying to find their path, you might find some inspiration in Steven’s maker story.
The building bug
“I got into making things when I was 13 or 14 years old,” Steven shared. “I was a big fan of the soccer team in my hometown, and I had a website and blog. That’s how I learned I wanted to hack websites. I took a bunch of Photoshop tutorials too to make banners and such. Then I started selling websites to clients on the side when I was in high school, but I never really felt that could be a career.”
Fast forward through school and internships that bolstered his skills: “I was doing small jobs to make money and pay rent. I was a waiter at a French restaurant, but I tore my ACL playing basketball so I couldn't walk for a little bit or do my job. I posted an ad on Gumtree and ended up finding another plan; I started to sell websites again. On that path, I ended up joining The Iconic, a Rocket Internet incubator startup, to do web development.”
From coding to design
When you’re young, it’s easy to misperceive a hobby for a career or vice versa (perhaps less so for Gen Z or younger). Steven’s job at The Iconic gave him the space to re-think his passion and skills.
“To be honest, I hadn’t realized that there was a career behind this — design or product design. When I was younger my perception was: if you want to make things, you have to code. The people at University with me were super talented developers, good at math, and that sort of thing. I was more of a creative person. At The Iconic, my manager was a UX designer and I started doing a bit of prototyping. I saw a path for me, so I started to make that shift.”
Steven went on to cofound the first ride-sharing app in Australia but was forced to shut down quickly due to regulations. Next, he worked for a couple of years as a Product Designer at Campaign Monitor.
“I was working on the drag and drop email builder in the browser for designing your responsive emails. I became a massive creative tool nerd during that time.”
Then came side projects. With rare crossover expertise in design and coding, Steven saw a gap in the market for a tool that could enable designers to create web animations.
“All the designers I had worked with didn’t know how to code and, at the time, there were no tools for web animations unless you knew how to code. So I made a small tool to help animate static layers from Sketch or Photoshop without having to code.”
I had checked Steven’s LinkedIn prior to speaking. On “paper,” the tool called Easee looked like an easy win. He went through an acquihire from InVision after not much longer than a year of working on it. Steven laughed:
“To be honest, it was actually pretty difficult, and difficult to stay motivated. I had a full‑time job and I was working nights and weekends on it. My engineering skills back then were… I was really struggling. I had an idea of what I wanted to build from a design point of view, but I didn't have the skills to really build it. So I focused one step at a time on trying to build different prototypes until I had a basic MVP that I could build. The product sort of worked but I focused more on the end goal of where I wanted to go. To be honest, I wouldn’t release that protoytpe or first version of the product now because I don’t think it was that good! But I ended up putting together a website and a mini landing page where you could sign up and try the product.”
Steven also wrote a Medium post covering the learnings he had gained from spending 8-9 months building Easee and posted the product to Twitter. Easee was perhaps the first prototyping tool for animation at the time, so the product generated interest and picked up some momentum. Just a few hours later, an email from InVision founder, Clark Valberg, was in his inbox. Though Steven declined Clark’s initial offers to join the team (he wanted to build Easee), he eventually got on board through an acquihire.
On why he thinks Clark move so swiftly to offer him a job, Steven said: “I was passionate about it. I just wanted to learn to build a full-on application and I just went for it. I don’t want to speak for Clark but I think when you see someone that does something on their own it tells you that the person is passionate. It shows that the person cares about that problem.”
How to build real-time collaboration
Steven worked for four and a half years on lnVision Studio, a new product for doing any kind of digital design, including animation.
“Figma came along and it was really this great design tool. We started transitioning InVision from a desktop-based, file‑based application to a browser‑based, fully collaborative application. This was the first time I got exposed to this type of problem. We had six or seven engineers working on this full‑time for a year and a half, trying build the infrastructure to make it work. It worked, but there were delays. It wasn’t perfectly in sync. I ended up leaving to join Facebook Messenger to work on building tools for the designers internally.”
Eventually, Steven started a new project with Guillaume — a collaborative video presentation tool.
“We worked on this for a little while and faced the same issues that I had faced at InVision. We spent a whole lot of time trying to figure out how to do real-time collaboration — how the back end is going to work, how the servers are going to scale, how you resolve conflicts when you have five or six people editing data at the same time. We had no time to focus on the core mechanics of the tools. At six to nine months in, we took the learnings we had and ultimately dropped the initial tool.”
The co-founders instead went all-in and productized the API they had built. Liveblocks launched publically in July with a goal to help “any maker or company build super performant, collaborative applications without having to worry about the backend side of things.” The product did well on Product Hunt, reaching #4 Product of the Day. Steven was also awarded a Product Hunt Maker Grant the following month.
Liveblocks also raised a $1.4 million pre-seed round during the summer from investors including Boldstart, Seedcamp, Meta fund, Logic & Rhythm, Ian Storm Taylor, Max Stoiber, Moritz Plassnig, Badrul Farooqi, and Anthony DiMare.
“We now have thousands of developers using Liveblocks. We're about to be a team of seven and are aiming to grow to 15 by the end of the year,” Steven shared with me this February. “We're working towards a major release of the storage block later in March – we think that's gonna be a game-changer.
Steven gives many of his past experiences credit for the idea to create Liveblocks.
“I had realized how difficult it was to build real-time collaborative experiences. Those experience working on creative tools for eight years — Campaign Monitor, Easee, and Invision Studio — taught me a lot. Those tools were complex to build. You have all sorts of mechanics that you need to sort out. It's not like a standard app or simpler SaaS product where you have one user flow. There are a million paths to take. All this complexity created good learnings for Liveblocks.”
Coding vs. design?
A prominent debate exists online and in design communities — should designers learn how to code? Before we hung up, I wanted to ask Steven about it, particularly since it seems more common to see designers learn to code versus the other way around.
“There haven’t been many designers I’ve worked with that can code. Being able to code was a bit of a differentiator and helped me with conversations with engineers. Being able to understand what they're talking about really helps to make design decisions and build relationships with engineers because you don't end up designing something that’s just impossible to build. You’re more realistic. That’s probably a curse sometimes too because if you don’t know the coding aspects, maybe you don't feel as many constraints; maybe more great ideas come out of that.
I love engineering work even more nowadays. It’s great to be the decider of what needs to be done, since it’s not work coming from another designer. I like being a the intersection of both.”