{"_id":"@balajisiva/backstage-plugin-template-builder","name":"@balajisiva/backstage-plugin-template-builder","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@balajisiva/backstage-plugin-template-builder","version":"0.1.0","description":"Visual editor for creating and managing Backstage scaffolder templates with live YAML preview, flow visualization, and GitHub integration","main":"src/index.ts","types":"src/index.ts","license":"MIT","author":{"name":"Balaji Sivasubramanian"},"homepage":"https://github.com/balajisiva/backstage-template-builder#readme","repository":{"type":"git","url":"git+https://github.com/balajisiva/backstage-template-builder.git","directory":"plugins/backstage-template-builder"},"bugs":{"url":"https://github.com/balajisiva/backstage-template-builder/issues"},"keywords":["backstage","backstage-plugin","scaffolder","templates","visual-editor","yaml","developer-portal"],"publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin","pluginId":"template-builder"},"sideEffects":["*.css"],"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","export-dynamic":"rhdh-cli plugin export","export-dynamic:clean":"yarn export-dynamic --clean"},"dependencies":{"@backstage/catalog-model":"^1.4.0","@backstage/core-components":"^0.14.0","@backstage/core-plugin-api":"^1.9.0","@backstage/plugin-catalog-react":"^1.11.0","@backstage/plugin-permission-common":"^0.7.0","@backstage/plugin-permission-react":"^0.4.0","@backstage/theme":"^0.5.0","@dnd-kit/core":"^6.3.1","@dnd-kit/sortable":"^10.0.0","@dnd-kit/utilities":"^3.2.2","@material-ui/icons":"^4.11.3","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-select":"^2.2.6","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-tooltip":"^1.1.6","js-yaml":"^4.1.1","lucide-react":"^0.563.0","react-use":"^17.4.0","uuid":"^13.0.0"},"peerDependencies":{"react":"^16.13.1 || ^17.0.0 || ^18.0.0","react-dom":"^16.13.1 || ^17.0.0 || ^18.0.0","react-router-dom":"^6.0.0"},"devDependencies":{"@backstage/cli":"^0.26.0","@backstage/core-app-api":"^1.12.0","@backstage/dev-utils":"^1.0.0","@backstage/test-utils":"^1.5.0","@red-hat-developer-hub/cli":"^1.7.2","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^14.0.0","@types/js-yaml":"^4.0.9","@types/uuid":"^10.0.0","react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.3.0","typescript":"~5.3.0"},"scalprum":{"name":"internal.backstage-plugin-template-builder","exposedModules":{"PluginRoot":"./src/index.ts"}},"_id":"@balajisiva/backstage-plugin-template-builder@0.1.0","gitHead":"01366fb03f5cf96438c15aca7245d7aba1aa970b","_nodeVersion":"20.18.3","_npmVersion":"11.2.0","dist":{"integrity":"sha512-i9u0qYikMIDt9MXlNhXG1+7zoUlX78T/LZBJzEm+BM101iu68XwT5i9inr1ANOvCYF5if41tSy+oWdaiqsCEkA==","shasum":"4aaf2f40b6cfe62e51aeb0e402ad733bd1abd1f9","tarball":"https://registry.npmjs.org/@balajisiva/backstage-plugin-template-builder/-/backstage-plugin-template-builder-0.1.0.tgz","fileCount":121,"unpackedSize":7489236,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE1nnDwt6bGwfAa+SOu5567To0zCV92MQ2jXH/vloNrbAiBSUxlk56NVafNOk3RL2z6xW5W8vXOBRACOeaz3BB92Vg=="}]},"_npmUser":{"name":"balajisiva","email":"bsivasub@gmail.com"},"directories":{},"maintainers":[{"name":"balajisiva","email":"bsivasub@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/backstage-plugin-template-builder_0.1.0_1771268013816_0.8183513666560625"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-16T18:53:33.693Z","0.1.0":"2026-02-16T18:53:34.092Z","modified":"2026-02-16T18:53:34.307Z"},"maintainers":[{"name":"balajisiva","email":"bsivasub@gmail.com"}],"description":"Visual editor for creating and managing Backstage scaffolder templates with live YAML preview, flow visualization, and GitHub integration","homepage":"https://github.com/balajisiva/backstage-template-builder#readme","keywords":["backstage","backstage-plugin","scaffolder","templates","visual-editor","yaml","developer-portal"],"repository":{"type":"git","url":"git+https://github.com/balajisiva/backstage-template-builder.git","directory":"plugins/backstage-template-builder"},"author":{"name":"Balaji Sivasubramanian"},"bugs":{"url":"https://github.com/balajisiva/backstage-template-builder/issues"},"license":"MIT","readme":"# Backstage Template Builder Plugin\n\nA Backstage frontend plugin that provides a visual editor for creating and managing Backstage scaffolder templates.\n\n## Features\n\n- **Visual template editor** — Create and edit scaffolder templates using structured forms instead of hand-editing YAML\n- **Live YAML view** — Always see the generated YAML side-by-side to retain transparency and control\n- **Execution flow visualization** — Understand how scaffolder steps execute through a clear, step-by-step flow view\n- **Action discovery** — Browse and add common scaffolder actions (fetch, publish, catalog, custom actions)\n- **Preview experience** — See what the end-user form will look like before publishing the template\n- **GitHub integration** — Load templates from GitHub and push changes back\n\n## Installation\n\nThis plugin is designed to be installed in a Backstage monorepo.\n\n### 1. Add the plugin to your Backstage app\n\nIn your `packages/app/package.json`, add the dependency:\n\n```json\n{\n  \"dependencies\": {\n    \"@internal/plugin-backstage-template-builder\": \"^0.1.0\"\n  }\n}\n```\n\n### 2. Add the route to your app\n\nIn `packages/app/src/App.tsx`, import and add the route:\n\n```tsx\nimport { TemplateBuilderPage } from '@internal/plugin-backstage-template-builder';\n\n// Inside <FlatRoutes>\n<Route path=\"/template-builder\" element={<TemplateBuilderPage />} />\n```\n\n### 3. Add to the sidebar (optional)\n\nIn `packages/app/src/components/Root/Root.tsx`:\n\n```tsx\nimport CodeIcon from '@material-ui/icons/Code';\n\n// Inside <SidebarPage>\n<SidebarItem icon={CodeIcon} to=\"/template-builder\" text=\"Template Builder\" />\n```\n\n## Development\n\nTo run the plugin in isolation for development:\n\n```bash\ncd plugins/backstage-template-builder\nyarn start\n```\n\nThis will start the plugin in development mode at http://localhost:3000\n\n## GitHub Integration\n\nThe plugin uses direct GitHub API calls for loading and pushing templates. Users need to provide a GitHub Personal Access Token with:\n\n**Classic Token:**\n- `repo` scope (full control of private repositories)\n\n**Fine-grained Token:**\n- Contents: Read and Write\n- Metadata: Read\n\nTokens are stored in localStorage for persistence.\n\n## Architecture\n\n- **Frontend-only plugin** — No backend services required\n- **State management** — React Context + useReducer\n- **YAML generation** — js-yaml library\n- **Drag-and-drop** — @dnd-kit\n- **UI components** — Radix UI primitives with Tailwind CSS\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-9c9db18477f95425719c549b5d74a785"}