code_blocks Editor Live HTML/CSS/JS star

Come Funziona

Digita nelle schede HTML, CSS e JS e il pannello di anteprima si aggiorna mentre scrivi, renderizzando il risultato combinato all'interno di un iframe sandbox. L'attributo sandbox è impostato su allow-scripts senza allow-same-origin, ed è proprio questo a renderlo sicuro: gli script eseguiti nell'anteprima girano in un origin distinto e opaco, quindi non possono leggere i cookie, il local storage o il DOM di questa pagina, e questa pagina non può a sua volta accedere all'iframe. Questo isolamento è un confine di sicurezza imposto dal browser, non un semplice riquadro visivo — è lo stesso meccanismo che i siti usano per incorporare in modo sicuro contenuti di terze parti non affidabili (pubblicità, widget, frammenti di codice inviati dagli utenti) senza doversi fidare del codice al loro interno.

La modifica in sé è deliberatamente essenziale: tre textarea, nessuna evidenziazione della sintassi, nessun completamento automatico. Non è una funzionalità mancante ma un compromesso consapevole — una vera esperienza di modifica del codice (tokenizzazione delle parole chiave, corrispondenza delle parentesi, completamento automatico dei tag) significa caricare una libreria editor di terze parti di dimensioni considerevoli, il che aggiunge peso e un ritardo di caricamento prima ancora di poter digitare un solo carattere. Questo strumento ottimizza l'esatto contrario: apri la pagina e inizia a digitare immediatamente, con zero dipendenze e nessun passaggio di build di alcun tipo.

Ogni tasto premuto in una delle tre schede attiva una ricostruzione: l'HTML attuale, il CSS attuale racchiuso in un tag <style> e il JS attuale racchiuso in un tag <script> vengono assemblati in un unico documento e scritti nell'iframe. Non c'è alcun diffing o patching incrementale — l'intero documento di anteprima viene semplicemente sostituito, il che a questa scala è abbastanza veloce da sembrare istantaneo pur mantenendo semplice l'implementazione.

Cosa Sapere

Poiché tutto — modifica e rendering — avviene nel tuo browser, non c'è alcun andirivieni con il server e non serve alcun account. È adatto per testare rapidamente un trucco CSS, isolare un bug JavaScript da una codebase più ampia prima di segnalarlo, o prototipare un piccolo componente prima di copiare il risultato funzionante in un progetto reale. Nulla di ciò che digiti viene salvato automaticamente da nessuna parte, quindi trattalo come un blocco note usa e getta: copia tutto ciò che vuoi conservare prima di chiudere la scheda.