Reflect for Android
Mirror and control a physical Android device inside a VS Code tab — no emulator, no external window.
Why
Emulators are heavy, and mirroring a real phone usually means juggling an extra window. Reflect streams your phone's screen into an editor tab and lets you drive it with your mouse and keyboard, right next to your code. It is built for React Native developers, but works for any Android app.
Under the hood Reflect uses the scrcpy protocol through the Tango libraries. Video is H.264 decoded with WebCodecs (hardware-accelerated where available), so it stays light on your machine.
Features
Mirror and control
- Lives in the Secondary Side Bar, right next to your code. Move it to an editor tab and back with one click (Move to Editor Tab / Move to Side Bar).
- Live mirroring of a USB-connected device with correct aspect ratio and low latency.
- Touch and drag with the mouse and scroll with the wheel or trackpad.
- Pinch to zoom with a two-finger trackpad pinch, Option/Alt + scroll, or Option/Alt + drag.
- Keyboard input, including special keys and editing shortcuts.
- Clipboard sync: Cmd/Ctrl+V pastes your computer's clipboard on the device; text copied on the device lands on your computer.
- Mouse shortcuts: right click = Back, middle click = Home.
- Toolbar above the screen: Back, Home, Recent Apps, Rotate, turn the physical screen off while mirroring, screenshot, recording, and the React Native shortcuts below.
- Device frame and 1:1 zoom: wrap the screen in a phone bezel, or show it at its real pixel size (scroll to pan). Both choices are remembered.
- Automatic reconnection: unplug the cable and plug it back in, and the mirror comes back on its own. After two minutes without the device, a Reconnect button appears.
Screenshots and recordings
- Screenshot (PNG) and MP4 recording straight from the toolbar. Recordings keep the original H.264 stream, so there is no re-encoding and no extra CPU load.
- Files are saved to
reflect-captures/ in your workspace (configurable) and copied to the clipboard, ready to paste into Slack, a pull request or an issue. A notification lets you open the file or reveal it in Finder/Explorer.
- Component inspector: click Inspect and move the mouse over the screen. The component under the cursor is highlighted like in the browser DevTools — content in blue, padding in green, margin in orange — with a label such as
<Text> in ProfileCard · ProfileCard.tsx:42. Click to see its props and owners and jump straight to the line in your code. Works with React Native 0.76+ (including Expo) in development mode, with Metro running.
- Reload the app and open the Dev Menu from the toolbar or with Cmd/Ctrl+R and Cmd/Ctrl+M, just like in an emulator.
- Reverse Metro port: runs
adb reverse tcp:8081 tcp:8081 (or your reflect.metroPort) so the app on the phone reaches Metro over USB.
Everything else
- Device Info panel: model, Android version, display, battery level/temperature, memory, storage, Wi-Fi IP and the foreground app, refreshed every 5 seconds while visible.
- Status bar item showing the connected device — click it to open the mirror.
- Clear errors when
adb is missing, the device is unauthorized or USB debugging is off.
- Nothing left running: closing the mirror stops the scrcpy server, closes the sockets, finishes any recording and releases the decoder. If the side bar stays hidden for 30 seconds the session is paused, and it resumes when you show it again.
- No telemetry.
Roadmap
Annotated screenshots and GIF export, Wi-Fi connections, dev tools (deep links, app actions, APK install, dark mode/font scale/locale, show touches, layout bounds, network toggles) and a filtered logcat panel.
Requirements
- VS Code 1.106 or newer (also Cursor, Windsurf and VSCodium builds based on 1.106+, through Open VSX).
- Android platform-tools (
adb). Install them with Android Studio or download them from developer.android.com.
- An Android device with USB debugging enabled (how to enable) and Android 5.0 or newer.
Installation
- VS Code Marketplace: search for "Reflect for Android" in the Extensions view, or run
code --install-extension GabrielCordeiro.reflect-android.
- Open VSX (Cursor, Windsurf, VSCodium): install from open-vsx.org.
Usage
- Connect your phone via USB and accept the "Allow USB debugging" prompt.
- Click the Reflect icon in the Secondary Side Bar (Cmd+Option+B / Ctrl+Alt+B shows it) and press Open Device, run Reflect: Open Device from the Command Palette, or click the device in the status bar.
- If more than one device is connected, pick one from the list.
- Click inside the mirrored screen to focus it, then use your mouse and keyboard.
Prefer a bigger screen? Click Move to Editor Tab in the view title (or run Reflect: Move to Editor Tab), or set reflect.location to editor. Move to Side Bar brings it back.
Inspecting a React Native component
- Start your app in development mode (
npx expo start or npx react-native start) with Metro on reflect.metroPort.
- Click the Inspect button in the Device view title, or run Reflect: Inspect Component.
- Move the mouse over the screen to see each component highlighted, then click one. Its props and owners appear in the Component view and its source line opens in the editor. Press Esc to stop inspecting.
Keyboard shortcuts
These work while the mirror has focus.
| Action |
macOS |
Windows / Linux |
| Back |
Cmd+Backspace |
Ctrl+Backspace |
| Home |
Cmd+Shift+H |
Ctrl+Shift+H |
| Reload React Native app |
Cmd+R |
Ctrl+R |
| Open Dev Menu |
Cmd+M |
Ctrl+M |
| Screenshot |
Cmd+Shift+S |
Ctrl+Shift+S |
| Rotate |
Cmd+Right |
Ctrl+Right |
Every toolbar action is also a command (Reflect: Back, Reflect: Take Screenshot, Reflect: Start/Stop Recording, …), so you can bind your own shortcuts in Keyboard Shortcuts.
Screenshots and recordings
- Click the camera to take a screenshot, or the record button to start and stop an MP4 recording. A timer shows while recording.
- Files are named like
reflect-pixel-8-20261016-142530.png and saved to reflect.capturesDirectory.
- With
reflect.copyCapturesToClipboard on, screenshots are copied as images and recordings as files (macOS and Windows), so a plain paste works. On Linux, screenshots need xclip; otherwise the file path is copied instead.
Settings
| Setting |
Default |
Description |
reflect.adbPath |
"" |
Absolute path to the adb executable. Leave empty to auto-detect. |
reflect.location |
secondarySidebar |
Where Reflect: Open Device shows the device: secondarySidebar or editor. |
reflect.metroPort |
8081 |
Metro port used by the component inspector. |
reflect.inspector.openSourceOnSelect |
true |
Open the source file of an inspected component automatically. |
reflect.privacy.maskIpAddress |
false |
Hide the last part of the IP address in Device Info (handy for screenshots). |
reflect.capturesDirectory |
reflect-captures |
Folder for screenshots and recordings. Relative paths use the first workspace folder; without a workspace they go to ~/Pictures/Reflect. |
reflect.copyCapturesToClipboard |
true |
Copy screenshots (as images) and recordings (as files) to the clipboard. |
When reflect.adbPath is empty, Reflect looks for adb in this order: $ANDROID_HOME/platform-tools (or $ANDROID_SDK_ROOT), the default SDK location for your OS, then your PATH.
Troubleshooting
| Problem |
What to try |
| "adb not found" |
Install platform-tools or set reflect.adbPath. |
| "device not authorized" |
Unlock the phone and accept the USB debugging prompt. If it does not appear, revoke USB debugging authorizations in Developer options and reconnect. |
| "device is offline" |
Reconnect the cable, try another USB port or cable, or toggle USB debugging. |
| Black screen |
Open View → Output → Reflect for Android and check the [webview] lines. Include them when you open an issue. |
| Input does nothing |
Click the mirrored screen first so it receives focus. |
| "Metro is not running" when inspecting |
Start your app with npx expo start or npx react-native start, or set reflect.metroPort. |
| "No debuggable React Native app" |
Open the app in development mode. The inspector needs React Native 0.76 or newer. |
| The app on the phone cannot reach Metro |
Click Reverse Metro Port in the toolbar, or run adb reverse tcp:8081 tcp:8081. |
| Reload does nothing |
Reload uses Metro; without it Reflect falls back to pressing R twice, which needs the app in development mode. |
| The mirror says "Device not found" |
Check the cable and that USB debugging is still on, then click Reconnect. |
| "Nothing was recorded" |
The recording was stopped before the first video frame arrived. Record for at least a second. |
| No highlight while inspecting |
Make sure Metro is running and the app is in development mode. Only components rendered by React Native's new architecture (Fabric) are supported. |
Contributing
Contributions are very welcome! Please read CONTRIBUTING.md for the local setup, the testing rules (100% coverage is required) and the pull request flow. By participating you agree to the Code of Conduct.
Found a security issue? Please follow SECURITY.md instead of opening a public issue.
☕ Support the project
Reflect is free and open source. If it saves you time, you can support its development:
Starring the repository and sharing it with other developers helps a lot too.
Credits and licenses
- Reflect for Android is released under the MIT License.
- It bundles the scrcpy server by Genymobile and Romain Vimont, licensed under the Apache License 2.0.
- It uses the Tango (
@yume-chan/*) libraries by Simon Chan, licensed under the MIT License.
See THIRD_PARTY_NOTICES.md for the full attributions.
| |
