How To Add Live Cursors Into Any React App

Live cursors are everywhere now—Figma, Google Docs, Linear. They're that little detail that makes apps feel collaborative instead of lonely.

Building them usually sucks. WebSockets, state sync, complex data structures. Most libraries force you to rewrite half your app or learn some new "reactive paradigm."

This guide shows you how to add live cursors to your React app without any of that. No new mental models, no architecture changes. Just a hook that works like useState but syncs across users.

We'll use SharedPresence from AirState to build our live cursors. It's designed to feel just like regular React state. Unlike SharedState though, clients can only modify their own state but read everyone else's state.

# we highly recommend pnpm, but npm works too
pnpm add @airstate/client @airstate/react

You have two options for setting up AirState:

1. Use AirState Cloud (easiest) - Create an account and get an App ID
2. Self-host - Run the Docker image on your own infrastructure

We'll use the cloud approach for simplicity, but you can check the self-hosting docs if you prefer to run your own server.

// App.tsx

import { configure } from '@airstate/client';

configure({
    appId: '[your app id]',
});

export function App() {
    return (
        <div className="realtive w-[600px] h-[450px]">
        </div>
    )
}