Grafana Scenes is generally available: start building highly interactive apps today

Grafana Scenes is a frontend library that allows you to effortlessly extend Grafana, enabling capabilities that were once deemed unattainable, or exceedingly challenging, for Grafana app plugin developers. 

We first introduced Grafana Scenes with the launch of Grafana 10 at GrafanaCON 2023. Now, after 3 months in private preview, we are excited to announce that we are graduating Grafana Scenes to general availability. 

Let’s take a closer look at how Grafana Scenes enriches Grafana apps and the plugin development experience. 

What is a Grafana app?

To fully grasp the impact of Grafana Scenes, it’s important to first understand Grafana apps.

Grafana comes with many great tools out of the box, but sometimes you want to layer your own functionality on top of what it already provides. A Grafana app is a specific type of plugin to do just that. 

Apps go beyond new Grafana visualizations or data sources, providing additional functionality or the ability to integrate with external services. With Grafana apps, you can build just about anything on top of the Grafana platform, and it’s the same structure we use to build new Grafana features. One example of a Grafana app that we have built is the Synthetic Monitoring app — a blackbox monitoring solution provided as part of Grafana Cloud that allows organizations to actively monitor the performance and availability of their web applications and services.

With Grafana Scenes, we take the possibility of extending Grafana even further.

What is Grafana Scenes?

Scenes is a frontend library that enables unprecedented possibilities when it comes to building on top of Grafana. It’s our own way of building Grafana apps — an approach that, over the last few months, we have already applied to Grafana solutions like Kubernetes Monitoring, Synthetic Monitoring and Grafana Cloud Frontend Observability. Torkel Ödegaard, co-founder of Grafana Labs and the creator of Grafana, just recently shared his own experience using Scenes:

Up early on a Saturday to get some @grafana coding in before the kid wakes up. Rewriting core dashboard features with the scenes architecture. It is so fun, everything becomes so clean and simple.

— Torkel Ödegaard (@torkelo) September 2, 2023

Scenes provides an intuitive, declarative API that allows you to build dynamic dashboarding experiences directly in apps. With a few lines of code, you can quickly create an interactive experience in your Grafana app, including data querying, time range controls, and visualizations:

JavaScript Copy

const queryRunner = new SceneQueryRunner({ 
  datasource: { uid: 'gdev-testdata', type: 'testdata', }, 
  queries: [{ 
    refId: 'A',
    scenarioId: 'random_walk', 
    seriesCount: 5, 
    alias: '${seriesToShow}', 
  }], 
 }); 

const customVariable = new CustomVariable({
 name: 'seriesToShow', 
 label: 'Series to show', 
 value: '__server_names', 
 query: 'Server Names : __server_names, House locations : __house_locations', 
}); 

const scene = new EmbeddedScene({ 
  $timeRange: new SceneTimeRange(),
  $variables: new SceneVariableSet({ variables: [customVariable] }), 
  $data: queryRunner, 
  body: new SceneFlexLayout({ 
   children: [ 
     new SceneFlexItem({ 
       minHeight: 300, 
       body: PanelBuilders.timeseries().setTitle('${seriesToShow}').build(), 
     }), 
   ], 
 }), 
 controls: [
   new VariableValueSelectors({}), 
   new SceneTimePicker({}), 
   new SceneRefreshPicker({})
 ], 
});

The code above represents a Scenes definition, containing a query, time range controls, and a time series panel. In the screenshot below, we see a simple Grafana app plugin created with Scenes:

Scenes come with support for familiar dashboard features, including:

• Data querying and transformations
• Time range and variables management
• Panels and data visualization
• Versatile layout options

Apps built with Scenes are also seamlessly integrated with Grafana UI and navigation features, including dynamic pages with tabs and drill-down views.

How Scenes makes it easy to extend Grafana

Scenes is the way to build Grafana apps going forward. Thanks to its versatile API, which includes nearly all dashboard features, Scenes has a substantial impact on the app development process, as it:

1. Drastically reduces toil: Common features like variables support or time range management are provided by the library, so you can spend more time working on the core value of your app rather than reinventing the wheel.
2. Provides a familiar experience for Grafana users: Apps using Scenes integrate natively with Grafana, providing a look and feel consistent with the core Grafana product.
3. Introduces new possibilities to build apps: These include drill-down experiences that make it easier to build rich, data-driven applications.
4. Is built from the ground up with extensibility in mind: On top of the core features of the library, the Scenes API enables you to extend it with your own, tailored features.

Getting started

To learn more about Grafana Scenes, check out our Scenes documentation and watch the on-demand GrafanaCON 2023 session, “How to build dynamic, customizable dashboards with Grafana Scenes.” A recent “Grafana Office Hours” episode, as well as our GitHub repo for the Scenes app plugin, are also great resources. 

The easiest way to get started with Grafana is with Grafana Cloud, which has a generous forever-free tier and plans for every use case. Sign up for free today!