What is Grafana Scenes? A Simple Guide to Get Started

Introduction

Grafana is an open-source platform for monitoring, visualizing and analyzing data. While Grafana has powerful built-in features for creating dashboards, sometimes they are limited when it comes to creating custom, dynamic, or workflow-driven experiences. With Grafana Scenes, you can create highly customizable, interactive dashboards tailored to your organization's specific needs. In this post, we want to talk about Grafana Scenes and how it works.

What is Grafana Scenes?

Grafana Scenes is an app development library that enables developers to create dashboard like experiences — such as querying and transforming data, dynamic panel rendering, and time ranges — directly within their Grafana application plugins.

Grafana Scenes is a TypeScript library that includes new APIs and components that enable application plugins developers to create full dashboards with features like template variables, time ranges, visualizations and layouts. Notably, it also embraces the concept of extensibility, which allows development teams to create dashboarding experiences that are highly dynamic and customizable.

Why Grafana Scenes?

As we said the traditional Grafana dashboard editor is powerful but limited when it comes to creating custom, dynamic, or workflow-driven experiences. Grafana Scenes solves this by:

• Offering an easy way of extending the core library features with custom scene objects, that allows developers to provide experiences tailored to their user needs.
• Allowing custom UI elements and dashboard to be programmed.
• Supporting integration of external APIs and custom data sources directly into Grafana dashboards.
• Making dashboards interactive by enabling user-driven workflows, like drill-downs or custom triggers.

Key Concepts of Grafana Scenes:

1. Scene Tree Model:

   • Grafana Scenes uses a scene tree structure, where each scene is a composable and reusable node in the hierarchy. This structure helps define what users see (e.g., graphs, tables, custom components) and how these elements interact.

2. Declarative Programming:

   • Grafana Scenes is extremely declarative, which means you just define the model, and you can use the normal dashboard to build the visualizations and queries you want. This approach reduces the boiler plate code and makes it easier to build and maintain complex visualizations. Being declarative helps developers focus on the "what" instead of the "how."

3. Reactive State Management:

   • Scenes has built-in tools for managing the application’s state reactively, meaning changes to the state automatically update the visualization. This enables real-time updates and seamless interactivity.

4. Composable Components:

   • Scenes library is built using modular components that can be reused across different dashboards. These components can include charts, forms, tables, filters, and other UI elements. This helps developers create reusable components.

5. Custom Logic and Workflows:

   • You can define specific logic, or actions to dashboards, making them more interactive and aligned with specific use cases.

Use Cases of Grafana Scenes:

1. Dynamic Dashboards:

   • You can add all sorts of dynamic behaviors to dashboards, such as conditionally showing part of the dashboard, or dynamically changing it based on user actions or external triggers.

2. Custom Observability Tools:

   • Create tools that merge metrics, logs, and traces from various data sources into a single view, customized for debugging specific systems or workflows.

3. Interactive Data Exploration:

   • Allow users to drill down into specific metrics or filter visualizations dynamically without needing to switch dashboards. Drill down pages and tabs can be easily implemented with Grafana Scenes.

Benefits of Grafana Scenes:

1. Flexibility:

   • Scenes enables developers to create experiences that are not possible with the default Grafana dashboard editor.

2. Reusability:

   • Components built with Grafana Scenes can be reused across multiple dashboards or views.

3. Streamlined Development:

   • Declarative APIs and reactive state management reduce complexity and speed up the development process.

4. Scalability:

   • Modular components and scene trees make it easier to scale dashboards as requirements grow.

Summary:

Grafana Scenes is an app development library written in TypeScript that supports features available in Grafana Dashboards and makes them accessible to plugin developers through an intuitive declarative API. It also provides an easy way to extend the core library features with custom scene objects, enabling developers to create highly dynamic and flexible dashboards. This allows app developers to provide experiences tailored to their user needs and those experiences can go far beyond the core features of the library itself.