Skip to main content

Set up Scenes

This topic describes how to install Scenes and create your first "Hello World" scene.


Use the @grafana/create-plugin to start a completely new project.

npx @grafana/create-plugin@latest

Alternatively, add @grafana/scenes to your Grafana app plugin by running the following command in your project:

yarn add @grafana/scenes

Hello World scene

The following instructions describe how to set up the "Hello World" scene.

1. Create a scene

Create your first scene using the snippet below. The following code will create a scene that contains a Grafana Text panel within a flex layout:

// helloWorldScene.ts

import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, VizPanel, PanelBuilders } from '@grafana/scenes';

export function getScene() {
return new EmbeddedScene({
body: new SceneFlexLayout({
children: [
new SceneFlexItem({
width: '50%',
height: 300,
body: PanelBuilders.text().setTitle('Panel title').setOption('content', 'Hello world!').build(),

2. Render a scene

Use the following code in your Grafana app plugin page to render the "Hello World" scene:

import React from 'react';
import { getScene } from './helloWorldScene';

export const HelloWorldPluginPage = () => {
const scene = getScene();

return <scene.Component model={scene} />;

The rendered scene won't be rendered within Grafana plugin page. To integrate scenes with Grafana sidebar, navigation and plugin page follow Scenes apps guide.

Source code

View the example source code