Panel Plugin Development Guide?

Hi Gents,
Over the last couple of days I’m trying to get hands on, how to develop a new plugin from scratch with react, as this is the future framework. However, tons of documents, examples a.s.o. I found so far, are not giving many information. Is there somewhere a up to date panel plugin development or an step by step guide available?

Many thanks and best regards,

1 Like

sorry for the state of this, the react plugin platform is still in alpha, working on docs & guide, should be ready in the next 2-3 months

Ok. :unamused: Many thanks.
Would it be a fair statement, when saying that the Graph2 plugin is according to your new react standard?

If you’d like to be part of the development, we’re hoping to make grafana-toolkit the preferred way of developing plugins for Grafana going forward.

grafana-tookit helps you scaffold a React panel, using the following skeleton:

Like @torkel mentioned, we’re hoping to publish better docs and guides in the coming months. A part from setting up a new panel plugin from scratch, what would be useful to you to learn from a guide?


Many thanks. That’s confirming what I’ve used to start with right now.
Usefull from a guide would be to undersand which react components & props are available and how to use them (just like an API reference guide). It’s very time consuming to look this up and trying to understand in e.g. panel.ts and the ui-folder.

We are working on a Storybook for the new React components. It still have ways to go, but you can explore it in its current state by running yarn storybook in the Grafana repository.

You can then explore the different components in your browser on http://localhost:9001.


Cool! Will try it. :+1: :+1:

1 Like