New in Grafana 10: Grafana Scenes for building dynamic dashboarding experiences

With Grafana 10, the latest major release of our data visualization platform, we wanted to explore new ways to empower our developer community. Case in point: Grafana Scenes, a new frontend library that enables developers to create dashboard-like experiences — such as querying and transformations, dynamic panel rendering, and time ranges — directly within their Grafana application plugins. 

Notably, Grafana Scenes also embraces the concept of extensibility, allowing development teams to create dashboarding experiences that are highly dynamic and customizable.

“We are very big on open source at Grafana, so the plugin ecosystem and the apps, as well — they’re essential to how awesome Grafana is,” says Senior Developer Advocate Nicole van der Hoeven in a recent episode of Grafana Office Hours, a weekly livestream that discusses best practices related to observability. “The platform wouldn’t be half as awesome if it wasn’t as extensible as it is. So we want to make it easier for [developers] to do what they want to do, without having to write it all themselves.”

In this Office Hours episode, Nicole sat down with Torkel Ödegaard, co-founder of Grafana Labs and the creator of Grafana, to discuss how Scenes does exactly that. They also tackled questions from the community during a live Q&A session. To learn more about Grafana Scenes, check out the excerpts and demos below from the Office Hours episode. You can also watch the entire episode here:

Note: The following excerpts have been edited for length and clarity. 

Nicole: Can you elaborate on what Scenes is, exactly, and how it impacts our developer community?

Torkel: So, Scenes is the name of the new dashboard architecture that we have moved out to a separate library to make it easy to consume from application plugins. So it’s a TypeScript library that includes new APIs and new components that enable application plugins to basically embed a full dashboard with template variables, time ranges, visualizations and layouts, and some support for drill down pages as well as tabs. This can be done mostly declaratively with minimal need to hook things up, statewise. It’s a state system and a component system in one. You declare the state of the visualizations you want and what queries and time ranges you want.

The cool thing, then, is that you can add all sorts of dynamic behaviors to that. So to conditionally show part of the dashboard, or dynamically change it based on user actions, you can add buttons to panels, which you obviously cannot do to normal dashboards. You can add all these programmatic layers to it to create a much more dynamic and user-friendly dashboard or data application, which is what I prefer to call it. 

Nicole: So Scenes makes it easier to build application plugins?

Torkel: Yeah, and it’s extremely declarative. If you just want the tabs and some dashboard views with some minimal extra logic, it’s like 99% declarative. You just define the model, and you can use the normal dashboard to build the visualizations and queries you want — just copy the relevant JSON model from those panels that you want to include in your Scenes application. 

Nicole: What if you want to start using Scenes, but you’ve never created a plugin before?

Torkel: To really take advantage of this, you have to be a plugin developer and you have to get started on an application plugin. We have some Scenes examples — and I know the create-plugin tool has a Scenes starter template — and we have documentation as well for the fundamental functionality. But it helps to know TypeScript and a little bit about frontend development. So the bar is still pretty high for who can actually use this and do really interesting stuff with it. Long term, we want to explore how we could enable some of this in a really declarative, non-plugin way.

So, you could actually get some of the benefits of conditional panels and these layouts and some of these dynamic behaviors, but still do that in, say, a JSON format or some kind of more serializable, simple, declarative model. But that, I think, is potentially more than a year away. The current goal is to replace the current dashboard runtime with the Scenes framework, and then look at how we can enable some of these new kinds of layouts and features that the Scenes framework provides. After that, I think we want to look at how we can enable these dynamic runtime behaviors, but through the persistent dashboard schema model.

Nicole: Could you talk more about applications vs. plugins, in terms of Scenes use cases?

Torkel: Yeah, so, by Grafana applications, we mean Grafana app plugins, which are just a form of plugin that lives inside Grafana. 

The Scenes framework relies on the Grafana runtime. This might not always be the case; we are interested in exploring ways where it can depend on a standalone runtime instead. It would still need to query a Grafana backend and have somewhere to load plugins from because the Scenes framework doesn’t include any visualizations. It doesn’t include any data sources, so those, too, must be loaded from the runtime — I mean, the actual frontend code to execute those needs to be loaded. So if we had a way to do that in a standalone runtime that can actually be embedded in third-party applications, we could enable that use case. 

Nicole: Is there a roadmap for native support for Scenes in Grafana dashboards?

Torkel: Yes. The core dashboarding experience is our top goal, beyond supporting the plugin use case. Behind a feature toggle, you can load normal dashboards in the Scenes framework and get some of the performance benefits, but it’s not feature-complete. We don’t have the edit mode done, and it’s missing features like annotations and ad-hoc queries. So we’re working on making the Scenes framework have feature parity with the current dashboarding, meaning we can open current dashboards and have 100% compatibility and the same behaviors. That’s going to take some time.

Once that is done, we can explore adding new features that the current dashboard architecture hasn’t enabled or has made it super hard to do, such as conditional panels and better support for drill downs.

Nicole: How can developers get started with Scenes today?

Torkel: The GitHub repo and the documentation. I think the project repo contains a demo app covering different functionalities of Scenes. But the easiest way is to use the create-plugin tool to get you started with a Scenes application starter plugin template, or use the Scenes app plugin examples.

Grafana Scenes is in public preview in Grafana OSS, Grafana Enterprise, and Grafana Cloud (Free, Pro, Advanced). To try Grafana Scenes in our free forever tier in Grafana Cloud, sign up here!

To learn more about Scenes, view this on-demand session from GrafanaCON 2023. And to learn more about the entire Grafana LGTM stack (Loki for logs, Grafana for visualization, Tempo for traces, Mimir for metrics), check out this webinar.