From 9846041f2599df62fe1bf93218423bef19cf3510 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Tue, 1 Sep 2020 13:58:24 +0200
Subject: [PATCH] Add custom panel example (#631)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
---
 .../custom-ui/creating-custom-panels.md       | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/docs/frontend/custom-ui/creating-custom-panels.md b/docs/frontend/custom-ui/creating-custom-panels.md
index b33d3b79..49a9ff25 100644
--- a/docs/frontend/custom-ui/creating-custom-panels.md
+++ b/docs/frontend/custom-ui/creating-custom-panels.md
@@ -8,7 +8,74 @@ Besides components registering panels, users can also register panels using the
 
 ## Introduction
 
-Panels are defined as custom elements. You can use any framework that you want, as long as you wrap it up as a custom element. To quickly get started with a panel, we've created a [React custom panel starter kit](https://github.com/home-assistant/custom-panel-starter-kit-react).
+Panels are defined as custom elements. You can use any framework that you want, as long as you wrap it up as a custom element. To quickly get started with a panel, create a new file `<config>/www/example-panel.js` with this content
+
+```js
+import "https://unpkg.com/wired-card@2.1.0/lib/wired-card.js?module";
+import {
+  LitElement,
+  html,
+  css,
+} from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
+
+class ExamplePanel extends LitElement {
+  static get properties() {
+    return {
+      hass: { type: Object },
+      narrow: { type: Boolean },
+      route: { type: Object },
+      panel: { type: Object },
+    };
+  }
+
+  render() {
+    return html`
+      <wired-card elevation="2">
+        <p>There are ${Object.keys(this.hass.states).length} entities.</p>
+        <p>The screen is${this.narrow ? "" : " not"} narrow.</p>
+        Configured panel config
+        <pre>${JSON.stringify(this.panel.config, undefined, 2)}</pre>
+        Current route
+        <pre>${JSON.stringify(this.route, undefined, 2)}</pre>
+      </wired-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        background-color: #fafafa;
+        padding: 16px;
+        display: block;
+      }
+      wired-card {
+        background-color: white;
+        padding: 16px;
+        display: block;
+        font-size: 18px;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+    `;
+  }
+}
+customElements.define("example-panel", ExamplePanel);
+```
+
+Then add to your `configuration.yaml`:
+
+```yaml
+panel_custom:
+  - name: example-panel
+    # url_path needs to be unique for each panel_custom config
+    url_path: redirect-server-controls
+    sidebar_title: Example Panel
+    sidebar_icon: mdi:server
+    module_url: /local/example-panel.js
+    config:
+      # Data you want to make available to panel
+      hello: world
+```
 
 ## API reference