diff --git a/docs/sources/plugins/datasources.md b/docs/sources/plugins/datasources.md
index d92ed390942..399d99b6292 100644
--- a/docs/sources/plugins/datasources.md
+++ b/docs/sources/plugins/datasources.md
@@ -20,7 +20,7 @@ To interact with the rest of grafana the plugins module file can export 5 differ
 
 ## Plugin json
 There are two datasource specific settings for the plugin.json
-```
+```javascript
 "metrics": true,
 "annotations": false,
 ```
diff --git a/docs/sources/plugins/panels.md b/docs/sources/plugins/panels.md
index a164eeebb35..56527341b71 100644
--- a/docs/sources/plugins/panels.md
+++ b/docs/sources/plugins/panels.md
@@ -4,7 +4,25 @@ page_description: Panel plugins for Grafana
 page_keywords: grafana, plugins, documentation
 ---
 
+ > Our goal is not to have a very extensive documentation but rather have actual code that people can look at. An example implementation of a datasource can be found in the grafana repo under /examples/panel-boilerplate-es5
+
 # Panels
 
-TODO
+To interact with the rest of grafana the panel plugin need to export a class in the module.js.
+This class have to inherit from sdk.PanelCtrl or sdk.MetricsPanelCtrl and be exported as PanelCtrl.
 
+```javascript
+  return {
+    PanelCtrl: BoilerPlatePanelCtrl
+  };
+```
+
+This class will be instancieted once for every panel of its kind in a dashboard and treated as an AngularJs controller.
+
+## MetricsPanelCtrl or PanelCtrl
+
+MetricsPanelCtrl inherits from PanelCtrl and adds some common features for datasource usage. So if your Panel will be working with a datasource you should inherit from MetricsPanelCtrl. If dont need to access any datasource then you should inherit from PanelCtrl instead.
+
+## Implementing a MetricsPanelCtrl
+
+If you choose to inherit from MetricsPanelCtrl you should implement a function called refreshData that will be called by grafana when its time for all panels to get new data.
\ No newline at end of file
diff --git a/examples/panel-boilerplate-es5/css/styles.css b/examples/panel-boilerplate-es5/css/styles.css
new file mode 100644
index 00000000000..b7259cb6cc8
--- /dev/null
+++ b/examples/panel-boilerplate-es5/css/styles.css
@@ -0,0 +1,3 @@
+.panel-boilerplate-values {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/examples/panel-boilerplate-es5/module.js b/examples/panel-boilerplate-es5/module.js
index 0e14c883923..ef6b23ea749 100644
--- a/examples/panel-boilerplate-es5/module.js
+++ b/examples/panel-boilerplate-es5/module.js
@@ -1,6 +1,7 @@
 define([
   'app/plugins/sdk',
-  'lodash'
+  'lodash',
+  './css/styles.css!'
 ], function(sdk, _) {
 
   var BoilerPlatePanelCtrl = (function(_super) {
diff --git a/examples/panel-boilerplate-es5/panel.html b/examples/panel-boilerplate-es5/panel.html
index 59d4cbe6d9d..4a413c95dfe 100644
--- a/examples/panel-boilerplate-es5/panel.html
+++ b/examples/panel-boilerplate-es5/panel.html
@@ -2,6 +2,6 @@
 	Basic panel
 </h2>
 
-<p class="text-center">{{ctrl.values}}</p>
+<p class="panel-boilerplate-values">{{ctrl.values}}</p>