skills.rest
grafana
grafanaOFFICIAL
Explore all skills by this author →
Website𝕏@grafanaGitHub

grafana-scenes

Build Grafana plugin UI pages using @grafana/scenes declarative objects.

213|18|Updated Mar 17, 2026
Search Tags:#development#ui#dashboard#plugin#grafana#scene#scenes
One-click install
npx skills add https://github.com/grafana/skills --skill grafana-scenes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: grafana-scenes
Source: https://github.com/grafana/skills/tree/main/skills/grafana-plugins/grafana-scenes
Command: npx skills add https://github.com/grafana/skills --skill grafana-scenes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build Grafana plugin UI pages rapidly by leveraging the @grafana/scenes declarative framework, reducing boilerplate and enabling consistent, reusable structures.

Core Features & Use Cases

  • Scene-based UI composition: SceneApp → SceneAppPage → EmbeddedScene with data, variables, and time ranges.
  • Reusable panel builders: PanelBuilders for tables, timeseries, stats, and other panels to assemble plugin pages.
  • Drilldowns and variable management: Define drilldown paths and query variables to create dynamic, interactive experiences within plugins.

Quick Start

Create a new scene by implementing a function like getMyFeatureScene that wires data sources, variables, and panels, then expose it via a SceneAppPage for your plugin.

Frequently Asked Questions about grafana-scenes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Grafana plugin UI pages using Scenes?▼

Build Grafana plugin UI pages using Scenes by leveraging the @grafana/scenes declarative framework to compose SceneApp hierarchies, wire data sources, and configure variables. This approach reduces boilerplate and enables consistent, reusable structures for your plugin pages.

What is the @grafana/scenes framework used for?▼

The @grafana/scenes framework is used for declarative UI composition within Grafana plugins. It allows developers to define scene objects, manage variable sets, and assemble interactive experiences using PanelBuilders for tables, timeseries, and stats visualizations.

Can I define drilldown paths and query variables in Grafana plugins?▼

Yes, you can define drilldown paths and query variables in Grafana plugins to create dynamic, interactive experiences. The framework supports declarative scene objects and variable management to wire data sources and configure drilldowns within your plugin pages.

How do I wire panels and visualizations in a Grafana plugin scene?▼

Wire panels and visualizations in a Grafana plugin scene by utilizing reusable PanelBuilders for tables, timeseries, and stats. You assemble these within an EmbeddedScene that includes data, variables, and time ranges to complete the end-to-end UI composition.

Does the @grafana/scenes framework require external dependencies?▼

The @grafana/scenes framework operates without external dependencies to build plugin pages. It natively supports SceneApp hierarchies, variable sets, and PanelBuilders for end-to-end UI composition directly within the Grafana ecosystem.

Related Skills

Explore More Software Engineering Skills→
nodnarbnitramnodnarbnitram
15

grafana-plugin-scaffolding

Scaffold Grafana plugin projects with the official create-plugin tool.

Community
Advanced
1k-off1k-off
1

grafana-scenes

Build Grafana plugin scene pages with reactive drilldown-capable dashboards.

Community
Intermediate
1k-off1k-off
1

dashboarding

Create and update Grafana dashboards with JSON, panels, variables, and transformations.

Community
Intermediate
hasnahasna

react-three-fiber

Generate declarative 3D scenes from JSON specifications using React Three Fiber components.

Official
Intermediate