Capire cosa genera Lovable: la struttura di un progetto

Nelle due lezioni precedenti hai creato il tuo primo progetto e imparato come scrivere prompt efficaci. A questo punto è naturale chiedersi cosa c'è davvero dietro quell'anteprima che si aggiorna a ogni messaggio. La risposta breve: codice vero, che puoi vedere, scaricare e, se vuoi, persino modificare a mano.

## In breve

Lovable genera codice reale e standard, non un formato proprietario chiuso: un'applicazione web scritta in TypeScript, con Tailwind CSS per lo stile, componenti dell'interfaccia costruiti su shadcn/ui, e un backend opzionale basato su Supabase o sul backend integrato di Lovable, chiamato Cloud. Puoi esplorare tutto questo dal tab Code dell'editor, anche senza saperlo leggere in dettaglio.

Che cos'è (e cosa NON è)

Il codice che Lovable genera è codice vero che possiedi, non un'astrazione proprietaria che ti lega alla piattaforma: puoi scaricarlo come archivio .zip dal code editor (sui piani a pagamento), oppure collegare il progetto a un repository GitHub o GitLab che resta sincronizzato in entrambe le direzioni, un tema che riprendiamo più avanti, nel modulo dedicato a GitHub.

Ma capire la struttura del progetto non è un prerequisito per usare Lovable: la stessa documentazione ufficiale lo dice chiaramente, la maggior parte delle persone non apre mai l'editor di codice, è uno strumento facoltativo, per chi vuole ispezionare cosa è stato costruito, fare una piccola modifica manuale, o collaborare con uno sviluppatore.

Come funziona

Da metà maggio 2026 lo stack tecnico dei nuovi progetti Lovable è cambiato: i progetti creati dal 13 maggio 2026 usano TanStack Start con rendering lato server (SSR), mentre i progetti più vecchi restano su React con Vite. Entrambi gli stack sono pensati per essere leggibili da motori di ricerca e crawler AI senza bisogno di configurazioni esterne. È un dettaglio da tenere a mente proprio perché Lovable evolve rapidamente: quello che leggi oggi sullo stack tecnico potrebbe cambiare ancora nei prossimi mesi, quindi vale la pena verificarlo nella documentazione ufficiale prima di dare per scontato un dettaglio tecnico specifico.

Al di là dello stack sotto il cofano, l'organizzazione visibile è sempre la stessa. Nell'editor, il tab Code apre un vero e proprio editor di codice: un pannello a sinistra mostra la struttura a cartelle del progetto, con componenti, pagine e file di configurazione; puoi cercare testo in tutto il progetto con Cmd/Ctrl+Shift+F, aprire più file in schede, e persino scaricare un singolo file. Sui piani a pagamento puoi anche modificare il codice direttamente: ogni salvataggio manuale diventa comunque una versione nella cronologia del progetto, esattamente come le modifiche fatte da Lovable in chat.

Il resto degli strumenti del progetto vive nel tab More del project toolbar: Cloud per database, utenti e storage; Security per i controlli di sicurezza; SEO & AI search per verificare come motori di ricerca e strumenti AI leggono il sito, metadati, dati strutturati, indicizzazione, robots.txt; Connectors per i servizi collegati al progetto.

Un dettaglio pratico utile fin da ora: quando vuoi che Lovable modifichi qualcosa di preciso, puoi indicare il file o persino la riga esatta scrivendo @ seguito dal percorso nella chat, invece di descrivere a parole dove si trova il problema. Lo segnala esplicitamente la documentazione ufficiale: puntare il file o la riga esatta è spesso più veloce che descriverli.

## Perché conta

Capire, anche solo a grandi linee, cosa genera Lovable serve a due cose concrete. La prima è comunicare meglio con Lovable stesso: sapere che esiste un tab Code e che puoi riferire un file preciso in chat rende le richieste di modifica più rapide e mirate, soprattutto quando qualcosa non funziona in un punto specifico. La seconda è la tranquillità sul lungo periodo: sapere che il codice è tuo, esportabile e sincronizzabile con GitHub, significa che scegliere Lovable oggi non ti chiude le porte a portare il progetto altrove domani, o a farlo continuare da uno sviluppatore se il progetto cresce oltre quello che vuoi gestire da solo.

## Esempio lampante

### Contesto ipotetico

