Watermelon Studio

Inspect your WatermelonDB data directly inside VS Code — fast, visual, and practical.

Why Watermelon Studio?

Debugging sync issues in WatermelonDB usually means switching tools, pulling files manually, and running ad-hoc SQL queries.

Watermelon Studio keeps this workflow inside your editor:

• Visual table of Watermelon rows (id, _status, table, updated date)
• Full JSON payload per row in a side details panel
• One-click copy JSON for quick sharing/debugging
• Direct sync from Android emulator using adb run-as
• Works with Expo and React Native CLI projects (automatic path detection)

It is intentionally focused: practical inspection, not a full DB admin suite.

Preview

Current feature set

✅ What works well today

• Sidebar integration in VS Code Activity Bar (left side)
• Webview inspector UI with filters by ID and sync status
• Row details panel with formatted full JSON payload
• Copy JSON action in details panel
• Automatic Android package detection (workspace + device heuristics)
• Android DB auto-sync when no local .db/.sqlite/.sqlite3 is found
• Cache pruning to avoid uncontrolled growth of synced files

⚠️ Scope and current limitations

• Read-only inspector (no write/update/delete actions)
• Focused on Watermelon-like tables containing id + _status
• Android sync depends on adb and a debuggable app (run-as access)
• iOS device/emulator sync is not implemented yet

Quick start

Option A: Auto-sync from Android emulator (recommended)

1. Keep your app running on Android emulator.
2. Open Watermelon Studio from the left sidebar.
3. Run command: Watermelon Studio: Open.
4. If no local DB is found, extension will attempt auto-sync from emulator.

Option B: Manual sync command

• Run Watermelon Studio: Sync Android Emulator Database
• Then run Watermelon Studio: Open

Commands

• Watermelon Studio: Open
• Watermelon Studio: Find Database
• Watermelon Studio: Sync Android Emulator Database

Settings

Namespace: watermelonStudio

• watermelonStudio.android.packageName
  • Android app id for adb run-as (example: com.example.app)
• watermelonStudio.android.dbFileName
  • DB path relative to app sandbox
  • Expo SQLite default: files/SQLite/watermelon.db
  • Standard Android default: databases/watermelon.db
• watermelonStudio.android.autoSyncOnOpen
  • If true, auto-sync is attempted when no local DB file is found

Example configurations (.vscode/settings.json):

For Expo projects:

{
  "watermelonStudio.android.packageName": "com.watermelon.testapp",
  "watermelonStudio.android.dbFileName": "files/SQLite/watermelon.db",
  "watermelonStudio.android.autoSyncOnOpen": true
}

For React Native CLI projects:

{
  "watermelonStudio.android.packageName": "com.myapp",
  "watermelonStudio.android.dbFileName": "databases/watermelon.db",
  "watermelonStudio.android.autoSyncOnOpen": true
}

Note: The extension auto-detects Expo package names from app.json. For RN CLI projects, you'll need to configure the package name manually.

Android sync notes

Watermelon Studio uses:

adb shell run-as <package> ls <db-path>
adb exec-out run-as <package> cat <db-path>

For this to work reliably:

• adb must be available in PATH
• emulator/device must be connected (adb devices)
• app should be debuggable and installed for the same user

Vision

Watermelon Studio aims to be the fastest way to answer questions like:

• “Which rows are created, updated, deleted, synced right now?”
• “What payload is actually stored for this record?”
• “Did my local database change after this action?”

Simple, visual, and grounded in real mobile debugging workflows.

Support

For bugs and suggestions, open an issue with context (project type, command used, and expected behavior).