# Panel Plugin Development Guide?

**URL:** <https://community.grafana.com/t/panel-plugin-development-guide/24680>\
**Category:** Grafana Plugin Development\
**Created:** [January 13, 2020, 2:01pm UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680 "2020-01-13T14:01:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ruediger](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@ruediger](https://community.grafana.com/u/ruediger)\
**Post date:** [January 13, 2020, 2:01pm UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/1 "2020-01-13T14:01:06Z")

</div>

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,  
Ruediger

---

<div class="post-metadata">

**Author:** ![torkel](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/torkel/32/20_2.png) [@torkel](https://community.grafana.com/u/torkel)\
**Post date:** [January 13, 2020, 3:35pm UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/2 "2020-01-13T15:35:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ruediger](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@ruediger](https://community.grafana.com/u/ruediger)\
**Post date:** [January 13, 2020, 9:31pm UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/3 "2020-01-13T21:31:15Z")

</div>

Ok. 😒 Many thanks.  
Would it be a fair statement, when saying that the [Graph2](https://github.com/grafana/grafana/tree/master/public/app/plugins/panel/graph2) plugin is according to your new react standard?

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [January 14, 2020, 11:28am UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/4 "2020-01-14T11:28:59Z")

</div>

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/grafana](https://github.com/grafana/grafana/tree/master/packages/grafana-toolkit)**
>
> The tool for beautiful monitoring and metric analytics & dashboards for Graphite, InfluxDB & Prometheus & More - grafana/grafana

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

> **[grafana/simple-react-panel](https://github.com/grafana/simple-react-panel)**
>
> Boilerplate react example. Contribute to grafana/simple-react-panel development by creating an account on GitHub.

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?

---

<div class="post-metadata">

**Author:** ![ruediger](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@ruediger](https://community.grafana.com/u/ruediger)\
**Post date:** [January 14, 2020, 5:23pm UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/5 "2020-01-14T17:23:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [January 14, 2020, 7:43pm UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/6 "2020-01-14T19:43:49Z")

</div>

We are working on a [Storybook](https://storybook.js.org/) 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`.

 ![Screen Shot 2020-01-14 at 20.40.32](https://us1.discourse-cdn.com/grafana/original/2X/e/eeee1da984ef11c9d56b3d951cea3a30f2f32008.png)

---

<div class="post-metadata">

**Author:** ![ruediger](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@ruediger](https://community.grafana.com/u/ruediger)\
**Post date:** [January 17, 2020, 7:28am UTC](https://community.grafana.com/t/panel-plugin-development-guide/24680/7 "2020-01-17T07:28:43Z")

</div>

Cool! Will try it. 👍 👍
