{"id":47138,"library":"backstage-grpc-playground","title":"Backstage gRPC Playground","description":"A Backstage frontend plugin that provides a gRPC playground interface, ported from BloomRPC. Current stable version is 0.3.0 (beta). It allows sending gRPC requests (unary, client streaming, server streaming) directly from Backstage entity pages or a dedicated route. Proto files are loaded from a backend plugin (backstage-grpc-playground-backend). Unlike BloomRPC, this plugin is web-based, integrates with Backstage's API documentation system, and generates markdown documentation via protoc-gen-doc. Does not support server reflection or gRPC-web. Requires Backstage ^1.5.0 and React 16/17.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/zalopay-oss/backstage-grpc-playground","tags":["javascript","backstage","backstage plugin","gRPC","bloomrpc","gRPC playground","Zalopay","typescript"],"install":[{"cmd":"npm install backstage-grpc-playground","lang":"bash","label":"npm"},{"cmd":"yarn add backstage-grpc-playground","lang":"bash","label":"yarn"},{"cmd":"pnpm add backstage-grpc-playground","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: ^16.13.1 || ^17.0.0","package":"react","optional":false}],"imports":[{"note":"ESM-only; named export used for API doc widget customization.","wrong":"const GrpcPlaygroundComponent = require('backstage-grpc-playground').GrpcPlaygroundComponent","symbol":"GrpcPlaygroundComponent","correct":"import { GrpcPlaygroundComponent } from 'backstage-grpc-playground'"},{"note":"Must use named import; no default export.","wrong":"import GrpcPlaygroundPage from 'backstage-grpc-playground'","symbol":"GrpcPlaygroundPage","correct":"import { GrpcPlaygroundPage } from 'backstage-grpc-playground'"},{"note":"Optional: the Backstage plugin instance, rarely needed directly.","wrong":null,"symbol":"grpcPlaygroundPlugin","correct":"import { grpcPlaygroundPlugin } from 'backstage-grpc-playground'"}],"quickstart":{"code":"// packages/app/src/apis.ts\nimport { GrpcPlaygroundComponent } from 'backstage-grpc-playground';\nimport { createApiFactory, apiDocsConfigRef, defaultDefinitionWidgets } from '@backstage/plugin-api-docs';\nimport { AnyApiFactory } from '@backstage/core-plugin-api';\n\nexport const apis: AnyApiFactory[] = [\n  createApiFactory({\n    api: apiDocsConfigRef,\n    deps: {},\n    factory: () => {\n      const definitionWidgets = defaultDefinitionWidgets();\n      return {\n        getApiDefinitionWidget: (apiEntity) => {\n          if (apiEntity.spec.type === 'grpc') {\n            return {\n              type: 'grpc',\n              title: 'gRPC Playground',\n              component: GrpcPlaygroundComponent,\n            };\n          }\n          return definitionWidgets.find(d => d.type === apiEntity.spec.type);\n        },\n      };\n    },\n  }),\n];\n\n// packages/app/src/App.tsx\nimport { GrpcPlaygroundPage } from 'backstage-grpc-playground';\nimport { Route } from 'react-router-dom';\n\nconst routes = (\n  <Route path=\"/grpc-playground\" element={<GrpcPlaygroundPage />} />\n);","lang":"typescript","description":"Shows how to add the gRPC playground as an API doc widget for grpc entities and as a standalone route."},"warnings":[{"fix":"Follow installation instructions at https://github.com/zalopay-oss/backstage-grpc-playground-backend","message":"Requires a separate backend plugin (backstage-grpc-playground-backend) to be installed and configured.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Place .proto files in the backend's proto directory (default packages/backend/proto).","message":"Does not support loading protos via server reflection; proto files must be stored on the backend filesystem.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use only unary, client streaming, or server streaming RPCs.","message":"gRPC-web is not supported. Only unary, client streaming, and server streaming (i.e., no bidirectional streaming).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use Node.js 14 or 16, or check for compatibility updates.","message":"Node.js 14 or 16 required; Node 18+ may cause issues.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use React 16.13.1 or 17.0.0. For React 18, wait for an update.","message":"React 17 support only; React 18 may not be fully compatible.","severity":"deprecated","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.3.0':21 '1.5.0':90 '16/17':93 'allow':24 'api':67 'backend':48,54 'backstag':1,5,35,51,65,89,95,96 'backstage-grpc-playground-backend':50 'base':62 'beta':22 'bloomrpc':16,56,99 'client':29 'current':17 'dedic':40 'direct':33 'doc':78 'document':68,73 'entiti':36 'file':43 'frontend':6 'gen':77 'generat':71 'grpc':2,11,26,52,86,98,100 'grpc-web':85 'integr':63 'interfac':13 'javascript':94 'load':45 'markdown':72 'page':37 'playground':3,12,53,101 'plugin':7,49,58,97 'port':14 'proto':42 'protoc':76 'protoc-gen-doc':75 'provid':9 'react':92 'reflect':83 'request':27 'requir':88 'rout':41 'send':25 'server':31,82 'stabl':18 'stream':30,32 'support':81 'system':69 'typescript':103 'unari':28 'unlik':55 'version':19 'via':74 'web':61,87 'web-bas':60 'zalopay':102","created_at":"2026-06-07T16:49:59.377126+00:00","updated_at":"2026-06-07T16:49:59.377126+00:00","problems":[{"fix":"Run 'yarn --cwd packages/app add backstage-grpc-playground' from backstage root.","cause":"Missing dependency or incorrect import path.","error":"Cannot find module 'backstage-grpc-playground' or its corresponding type declarations."},{"fix":"Ensure .proto files are in packages/backend/proto (or configured protoDir) and that the yaml file references them correctly.","cause":"Proto file not placed in the backend's proto directory or wrong path in yaml definition.","error":"Failed to load proto file: no such file or directory"},{"fix":"Add <Route path=\"/grpc-playground\" element={<GrpcPlaygroundPage />} /> in App.tsx and ensure the API entity spec.type is 'grpc'.","cause":"The route /grpc-playground is not registered or the entity type is not 'grpc'.","error":"gRPC Playground shows 'No API entity found'"},{"fix":"Only use unary, client streaming, or server streaming RPCs.","cause":"The RPC is bidirectional streaming, which is not supported.","error":"Error: Unsupported method type: BIDIRECTIONAL_STREAMING"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/zalopay-oss/backstage-grpc-playground","github":"https://github.com/zalopay-oss/backstage-grpc-playground","docs":null,"changelog":null,"pypi":null,"npm":"backstage-grpc-playground","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}