Lovelace: Custom Cards - custom element doesn't exist


i’ve been stuck for four days now.

How do you add new custom card element?

this is my configuration. it’s really messy because i’m still learning.


1 Like

usually you need to copy your content-card-example.js somewhere inside /www/ and add it to resources : if you’re using LL in YAML mode, check out this (example), otherwise go to Configuration → Lovelace Dashboards, select Resources tab and click the yellows plus sign at the bottom left to add a new one.
type is usually module.
path is /local/path/file.js where /local= /www/

here’s some info just in case

i worked home assistant 0.107.7

  • add resources to configuration.yaml

  • add card to ui-lovelace.yaml

i’ve made a blank card.

thanks to this card I was able to understand and make a blank card.

class BlankCard extends HTMLElement {
  constructor() {
    this.attachShadow({ mode: 'open' });
  setConfig(config) {
    if (!config.entity) {
      throw new Error('Please define an entity');

    const root = this.shadowRoot;
    if (root.lastChild) root.removeChild(root.lastChild);

    const card = document.createElement('ha-card');
    const content = document.createElement('div');
    const style = document.createElement('style');
    style.textContent = `
      ha-card {
        --base-unit: 50px;
        height: calc(var(--base-unit)*3);
        position: relative;
    // content.innerHTML = `
    //   <div class="container">
    //   </div>
    // `;
    // card.appendChild(content);
    this._config = config;

  set hass(hass) {
    const config = this._config;

    const root = this.shadowRoot;
    root.lastChild.hass = hass;

  getCardSize() {
    return 1;

customElements.define('blank-card', BlankCard);