Build Multiplayer Features In 15 Minutes.

Room Service provides a React State Management Library and infrastructure for building real-time collaboration. 🛠️

const todos = room.list("todos")
// Make changes on one client
todos.insertAfter(2, "Water plants 💦🌱")
// Listen to them on another
room.subscribe(todos, nextTodos => {
// ... do something with the updated list

Optimistic rendering with conflict resolution.

Run code as fast as possible: Room Service updates locally first, then sends updates to the server.

Real-time designed for collaboration.

Stateful real-time for peak performance: Room Service keeps track of who’s in the room and what they’ve seen to prevent sending redundant messages.

For ambitious projects

A real-time CRDT-based multiplayer engine.

Or well, kind of. CRDTs are great for P2P apps, but true decentralized CRDTs aren’t the best for multiplayer. We build “cheating” CRDTs that drop the p2p requirement in exchange for performance.

Not your database.

Room Service does not act as your primary database, it's just a sometimes-expiring layer on top. Keep your clients in sync without sacrificing control.

No need to rebuild your product.

Room Service can typically be used almost entirely from the client, with little to no server-side changes requried.

Simple gradual adoption.

Room Service is a lot like Redis, start with expiring data and only add persistence if you need it.

Room Service ❤ React.

React is a first-class citizen in the Room Service ecosystem, with an official React client.

import { useList } from '@roomservice/react'
// Prebuilt hooks
const [list, setList] = useList("my-room", "todos")
// Update changes on one client
list.insertAfter(2, "water plants 🌿")
// See them in real-time on every client
list[3] // "water plants 🌿"

Use anywhere in your app, without a performance hit.

Like you’d see in libraries like Recoil or Jotai, Room Service lets you access the same data anywhere in your app, without the entire tree rerendering. It's like a state management library that extends to other browsers.

import { useMap } from '@roomservice/react'
function ListenToMap() {
const [form, map] = useMap("myroom", "myform")
// ...
function onChange(e) {
map.set("value", e.target.value)
return (
function MyComponent() {
return (
<ListenToMap /> {/* rerenders! */}
<ListenToMap /> {/* rerenders! */}
<ListenToSomethingElse /> {/* Does not rerender! */}

Built for the modern web.

~8kb SDK

Made with 🌁 in San Francisco


Copyright @ 2021

Room Service