Editor Visuale
Clicca sugli elementi per modificare testo, colori, spaziatura, font e altro. Ideale per piccole modifiche; usa la chat per cambiamenti più ampi.
L’Editor Visuale ti permette di modificare l’interfaccia della tua app cliccando sugli elementi e modificandone le proprietà direttamente. Attivalo passando alla modalità Visual nella barra degli strumenti del builder.
Come funziona
Sezione intitolata “Come funziona”- Passa alla modalità Visual nella barra degli strumenti (accanto a Preview, Code e Dashboard)
- Passa il cursore sugli elementi nell’anteprima — vengono evidenziati con un overlay
- Clicca su un elemento per selezionarlo
- Modifica le proprietà nel pannello laterale: testo, colori, spaziatura, font, bordi, immagini, effetti
Le modifiche vengono applicate immediatamente all’anteprima e scritte nei tuoi file sorgente. Usa il pulsante Reset last edit nella barra laterale per annullare l’ultima modifica a una proprietà.
Cosa posso modificare?
Sezione intitolata “Cosa posso modificare?”- Testo — Modifica il contenuto direttamente
- Dimensione del font — xs, sm, base, lg, xl, ecc.
- Peso del font — thin, light, normal, medium, semibold, bold, extrabold
- Famiglia del font — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
- Stile del font — Attivazione/disattivazione corsivo
- Allineamento del testo — left, center, right, justify
- Colore del testo — Qualsiasi colore Tailwind
- Colore di sfondo — Qualsiasi colore Tailwind
- Spaziatura — Padding e margin su tutti i lati
- Bordo — Spessore, colore e raggio (disponibile sugli elementi contenitore privi di contenuto testuale)
- Immagine — Sostituisci con una foto stock tramite ricerca o carica un’immagine personalizzata (si applica agli elementi img e alle immagini di sfondo)
- Effetti — Ombra e opacità
Annulla / Ripristina
Sezione intitolata “Annulla / Ripristina”Usa Cmd+Z (Mac) o Ctrl+Z (Windows) per annullare le modifiche. Cmd+Shift+Z / Ctrl+Shift+Z per ripristinarle.
Palette della pagina
Sezione intitolata “Palette della pagina”L’Editor Visuale analizza la tua pagina e mostra tutti i colori Tailwind e le proprietà CSS personalizzate già in uso. Quando apri il selettore colore per l’elemento selezionato, puoi scegliere da questa palette della pagina per restare coerente con il tuo design system esistente, senza dover indovinare i codici hex.
Chiedi all’AI riguardo a un elemento selezionato
Sezione intitolata “Chiedi all’AI riguardo a un elemento selezionato”Per modifiche che l’editor delle proprietà non riesce a esprimere, digita un breve prompt nel campo Ask AI in fondo alla barra laterale. L’elemento selezionato viene passato come contesto, quindi prompt come “rendi questa card più compatta” o “aggiungi uno stato hover con un leggero sollevamento” funzionano senza dover descrivere quale elemento intendi.
Elementi statici e dinamici
Sezione intitolata “Elementi statici e dinamici”L’Editor Visuale funziona meglio con gli elementi statici, dove il className e il contenuto testuale sono stringhe letterali nel JSX. Per gli elementi dinamici (className calcolati, rendering condizionale, espressioni), l’editor passa automaticamente alla chat AI con un prompt strutturato.
Quando dovrei usare l’Editor Visuale?
Sezione intitolata “Quando dovrei usare l’Editor Visuale?”L’Editor Visuale è ideale per modifiche rapide e piccole:
- Correggere un errore di battitura
- Regolare la spaziatura
- Cambiare un colore
- Aggiornare il testo di un pulsante
Per modifiche più ampie (nuove sezioni, ristrutturazione del layout, nuove funzionalità), usa invece la chat AI.
Come salvo le modifiche?
Sezione intitolata “Come salvo le modifiche?”Le modifiche vengono salvate automaticamente quando modifichi una proprietà. Il file viene scritto nel tuo runtime e committato quando l’AI o tu create un commit.
Posso annullare le modifiche visive?
Sì. Usa Cmd+Z / Ctrl+Z per annullare. L’Editor Visuale mantiene il proprio stack di annullamento/ripristino.
Perché riesco a modificare alcuni elementi ma non altri?
Gli attributi di testo statico e className possono essere modificati direttamente. I valori dinamici o calcolati (template literal, espressioni ternarie, chiamate a funzione) passano automaticamente alla chat AI.
Qual è la differenza tra l’Editor Visuale e l’Editor di Codice?
| Strumento | Ideale per |
|---|---|
| Visual Editor | Modifiche rapide alle proprietà (testo, colori, spaziatura) tramite clic |
| Code Editor | Modifica completa del codice sorgente con VS Code |
| AI Chat | Modifiche complesse, nuove funzionalità, debug |