GCP Emulator UI

May 6, 2026 · View on GitHub

A modern web interface for managing Google Cloud Platform emulator services 🎮

https://github.com/user-attachments/assets/f6452186-131f-4f6d-a744-678e4173bc0d

Supports amd64 and arm64 container images

Disclaimer

This is an unofficial third-party application and is not affiliated with, endorsed by, or sponsored by Google LLC or Google Cloud Platform.

Features

Supported Emulators

Google Cloud Pub/Sub (gcloud)
- Create, view, and manage Pub/Sub topics
- Handle subscriptions with pull/push configurations
- Publish messages with attributes and template variables
- Import/export topics, subscriptions, and message templates
Google Cloud Storage (fake-gcs)
- Create, view, and manage Storage buckets
- Support drag'n'drop files and folders
- Import/export bucket configurations
Google Firestore (gcloud)
- Create, view, and manage Collections
- Advanced Query Builder
- Document CRUD operations with field editing
- Multiple databases support
- Import/export collections and documents
Google Firestore (datastore-mode) (gcloud)
- Create, view, and manage entities across namespaces and databases
- Query/Read operations on named databases
- Import/export functionality

Quick Start

Use Docker Compose:

git clone git@github.com:drehelis/gcp-emulator-ui.git
cd gcp-emulator-ui

docker-compose up

Or start individual container:

# Start Google Pub/Sub emulator
docker run \
   --rm \
   --publish 8085:8085 \
   gcr.io/google.com/cloudsdktool/google-cloud-cli:emulators sh -c 'gcloud beta emulators pubsub start --host-port=0.0.0.0:8085'

# Start Google Firestore emulator
docker run \
   --rm \
   --publish 8086:8086 \
   gcr.io/google.com/cloudsdktool/google-cloud-cli:emulators sh -c 'gcloud beta emulators firestore start --host-port=0.0.0.0:8086'

# Start Google Firestore datastore-mode emulator
docker run \
   --rm \
   --publish 8087:8087 \
   gcr.io/google.com/cloudsdktool/google-cloud-cli:emulators sh -c 'gcloud beta emulators firestore start --database-mode=datastore-mode --host-port=0.0.0.0:8087'

# Start fake-gcs emulator
docker run \
   --rm \
   --publish 4443:4443 \
   --env PUBSUB_EMULATOR_HOST="host.docker.internal:8085" \
   fsouza/fake-gcs-server -scheme http

# Now start the UI
docker run \
   --rm \
   --env PUBSUB_EMULATOR_URL="host.docker.internal:8085"    \
   --env FIRESTORE_EMULATOR_URL="host.docker.internal:8086" \
   --env DATASTORE_EMULATOR_URL="host.docker.internal:8087" \
   --env DATASTORE_FILE_SERVER_URL="host.docker.internal:9999" \
   --env STORAGE_EMULATOR_URL="host.docker.internal:4443"   \
   --publish 9090:80 \
   ghcr.io/drehelis/gcp-emulator-ui:main

Browse to http://localhost:9090

Runtime Config (/config.json)

The UI can load optional runtime settings from /config.json at startup. This file is intended for container deployments where you want to inject configuration without rebuilding the app.

Currently supported runtime fields:

{
  "pubsub": {
    "pubsubPreConfiguredMsgAttr": {
      "key": "value"
    }
  }
}

To set pubsubPreConfiguredMsgAttr, provide a JSON object in the PUBSUB_PRE_CONFIGURED_MSG_ATTR environment variable when starting the container. Example:

docker run \
   --rm \
   --env PUBSUB_PRE_CONFIGURED_MSG_ATTR='{"source":"local","env":"dev"}' \
   --publish 9090:80 \
   ghcr.io/drehelis/gcp-emulator-ui:main

Development Setup

Clone and install dependencies

git clone git@github.com:drehelis/gcp-emulator-ui.git
cd gcp-emulator-ui
code .
(run in devcontainer)

bun install

Configure environment

cp -v .env.example .env
# Edit .env with your settings

Start the development server
```
bun run dev
```
Open your browser
- Navigate to http://localhost:5173

Configuration

Environment Variables

Variable	Default	Description
`VITE_PUBSUB_BASE_URL`	`/pubsub`	Pub/Sub emulator endpoint
`VITE_FIRESTORE_BASE_URL`	`/firestore`	Firestore emulator endpoint
`VITE_DATASTORE_BASE_URL`	`/datastore`	Firestore datastore-mode emulator endpoint
`VITE_STORAGE_BASE_URL`	`/storage`	Storage emulator endpoint
`VITE_FILE_SERVER_BASE_URL`	`/fs`	File server endpoint for Datastore import/export operations

Development

Project Structure

src/
├── api/           # API client configurations
├── assets/        # Static assets and styles
├── components/    # Reusable Vue components
├── composables/   # Vue composition functions
├── layouts/       # Page layout components
├── plugins/       # Vue plugins and global configurations
├── router/        # Vue Router configuration
├── stores/        # Pinia state management
├── types/         # TypeScript type definitions
├── utils/         # Utility functions and helpers
└── views/         # Page components organized by feature

Stack

Core Framework

Vue 3 - Progressive JavaScript framework
TypeScript - Type-safe development
Vite - Fast build tool and dev server
Tailwind CSS - Utility-first CSS framework

Credits

Icons

This project uses Heroicons - a set of free MIT-licensed high-quality SVG icons created by Tailwind Labs.

License: MIT
Repository: github.com/tailwindlabs/heroicons

All icons are used in accordance with the MIT License. See Heroicons License for details.

Feedback and Contributions

Feedback and contributions are welcome! Please feel free to:

Open an issue for bug reports or feature requests
Submit a pull request for bug fixes or new features

License

This project is licensed under the MIT License.