JavaScript Templates

JavaScript templates provide powerful customization capabilities for your Navbar Card. They allow you to create dynamic content, conditional rendering, and interactive features based on your Home Assistant state and user context.

Check the configuration to see which fields support JavaScript templates.

Template Syntax

To use JavaScript templates in your configuration:

1. In YAML editor, wrap your JavaScript code in [[[ and ]]]:

   field: |
     [[[ your_javascript_code_here ]]]

2. In visual editor, simply write your JavaScript code:

   your_javascript_code_here;

---

Available Context

Your JavaScript templates have access to these predefined variables:

Variable	Description	Content
states	Global state of all HA entities	HA states
user	Current user information	HA user state
hass	Home Assistant instance	HA hass object
navbar	Navbar card internal state	{isDesktop: boolean}

States Object

Access entity states and attributes:

// Get entity state
states['light.kitchen'].state;

// Get entity attributes
states['light.kitchen'].attributes.brightness;

// Check if entity exists
states['sensor.temperature'] !== undefined;

User Object

Access user information:

// User properties
user.name; // Username
user.is_admin; // Admin status
user.is_owner; // Owner status
user.id; // User ID

Navbar Object

Access navbar-specific information:

// Navbar properties
navbar.isDesktop; // Desktop/mobile mode

---

Debugging Tips

1. Use Console Logging. Open the browser console (F12) to debug your templates.

   [[[
     console.log('States:', states);
     console.log('User:', user);
     console.log('Navbar:', navbar);
     return 'Debug Mode';
   ]]]

2. Error Handling. Use try/catch to handle errors in your templates.

   [[[
     try {
       // Your code here
       return 'Success';
     } catch (error) {
       console.error('Template Error:', error);
       return 'Error';
     }
   ]]]