un consulente freelance ha costruito su Lovable uno strumento interno per il proprio piccolo team, una tabella per tracciare i progetti dei clienti con stato e scadenze. Il progetto cresce, e decide di far entrare uno sviluppatore part-time per aggiungere funzionalità più complesse.

INPUT. Il consulente invita lo sviluppatore a collaborare sul progetto e gli chiede di dare un'occhiata a com'è fatto prima di iniziare.

ANALISI. Lo sviluppatore apre il tab Code, esplora la struttura a cartelle, componenti dell'interfaccia, pagine, l'integrazione con il database, e riconosce uno stack che già conosce: non deve imparare un linguaggio proprietario o un formato chiuso.

DECISIONE. Invece di ripartire da zero, lo sviluppatore propone di collegare il progetto a un repository GitHub tramite la sincronizzazione bidirezionale di Lovable, così può continuare a lavorare col proprio editor abituale mentre il consulente continua a usare la chat per le modifiche più semplici.

OUTPUT. I due lavorano sullo stesso progetto con strumenti diversi, senza migrazioni né riscritture, perché il codice generato da Lovable era già codice standard e reale.

Come farlo

1. Apri un tuo progetto e clicca sul tab Code in alto nell'editor.
2. Esplora il pannello a sinistra: nota come sono organizzati componenti, pagine e file di configurazione, senza preoccuparti di capire ogni riga.
3. Usa la ricerca (Cmd/Ctrl+Shift+F) per trovare dove vive un testo o un elemento specifico che vuoi cambiare.
4. Prova a riferire un file in chat scrivendo @ seguito dal nome, la prossima volta che chiedi una modifica precisa.
5. Dai un'occhiata al tab More per farti un'idea di cosa c'è oltre al codice: Cloud, Security, SEO & AI search.
6. Se sei su un piano a pagamento e vuoi provare, apri un file, fai una modifica minima, salva, e verifica che compaia nella cronologia versioni.
7. Se prevedi di far crescere il progetto con l'aiuto di uno sviluppatore, valuta fin da ora il collegamento a GitHub, lo vediamo in dettaglio più avanti nel corso.

## Errori comuni

Pensare che il codice generato sia "chiuso" o proprietario

Non lo è: è codice reale, scaricabile ed esportabile su GitHub o GitLab in qualsiasi momento.

Sentirsi obbligati ad aprire il tab Code fin da subito

Non serve, se il tuo obiettivo è restare interamente nella chat: è uno strumento a disposizione, non un passaggio obbligato.

Modificare codice a mano senza capire cosa si sta toccando

È possibile sui piani a pagamento, ma ogni modifica manuale che rompe qualcosa va corretta o revertita esattamente come una modifica fatta da Lovable, non c'è una rete di sicurezza aggiuntiva per gli errori umani nel codice.

Dare per scontato uno stack tecnico specifico senza verificarlo

Lo stack dei progetti Lovable è cambiato nel 2026 (React+Vite per i progetti più vecchi, TanStack Start con SSR per quelli più recenti): prima di basare una decisione tecnica su un dettaglio simile, conviene controllare la documentazione aggiornata.

Quando questo lavoro conta meno

Se il tuo obiettivo è un sito semplice, gestito interamente tramite chat, e non prevedi mai di farlo crescere con l'aiuto di uno sviluppatore esterno, non hai alcun bisogno di aprire il tab Code o di capire la struttura del progetto in dettaglio. È esattamente il caso descritto dalla documentazione ufficiale: la maggior parte di chi usa Lovable non lo fa mai, e va benissimo così.

## In sintesi

Lovable genera codice reale. TypeScript, Tailwind, componenti shadcn/ui, backend Supabase o Cloud, organizzato in una struttura standard che puoi esplorare dal tab Code, scaricare o sincronizzare con GitHub. Non serve saperlo leggere per usare Lovable bene, ma sapere che esiste toglie la paura di restare "chiusi dentro" allo strumento, e aiuta a comunicare richieste più precise quando serve.

## Cosa imparare dopo

Capire la struttura del progetto aiuta anche in un altro momento chiave: quando qualcosa si rompe. Nella prossima lezione vediamo come iterare e correggere errori senza saper programmare, usando gli strumenti che Lovable mette a disposizione proprio per questo.

---

Vuoi provarlo?

Prova Lovable →

Link di affiliazione: se ti iscrivi da qui, ricevo una piccola commissione, a te non cambia nulla.