Magic Patterns is an AI-powered design platform that helps product teams move from idea to production within hours, rather than weeks. The platform allows users to turn natural language into fully functioning prototypes, which makes it possible to move from concept to working design in minutes. Product managers, designers, and website builders use Magic Patterns to explore ideas, share work with teammates, and iterate quickly. As the product expanded, teams expected the same realtime collaboration they experienced in tools like Figma and Google Docs. Users needed to work within the same canvas, see changes appear instantly, and review prototypes together. Delivering that experience, while also supporting AI-driven updates across the product, required a reliable multiplayer foundation.

## The challenge To deliver a modern collaborative design tool, Magic Patterns needed realtime editing state in a multiplayer document, live cursor presence, instant updates between their AI system and the front end, consistent syncing across multiple tabs, and inline comments for design review. Building this required specialized infrastructure work including WebSockets, conflict-free data management, connection handling, retries, and observability. It also created long term operational overhead that would slow product development and pull the team away from their core focus of building an AI driven design experience.

Magic Patterns needed a multiplayer foundation that integrated cleanly with their stack and allowed their small team to move quickly. ## Why Liveblocks Magic Patterns chose Liveblocks because it provided the fastest and most reliable way to deliver realtime collaboration for both their infinite canvas and their AI powered workflows. ### The “ah-ha!” moment The team’s first goal was to build a collaborative infinite canvas. Teddy expected features like shared cursors and live updates to take weeks, but discovered that Liveblocks abstracts away the complexity into simple React hooks. After downloading a [live cursors example](/examples/live-cursors), he had a full working version in three to four hours. ### Realtime collaboration for AI generated changes Liveblocks powers the communication path between Magic Patterns’ AI system and the front end. When a user submits a prompt, every open tab updates instantly and stays in sync.

### Stronger demos and user delight Liveblocks also creates a “wow moment” in sales demos. When prospects see multiple cursors moving in realtime and AI updates appearing instantly, they immediately understand the value of the product. The collaborative experience feels familiar, which helps Magic Patterns demonstrate the power of their AI tools much more effectively. ### Increased developer velocity By removing the need to build and maintain realtime infrastructure and WebSockets, Liveblocks has made the Magic Patterns engineering team significantly faster and allowed them to stay focused on product innovation. ## The outcome With Liveblocks, Magic Patterns delivers a fast and intuitive realtime design experience. Teddy shipped the first version of their collaborative infinite canvas in only a few hours, and that early success shaped how the team approached collaboration across the entire product. The same foundation now keeps AI generated updates in sync for every user, which creates a strong “wow moment” in demos and helps teams understand the product immediately. Relying on Liveblocks allows Magic Patterns to focus on building their AI design platform rather than maintaining multiplayer infrastructure. Collaboration has become a defining part of the product and a key reason customers choose Magic Patterns.

## What to consider when building a collaborative experience? To finish up, we have some final advice from Teddy Ni, Co-founder & CTO: 1. At some point your customers will ask for collaboration, so it is better to build it into the experience early rather than bolting it on later. 2. Putting realtime experiences into your codebase adds a lot of weight. If you build in-house keeping things in sync across tabs and AI updates becomes something you have to think about constantly. 3. Using the Liveblocks [examples](https://liveblocks.io/examples) to get started (and then Liveblocks) will save you a tremendous amount of development time.