In questo articolo
Cos'è l'anteprima HTML in tempo reale?
L'anteprima HTML in tempo reale è un editor di codice nel browser che renderizza il tuo HTML, CSS e JavaScript in tempo reale. Mentre digiti, il pannello di output si aggiorna istantaneamente, dandoti un feedback visivo immediato senza passare tra un editor e una scheda del browser.
L'anteprima viene eseguita all'interno di un iframe sandbox con rigide restrizioni di sicurezza. Questo significa che il tuo codice viene eseguito in un ambiente isolato — non può accedere alla pagina principale, ai cookie o alla memoria locale. Hai a disposizione un ambiente sicuro per la sperimentazione senza alcun rischio per l'applicazione host.
Come funziona l'anteprima in tempo reale
L'editor combina il tuo HTML, CSS e JavaScript in un unico documento e lo inietta in un iframe sandbox. Gli aggiornamenti sono temporizzati per mantenere l'anteprima reattiva senza sovraccaricare il browser.
- Iframe sandbox — l'anteprima funziona solo con sandbox="allow-scripts", bloccando l'accesso alla pagina principale, cookie, moduli e navigazione per un isolamento completo
- Schede di codice separate — scrivi HTML, CSS e JavaScript in pannelli dedicati, ciascuno con modifica appropriata alla sintassi, combinati automaticamente durante il rendering
- Aggiornamenti temporizzati — le modifiche vengono applicate dopo una breve pausa nella digitazione, mantenendo l'anteprima fluida ed evitando ri-rendering costanti ad ogni battitura
Prova gratuitamente — nessuna registrazione richiesta
Prova l'anteprima HTML in tempo reale →Quando usare l'anteprima HTML in tempo reale
L'anteprima in tempo reale è ideale quando hai bisogno di un rapido feedback visivo su HTML e CSS senza un ambiente di sviluppo completo.
- Prototipazione rapida — testa idee di layout, combinazioni di colori e design dei componenti istantaneamente senza configurare strumenti di build o server di sviluppo
- Apprendimento di HTML e CSS — i principianti possono vedere l'effetto di ogni tag e proprietà immediatamente, rendendo il ciclo di apprendimento molto più breve
- Test di template email — visualizza in anteprima layout di email HTML con stili inline per verificare il rendering prima dell'invio, poiché i client email hanno un supporto CSS limitato
Domande frequenti
L'anteprima è sicura? Il mio codice può accedere alla pagina principale?
L'anteprima è completamente in sandbox. L'iframe usa sandbox="allow-scripts" senza allow-same-origin, il che significa che il tuo codice può eseguire JavaScript ma non può accedere al DOM della pagina principale, cookie, localStorage o dati di sessione. È lo stesso modello di sicurezza utilizzato da piattaforme come CodePen e JSFiddle.
Perché allow-same-origin non è incluso nel sandbox?
Includere allow-same-origin con allow-scripts permetterebbe al codice in anteprima di uscire completamente dal sandbox — potrebbe accedere ai cookie della pagina principale, modificare il DOM o leggere dati sensibili. Ometterlo garantisce un isolamento completo. Il compromesso è che localStorage e sessionStorage non sono disponibili nell'anteprima, ma questa è una scelta di sicurezza deliberata.
Posso caricare librerie CSS o JavaScript esterne nell'anteprima?
Sì. Puoi aggiungere tag link e script che fanno riferimento a URL CDN (es. Bootstrap, Tailwind, jQuery) nel tuo pannello HTML. L'iframe sandbox consente richieste di rete per caricare risorse esterne. Tieni solo presente che anche gli script esterni funzionano sotto le restrizioni del sandbox — nemmeno loro possono accedere alla pagina principale.