Skip to content

Instantly share code, notes, and snippets.

Last active Aug 31, 2020
What would you like to do?
Example Panel for Home Assistant
Example panel.
Put this file in <config>/www/example-panel.js
In configuration.yaml:
- 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
# Data you want to make available to panel
hello: world
import "";
import {
} from "";
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>
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment