Hi everyone,
I wanted to share my first custom card with you all.
I was looking for a room card that is compact, visually customizable, and allows for a flexible grid layout without having to mess with complex YAML nesting.
So I built the Room Card.
It focuses on stability, performance (Vanilla JS), and usability. Everything can be configured directly via the visual editor.
Key Features
Visual Editor: Configure everything in the UI – no YAML required.
Flexible Grid: You decide if a button takes 1/3, 1/4, or 1/6 of the row width.
Smart Chips: Automatically shows active devices (e.g., open windows, low batteries, high humidity).
Custom Heights: Make important buttons taller for better accessibility.
Fast: Written in Vanilla JS with no external dependencies.
Installation
The card is ready to be installed via HACS (Custom Repository):
- Open HACS.
- Go to “Custom Repositories” (top right menu).
- Add URL:
https://github.com/lop1505/RoomCard - Category: Lovelace (or Dashboard in newer versions).
- Click “Install”.
Or check out the code and documentation on GitHub:
GitHub Repository
I’d love to hear your feedback and suggestions!
Cheers,
OneLine
Renaming to avoid conflicts To prevent clashes with other existing “room-card” projects, I have officially scoped the card name.
Dynamic Unit Support (“Freedom Units”) No more hardcoded Celsius! The card now automatically detects your Home Assistant system settings. Whether you use Fahrenheit, Celsius, the card adapts instantly without manual config.
How to update:
Editor is much cleaner and more flexible (free label/status positioning, collapsible sections, improved layout)
New Conditional tab to show the card only when defined conditions match
Header icon now reacts dynamically to entity state, just like the buttons
Less unnecessary updates → noticeably smoother on larger dashboards
OneLine Room Card — What’s new since v1.2.2 (now at v1.2.5)
Climate Inline Slider — Direct target temperature control on climate buttons without opening a detail dialog. Shows current and target temperature live while dragging.
Dedicated Buttons Tab — Button configuration moved to its own tab. The former “General” section split into “Card Behavior” and “Header” for a much cleaner editing experience.
Configurable Icon Size — Set a custom icon size per button or a global default for all buttons.
Info Line Position Slider — Drag the title and info line left/right across the header with snap points at left, center, and right.
Cover Position Presets — Tap-to-set position presets directly on cover buttons. Default: 0% / 50% / 100%, fully customizable.
Light Color Favorites — Tap-to-set RGB color swatches on light buttons with active color highlighting.
Alert Sensors — Threshold logic (above / below / state), active alerts highlight the card border. A collapsed mode shows a count badge with a popup on click.
Sensor Sparklines — Renders a mini history chart directly on the tile with configurable history range and auto-refresh.
Time Since Last Change — Shows elapsed time per button (just now, 12 min, 2h 15min). Combined with state renders as “on · 2h”. A card-level option shows the most recently changed entity as a header badge.
Multi-State Window/Door Sensors — Support for arbitrary sensor domains, custom open states, and per-state color overrides.
Editor Fixes — Scroll no longer jumps after changes, color applies automatically when a value is present, conditions editor no longer destroyed while editing.
