Player UI Devtools

Tools for inspecting and debugging live Player UI experiences across web, Android, and iOS. Devtools is itself plugin-driven: a Devtools plugin runs inside the Player you want to inspect and publishes its state; a Devtools client renders that state and sends interactions back.

Architecture

Every part of Devtools is wired together by the messenger — a transport-agnostic, lossless protocol. A plugin on the Player side and a client on the tooling side each run a Messenger; the plugin publishes Player state and the client drives interactions.

        Player (web / Android / iOS)              Tooling
   ┌──────────────────────────────┐      ┌────────────────────────────┐
   │  Devtools plugin             │      │  Devtools client           │
   │  (basic, or your own)        │◀────▶│  • browser extension       │
   │    taps Player hooks         │ msgr │  • Flipper plugin (mobile) │
   │    publishes flow/data/logs  │      │  • MCP server (agents)     │
   └──────────────────────────────┘      └────────────────────────────┘

The content a plugin publishes is rendered by the clients as a Player experience itself, using the devtools-assets.

Packages

Foundations

Package	Platforms	Description
messenger	TS · JVM · iOS	The communication protocol all of Devtools is built on.
types	TS · iOS	Shared event, transaction, and state types.
utils	TS · iOS · SwiftUI	Shared utilities (e.g. dsetAssign).

Plugins (Player side)

Package	Platforms	Description
plugin	TS · React · Android · JVM · iOS · SwiftUI	Base classes for building Devtools plugins.
plugins/basic	all of the above	The standard plugin — exposes flow, data, logs, config; supports expression evaluation and flow overrides. The reference implementation.
plugins/profiler	all of the above	Profiles Player hook execution timing and exposes it as a flame graph.

Clients (tooling side)

Package	Platform	Description
client	Web/React	The Panel component that renders plugin content; embedded by the browser extension and Flipper plugin.
flipper-plugin	Flipper desktop	Client for inspecting mobile (Android/iOS) Players.
mcp	stdio / MCP	Client that exposes Devtools to AI agents as MCP tools.

The browser-extension client lives in a separate repo: player-ui/browser-devtools.

Getting started

To debug an existing Player, add the basic plugin for your platform and connect a client:

• Web — add BasicReactDevtoolsPlugin and activate the connection from the browser extension popup.
• Mobile — add the platform basic plugin and connect Flipper (see just install-flipper-client).
• Agents — run the MCP server against a running Flipper server.

To debug capabilities specific to your integration, build your own plugin on top of the plugin base classes — the basic plugin is the best reference.

Building

Devtools is built with Bazel via rules_player; common tasks are wrapped in the repo justfile (e.g. just install-flipper-client, just mcp). Each package's BUILD file uses the standard rules_player macros (js_pipeline, kt_jvm, kt_android, ios_library, swiftui_plugin).