Fragment is infrastructure for automating financial operations. See how they used Liveblocks Storage to make their schema editor multiplayer and fix their front end along the way.
Join thousands of companies using Liveblocks to build multiplayer experiences for people and agents.
Fragment is infrastructure for automating financial operations. They work with fintechs, marketplaces, and brokered businesses where money movement is core to the product and too complex for tools like Stripe. As those products evolve from simple payments into wallets, credit, rewards, and cross-border flows, teams need infrastructure that handles both scale and complexity. Building the infrastructure was just the first part of the problem. They also needed to figure out how to make it usable for cross-functional teams who ship financial products.
Money is multiplayer. Multiple systems, teams, and perspectives are constantly interacting with the same financial data, which makes building financial products deeply cross-functional. Engineering, product, finance, compliance, and operations all need to align on how money moves through a system.
Before Fragment, that work moved through a chain of disconnected tools: product wrote a PRD, finance translated it into accounting scenarios in a spreadsheet, and engineering implemented it in code. Because each team spoke a different language and worked in different tools, every handoff introduced risk.
Fragment's answer is a low-code schema editor. Under the hood, it edits a strongly-typed JSON config that defines how funds move through a customer's product. On the surface, it's a UI that engineers, finance, and operations can all work in together. It's the first thing customers see in a demo and the fastest way for them to understand how Fragment works.
Inviting teammates, then watching the live avatar stack grow as people join the schema editor.
What we built with Liveblocks is the first thing customers see when they demo the product. It's the most valuable part of the product.Varun MohanCTO at Fragment
Fragment first shipped the schema editor as a local CLI tool, then brought it to the web with a homegrown sync approach: an auto-polling save running every ten seconds from each connected client. It didn't hold up. Two tabs in the same browser would clobber each other. Viewers could overwrite the work of editors. Customers would put hours of work into a schema, walk away, and come back to find it gone. The Fragment team was spending real time digging through logs to recover lost data.
The team briefly considered going back to single-player, but cross-functional collaboration was the whole point of the editor. They committed to fixing the multiplayer story properly. Building the realtime layer themselves wasn't a serious option. Their team is focused on financial infrastructure, not realtime sync. They evaluated Yjs and a handful of sync engine vendors before landing on Liveblocks.
It just works. The product is simple in a good way.Varun MohanCTO at Fragment
The migration was deliberately incremental. Fragment started with a single menu in the editor as a proof of concept, rather than rewriting the whole experience at once. That gave them a low-stakes way to validate the integration in their stack before committing to the full migration.
Create, adjust, and reconcile billing workflows in Fragment's schema editor.
Today, Fragment uses Liveblocks Storage and Presence. All shared state on the core editing pages is managed by Liveblocks behind a clean read and write boundary, so the rest of Fragment's app doesn't need to know how realtime sync is implemented.
Integrating Liveblocks took longer than the team expected, and not because of Liveblocks. To use it cleanly, the front end had to be coherent. Fragment's existing front end had been written quickly during the early GPT-3 era, with a tangle of React components, useEffects, and state management that more or less worked but was hard to reason about. Liveblocks didn't fit until that was untangled.
Integrating with Liveblocks made our code better. We had a jangled mess of React components. It forced us to untangle the garbage, and now we can do more with tools like Claude.Varun MohanCTO at Fragment
The cleanup paid off in two ways. The first was reliability. With all shared state living in Liveblocks behind a clear boundary, the entire class of clobbering and lost-save bugs went away. The second was velocity. The cleaner front end is now something Fragment's AI coding tools can actually contribute to. Claude can take a feature from Fragment's API and add the corresponding UI on its own. Designers who used to avoid the front end are shipping changes there directly. We have also made it easier to build with Liveblocks in AI coding tools—see our agent skills for Cursor and Claude.
The schema editor is now central to how customers use Fragment. Teams model funds flows visually, work side by side across engineering, finance, and operations, and align on the design before any of it ships to production. The same JSON config can also be edited from Fragment's CLI or API and synced into the editor through an async backing process, so engineers who prefer the terminal aren't cut off from the multiplayer experience.
Teams model funds flows and edit the schema together in Fragment's multiplayer editor.
Instead of passing documents and spreadsheets between teams, the work happens in one shared environment. The result is faster development, fewer accounting bugs, and more confidence in how financial systems behave under load.
A few pieces of advice from Varun Mohan, CTO of Fragment, for teams thinking about adding multiplayer to their own product:
See how more teams build with Liveblocks at liveblocks.io/customers.
