Skip to content
Template project for developing plugins for Grafana with Webpack
JavaScript CSS HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode rm comments from launch.json May 21, 2018
build Update Apr 5, 2018
dist Update dist Feb 13, 2018
src Change div with plugin ID in scss to tag with plugin ID Feb 15, 2018
.gitignore add dist Sep 16, 2017 Update Jul 12, 2019
package-lock.json fix node-sass version and npm audit Jul 14, 2019
package.json fix node-sass version and npm audit Jul 14, 2019

Webpack Template for Grafana plugins development

Grafana plugin webpack version


  • Uses npm instead of bower
  • Avoid using /external folder with libs’ sources (but you can, if you want)
  • Smaller resulting bundle compared to Grunt build
  • All webpack features available
  • SASS support with separate styles for dark and light Grafana themes
  • Debugging with vscode-chrome-debug

Build plugin

npm install
npm run build


There are template SASS files at src/css/.

Change root tag in SASS files to default Grafana tag (see example below) with ID of your plugin in order to prevent CSS conflicts between plugins.

Root tag example: panel-plugin-grafana-plugin-template-webpack (where grafana-plugin-template-webpack is ID of your plugin).

If you don't need separate styles for for dark and light themes - follow comments in module.js.

If you want to use CSS instead of SASS - just change files extensions at src/css/ and in module.js.

See also

About CorpGlory Inc.

The project developed by CorpGlory Inc., a company which provides high quality software development, data visualization, Grafana and monitoring consulting.

You can’t perform that action at this time.