Editor Visuale
Clicca sugli elementi per modificare testo, colori, spaziatura, font e altro. Ideale per piccole modifiche; usa la chat per cambiamenti più grandi.
L’Editor Visuale ti permette di modificare l’interfaccia della tua app cliccando sugli elementi e modificandone le proprietà direttamente. Passa alla modalità Visual nella barra degli strumenti del builder per attivarlo.
Come funziona
Sezione intitolata “Come funziona”- Passa alla modalità Visual — è una sotto-modalità di Preview nella barra degli strumenti (la barra ha due segmenti: Preview e Admin)
- 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 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 di font — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
- Stile del font — Attiva/disattiva il 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 — Larghezza, colore e raggio (disponibile sugli elementi contenitore senza contenuto testuale)
- Immagine — Sostituisci con una foto stock dalla ricerca o carica la tua immagine (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 ogni colore Tailwind e proprietà CSS personalizzata 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 sistema di design esistente, senza dover indovinare i codici esadecimali.
Chiedi all’AI su un elemento selezionato
Sezione intitolata “Chiedi all’AI su un elemento selezionato”Per modifiche che l’editor delle proprietà non riesce a esprimere, digita un breve prompt nell’input 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 vs dinamici
Sezione intitolata “Elementi statici vs dinamici”L’Editor Visuale funziona meglio con 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 ricade automaticamente sulla 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 piccole e rapide:
- Correggere un refuso
- Regolare la spaziatura
- Cambiare un colore
- Aggiornare il testo di un pulsante
Per modifiche più grandi (nuove sezioni, ristrutturazioni 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 la modifica viene inclusa nella tua cronologia delle versioni al prossimo turno del builder che esegue il commit.
Posso annullare le modifiche visive?
Sì. Usa Cmd+Z / Ctrl+Z per annullare. L’Editor Visuale mantiene il proprio stack di annulla/ripristina.
Perché posso 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 funzioni) ricadono automaticamente sulla chat AI.
Quando dovrei usare l’Editor Visuale invece della chat AI?
| Strumento | Ideale per |
|---|---|
| Visual Editor | Modifiche rapide alle proprietà (testo, colori, spaziatura) cliccando |
| AI Chat | Modifiche complesse, nuove funzionalità, debug |
Questi sono gli unici due modi per modificare la tua app — non esiste un editor di codice. Vedi Modificare e accedere al tuo codice.