Il builder visuale di card.
Un editor drag-and-drop a schermo intero progettato appositamente per Home Assistant. Progetta card visualmente usando blocchi, visualizza dati entità live e pubblica nel tuo dashboard — senza scrivere una singola riga di YAML o codice.
- Live
- Anteprima dati entità
- 2
- Pannelli laterali
- Drag
- and drop blocchi
- 9
- Punti di ancoraggio
Il tuo spazio di design, live e interattivo
Il canvas è il cuore del builder — un'anteprima live della tua card dove ogni modifica è immediatamente visibile con dati reali delle entità dalla tua istanza Home Assistant.
Posizionamento drag & drop
Trascina qualsiasi blocco dalla palette e rilascialo direttamente sul canvas o all'interno di un blocco layout. Riordina e annida liberamente.
Dati entità live
Il canvas renderizza la tua card con dati reali dalle tue entità Home Assistant mentre progetti — quello che vedi è esattamente quello che appare nel tuo dashboard.
Barra degli strumenti contestuale
Seleziona qualsiasi blocco per mostrare una barra degli strumenti contestuale con azioni rapide: duplica, elimina, sposta al layer, cambia modalità di posizionamento e altro.
Contorni blocchi
Attiva/disattiva contorni tratteggiati su tutti i blocchi per visualizzare i confini, la spaziatura e la struttura del layout durante il design — poi nascondili per un'anteprima pulita.
Tutto quello che ti serve, dove ti serve
Il builder è organizzato attorno a due pannelli laterali focalizzati che mantengono i tuoi strumenti di design e i controlli dei blocchi sempre a portata di mano.
Pannello sinistro — Blocchi e Layer
Blocchi
La palette blocchi, organizzata in quattro categorie: Base, Layout, Entità e Controlli. Trascina qualsiasi blocco sul canvas per iniziare a usarlo.
Layer
Un albero layer completo che mostra la gerarchia completa dei blocchi della tua card. Clicca per selezionare, trascina per riordinare, e ispeziona l'annidamento a colpo d'occhio.
Pannello destro — Configura, Stilizza e Interagisci
Proprietà
Configura i dati del blocco selezionato — contenuto testo, icona, binding entità, sorgente immagine, entity slot, intervallo slider e altro.
Stili
Controlla ogni aspetto visuale del blocco selezionato — posizionamento, dimensioni, tipografia, colore, sfondo, bordo, spaziatura, effetti e binding dinamici.
Azioni
Assegna comportamenti interattivi al blocco: tap, doppio tap o pressione prolungata. Supporta toggle, chiama servizio, naviga, più info, apri URL e action slot riutilizzabili.
Flow o assoluto — scegli tu
Ogni blocco può operare in una di due modalità di layout. Cambia liberamente tra di esse in qualsiasi momento dal pannello Stili.
Flow
I blocchi si impilano nell'ordine del documento. La card rispetta la direzione flex, il gap e l'allineamento. Ideale per layout responsivi guidati dal contenuto.
- Segue la direzione flex (riga / colonna)
- Gap e allineamento configurabili
- Ordine controllato tramite il pannello Layer
- Responsivo per natura
Assoluto
I blocchi sono posizionati liberamente sul canvas. Trascinali ovunque, ridimensiona con le maniglie e ancorali a uno dei 9 punti di riferimento.
- 9 punti di ancoraggio configurabili
- Unità pixel o percentuale
- Posizionamento visuale drag sul canvas
- Maniglie di ridimensionamento per larghezza e altezza
Controlli globali della card a portata di mano
La barra header si trova sopra il canvas e fornisce controlli a livello di card che influenzano l'intero design in un unico posto.
Entity Slot
Apri il gestore entity slot per definire riferimenti a entità riutilizzabili per l'intera card.
Action Slot
Apri il gestore action slot per definire azioni riutilizzabili assegnabili a qualsiasi blocco.
Media Manager
Sfoglia e carica immagini direttamente dall'interno del builder per usarle in qualsiasi blocco.
Selettore container
Passa tra breakpoint responsivi (Desktop, Tablet, Mobile) per progettare layout di card adattivi.
Disegno link
Attiva la modalità disegno link per creare linee di connessione SVG tra blocchi.
Anteprima azioni
Abilita la modalità azione sul canvas per testare le interazioni dei blocchi esattamente come si comportano nel dashboard.
Pronto a iniziare a progettare?
Installa CardBuilder sulla tua istanza Home Assistant e apri il builder — inizia gratis.