Skip to main content

Set up Scenes

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

Installation​

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} />;
};
note

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