How Liveblocks Built an Interactive Playground with Sandpack
Bringing the fun back to product discovery and learning.
At CodeSandbox, we run your code in our cloud infrastructure, configure the environment for you and keep your code always ready, behind a shareable URL. Give it a try with this Next.js example or import your GitHub repo!
When we open-sourced Sandpack in 2021, we had a clear mission: to empower others to make their projects more accessible and engaging using live running code examples.
Ever since, we’ve been thrilled to see how some projects like the new React Docs have used Sandpack to offer interactive code examples while keeping a minimal footprint.
Today, I’m excited to chat with the Liveblocks team, who have used Sandpack to create a powerful interactive playground where their users can quickly learn by experimenting.
Stick around to learn more about Liveblocks and their experience integrating Sandpack.
Live collaboration for everyone
Liveblocks is building real-time collaboration infrastructure for developers. Our goal is to essentially condense all of Figma’s infrastructure (multiplayer editor, workspace document browsing, comments, etc.) into something developers can use to get up and running in just a couple of minutes.
At Liveblocks, we firmly believe that flexible office policies are here to stay and that as a result, all SaaS products will eventually need real-time collaboration. Every project we undertake at Liveblocks stems from this belief—and the belief that we can empower people to work better together and feel more closely connected with one another. If we get this right, Liveblocks will be the go-to real-time collaboration infrastructure that powers those digital experiences.
To get there, we want to be able to teach new users in the most engaging way possible, and this isn't always easy. And this is where our team, in a project led by Chris, decided to bet on creating brand new docs which includes an interactive tutorial.
The power of interactive learning
The best way to engage in a collaborative experience is to be part of it yourself—this was one of our first findings while considering how to improve our learning materials, which eventually led us to building an interactive tutorial.
Regular documentation and guides are great for skimming, but interactivity really maximizes the initial learning experience; it’s not just telling, it’s showing too, as you can see the effects of your code update live on the page. This also enables us to create a much more fun experience for our users, as they can experience that “aha!” moment when seeing the effect of their code in the preview window.
It’s been long proven that writing while learning helps you retain information, and gain a deeper understanding of the subject matter. This is the digital equivalent.
Interactivity through Sandpack
The release of Sandpack 2.0 caught our attention, and we started work on the interactive tutorial shortly after—we were particularly excited about the update enabling full-stack frameworks (e.g. Next.js) to be used in the browser, something that had never been possible before.
Liveblocks allows you to authenticate your application on the back end, and we finally had a chance to show this, allowing users to see a collaborative Liveblocks app running end-to-end live in their browser! We’re currently working on a Next.js section of the guide that takes advantage of this powerful feature.
Before Sandpack, there was no easy way to show a live preview of your code in the browser, even with just front-end code. Besides this, Sandpack empowered us to fix another problem—how do we share an editable online demo when you need an API key to use Liveblocks? Because Sandpack permits us full control of the files, we can dynamically insert a temporary API key into the demo code, meaning no user has to use their own API key.
This wouldn’t be possible in any other sandbox environment! Sandpack has really changed the game when it comes to interactive learning.
Under the hood
The implementation of Sandpack into our tutorial went wonderfully! The React package provides incredible DX, and it’s hard to believe that so much is possible in so few lines of code.
So far, we’ve found that being able to show multiple preview windows at once has been extremely valuable for our use case! Liveblocks apps rely on multiple users being connected at the same time, and it wouldn’t have been possible to share a real collaborative demo without multiple preview windows connected to the same room.
A fun customization we’ve made is inserting styles into the preview windows. If you switch the tutorial between dark & light mode, you’ll see the previews update to match the style! We’ve built this by dynamically inserting a CSS file containing the current theme’s design tokens into each preview. We love that this is possible with Sandpack!
The CodeSandbox team has also been very helpful in swiftly answering any questions we had, and also in fixing up a tricky bug we came across.
To any folks out there considering using Sandpack, I have written an interactive article all about how to use Sandpack in React, and it’s full of tips!
Your turn?
It is simply wonderful to witness how Liveblocks is empowering its users with this interactive playground powered by Sandpack. Kudos to Steven, Chris and the team for implementing this and sharing their story with the world!
At the end of the day, you too can bring interactive code examples to your project’s Docs, design system, blog post, or low-code tool.
Get started with Sandpack today and make your project more enjoyable for everyone!
