React Multiplayer Input

A React drop-in for native <input> and <textarea> that preserves caret, selection, and scroll when the value prop is updated from a remote source.

Get started

View on GitHub

Caret-preserving

A remote value update leaves the caret and selection where the user had them.

Scroll-preserving

Scroll position is unchanged when a remote update lands on Chromium and Safari.

Drop-in

Wraps <input>, <textarea>, or a styled custom component.

Install

pnpmnpmyarnbun

pnpm add react-multiplayer-input

npm install react-multiplayer-input

yarn add react-multiplayer-input

bun add react-multiplayer-input

Peer dependency: react ^19. See the getting started guide for usage.

Live demo

The multiplayer textarea on the left and a native textarea on the right share the same value via BroadcastChannel. Open this page in another tab to see the value sync. Start the auto-typer to compare cursor behavior.

Known issues

The caret's blink animation resets on every remote update. Frequent updates make the caret look static.
Native undo (Cmd/Ctrl+Z) doesn't undo remote edits.
Mouse-drag selection right-to-left can collapse if a remote update lands mid-drag.
Firefox scrolls the textarea toward the caret on every remote update, even when the user has scrolled away.

See Known limitations for context on each.