2022-05-26 23:06:25 +08:00
---
aliases:
- /docs/grafana/latest/developers/plugins/
- /docs/grafana/latest/plugins/developing/
title: Build a plugin
2022-07-09 03:21:29 +08:00
description: Resources for creating Grafana plugins
2022-05-26 23:06:25 +08:00
weight: 200
---
2020-05-07 23:45:50 +08:00
# Build a plugin
2022-06-17 03:09:16 +08:00
For more information on the types of plugins you can build, refer to the [Plugin Overview ]({{< relref "../../administration/plugin-management/" >}} ).
2020-05-07 23:45:50 +08:00
## Get started
The easiest way to start developing Grafana plugins is to use the [Grafana Toolkit ](https://www.npmjs.com/package/@grafana/toolkit ).
2022-06-03 00:57:22 +08:00
Open the terminal, and run the following command in your [plugin directory ]({{< relref "../../setup-grafana/configure-grafana/#plugins" >}} ):
2020-05-07 23:45:50 +08:00
```bash
npx @grafana/toolkit plugin:create my-grafana-plugin
```
2022-01-17 22:58:36 +08:00
> **Note:** If running NPM 7+ the `npx` commands mentioned in this article may hang. The workaround is to use `npx --legacy-peer-deps <command to run>`.
2020-05-07 23:45:50 +08:00
If you want a more guided introduction to plugin development, check out our tutorials:
2022-06-03 00:57:22 +08:00
- [Build a panel plugin ]({{< ref "/tutorials/build-a-panel-plugin/" >}} )
- [Build a data source plugin ]({{< ref "/tutorials/build-a-data-source-plugin/" >}} )
2020-05-07 23:45:50 +08:00
## Go further
Learn more about specific areas of plugin development.
### Tutorials
If you're looking to build your first plugin, check out these introductory tutorials:
2022-06-03 00:57:22 +08:00
- [Build a panel plugin ]({{< ref "/tutorials/build-a-panel-plugin/" >}} )
- [Build a data source plugin ]({{< ref "/tutorials/build-a-data-source-plugin/" >}} )
- [Build a data source backend plugin ]({{< ref "/tutorials/build-a-data-source-backend-plugin/" >}} )
2020-05-07 23:45:50 +08:00
Ready to learn more? Check out our other tutorials:
2022-06-03 00:57:22 +08:00
- [Build a panel plugin with D3.js ]({{< ref "/tutorials/build-a-panel-plugin-with-d3/" >}} )
2020-05-07 23:45:50 +08:00
2020-05-13 05:31:36 +08:00
### Guides
Improve an existing plugin with one of our guides:
2022-05-27 20:42:51 +08:00
- [Add authentication for data source plugins ]({{< relref "add-authentication-for-data-source-plugins/" >}} )
2022-06-03 00:57:22 +08:00
- [Add support for annotations ]({{< relref "add-support-for-annotations/" >}} )
- [Add support for Explore queries ]({{< relref "add-support-for-explore-queries/" >}} )
- [Add support for variables ]({{< relref "add-support-for-variables/" >}} )
- [Add a query editor help component ]({{< relref "add-query-editor-help/" >}} )
- [Build a logs data source plugin ]({{< relref "build-a-logs-data-source-plugin/" >}} )
- [Build a streaming data source plugin ]({{< relref "build-a-streaming-data-source-plugin/" >}} )
- [Error handling ]({{< relref "error-handling/" >}} )
- [Working with data frames ]({{< relref "working-with-data-frames/" >}} )
- [Development with local Grafana ]({{< relref "development-with-local-grafana/" >}} )
2020-05-13 05:31:36 +08:00
### Concepts
Deepen your knowledge through a series of high-level overviews of plugin concepts:
2022-06-03 00:57:22 +08:00
- [Data frames ]({{< relref "data-frames/" >}} )
2020-05-13 05:31:36 +08:00
### UI library
Explore the many UI components in our [Grafana UI library ](https://developers.grafana.com/ui ).
2020-09-25 22:47:52 +08:00
### Examples
For inspiration, check out our [plugin examples ](https://github.com/grafana/grafana-plugin-examples ).
2020-05-07 23:45:50 +08:00
### API reference
Learn more about Grafana options and packages.
#### Metadata
2022-06-03 00:57:22 +08:00
- [Plugin metadata ]({{< relref "metadata/" >}} )
2020-05-07 23:45:50 +08:00
#### Typescript
2021-11-23 05:58:51 +08:00
- Grafana Data
- Grafana Runtime
- Grafana UI
2020-05-07 23:45:50 +08:00
#### Go
2022-05-27 20:42:51 +08:00
- [Grafana Plugin SDK for Go ]({{< relref "backend/grafana-plugin-sdk-for-go/" >}} )
