diff --git a/public/app/core/components/PanelHelp/PanelHelp.tsx b/public/app/core/components/PanelHelp/PanelHelp.tsx
new file mode 100644
index 00000000000..25340640d4b
--- /dev/null
+++ b/public/app/core/components/PanelHelp/PanelHelp.tsx
@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+import Remarkable from 'remarkable';
+import { getBackendSrv } from '../../services/backend_srv';
+import { DataSource } from 'app/types';
+
+interface Props {
+  dataSource: DataSource;
+  type: string;
+}
+
+interface State {
+  isError: boolean;
+  isLoading: boolean;
+  help: any;
+}
+
+export default class PanelHelp extends PureComponent<Props, State> {
+  componentDidMount(): void {
+    this.loadHelp();
+  }
+
+  loadHelp = () => {
+    const { dataSource, type } = this.props;
+    this.setState({ isLoading: true });
+
+    getBackendSrv()
+      .get(`/api/plugins/${dataSource.meta.id}/markdown/${type}`)
+      .then(response => {
+        const markdown = new Remarkable();
+        const helpHtml = markdown.render(response);
+
+        this.setState({
+          isError: false,
+          isLoading: false,
+          help: helpHtml,
+        });
+      })
+      .catch(() => {
+        this.setState({
+          isError: true,
+          isLoading: false,
+        });
+      });
+  };
+
+  render() {
+    const { isError, isLoading, help } = this.state;
+
+    if (isLoading) {
+      return <h2>Loading help...</h2>;
+    }
+
+    if (isError) {
+      return <h3>'Error occurred when loading help'</h3>;
+    }
+
+    return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: help }} />;
+  }
+}