Work with nested plugins

Grafana app plugins can nest frontend data sources together with panel plugins so that you can provide a complete user experience.

Before you begin

Be sure that you are using the latest create-plugin tool:

npm

npx @grafana/create-plugin@latest

pnpm

pnpm dlx @grafana/create-plugin@latest

yarn

yarn create @grafana/plugin

Scaffold an app plugin

To scaffold an app plugin, follow a few easy steps:

1. When prompted What type of plugin would you like?, select app.

2. Make entries in both the plugin entry file (module.ts) and plugin meta file (plugin.json). Put them in a directory inside the ./src directory:

./src
 ├── README.md
 ├── components
+├── datasource
+│   ├── components
+│   │   ├── ConfigEditor.tsx
+│   │   └── QueryEditor.tsx
+│   ├── datasource.ts
+│   ├── img
+│   ├── module.ts
+│   ├── plugin.json
+│   └── types.ts
 ├── img
 │   └── logo.svg
 ├── module.ts
 └── plugin.json

tip

To help speed up development in VS Code, you can download data source and panel plugin source directories directly from the plugin-examples repo:

1. Press . or replace .com with .dev in the URL to open the repo in the GitHub editor.
2. In the Explorer pane (press Ctrl+Shift+E/Cmd+Shift+E), right-click the required file or folder, and then select Download.
3. On the Select Folder dialog, select the directory where you want to put the selected file or folder.