Plugin Development Tutorials
Welcome to the Headlamp plugin development tutorial series! This hands-on guide takes you from zero to building production-ready plugins.
Learning Path
🚀 Getting Started — Build Your First Plugin
Learn the fundamentals by building a complete hello-headlamp plugin:
| # | Tutorial | Time | What You'll Learn |
|---|---|---|---|
| 1 | Running Headlamp from Source | 20 min | Set up your development environment |
| 2 | Creating Your First Plugin | 15 min | "Hello" in app bar |
| 3 | Adding Pages and Sidebar Navigation | 25 min | Custom pages & sidebar navigation |
| 4 | Working with Kubernetes Data | 25 min | Fetch cluster and resource data |
| 5 | Advanced Kubernetes Interactions | 30 min | Custom resource classes, modify resources |
| 6 | Building List & Detail Pages | 30 min | ResourceListView & DetailsGrid components |
| 7 | Extending Existing Resource Views | 25 min | Extend built-in resource list and detail views |
| 8 | Adding Plugin Settings | 20 min | ConfigStore, registerPluginSettings, settings UI |
| 9 | Applying Custom Themes | 20 min | registerAppTheme, AppTheme options, light & dark variants |
| 10 | Adding Custom Map Nodes | 20 min | registerMapSource, node icons, custom detail views |
| 11 | Releasing & Publishing | 30 min | Lint, format, build, package, Artifact Hub |
Prerequisites
Before starting, ensure you have:
- Node.js ≥20.11.1 — Download here
- npm ≥10.0.0 — Comes with Node.js
- Git — For cloning repositories
- A code editor — VS Code recommended
Ready to Start?
👉 New to Headlamp? Start with Getting Started