Code Playground
Playground online per HTML, CSS e JavaScript con anteprima in tempo reale, editor con numeri di riga e console catturata. Prova i frammenti all'istante e scarica il risultato come singolo file HTML - tutto nel browser.
Che cos'è un playground di codice?
Un playground di codice è una sandbox dove scrivi HTML, CSS e JavaScript e vedi subito il risultato renderizzato. Questo aggiunge una console catturata, editor con numeri di riga e la possibilità di scaricare il lavoro come singolo file HTML.
Come funziona l'anteprima live?
I tre pannelli di codice vengono combinati in un documento HTML completo e renderizzati in un iframe in sandbox. Con l'esecuzione automatica attiva, l'anteprima si aggiorna circa mezzo secondo dopo aver smesso di digitare; altrimenti premi Esegui.
Cosa mostra il pannello console?
Tutto ciò che la pagina scrive con console.log, info, warn ed error, più gli errori runtime e le promise rifiutate non gestite, con i numeri di riga. Viene svuotata a ogni esecuzione.
Il mio codice viene salvato se ricarico la pagina?
Sì. Una bozza dei tre pannelli è salvata localmente nel browser e ripristinata alla visita successiva. Reimposta riporta il codice demo originale, e cancellare i dati del sito rimuove la bozza.
L'anteprima è in sandbox ed è sicura?
L'anteprima gira in un iframe in sandbox senza accesso same-origin: gli script testati non possono leggere questa pagina né i suoi cookie. Prova comunque solo codice fidato, perché viene eseguito nel tuo browser.
Posso scaricare il mio esperimento?
Sì. Scarica .html salva HTML, CSS e JavaScript attuali combinati in un unico file autonomo, apribile in qualsiasi browser o condivisibile.
Cosa posso eseguire nel pannello JavaScript?
JavaScript da browser standard: manipolazione del DOM, eventi, canvas, fetch verso API pubbliche (alle loro regole CORS) e qualsiasi libreria incollata inline. Moduli e pacchetti npm non vengono risolti.
Il playground richiede una connessione a internet?
Solo per caricare la pagina stessa. Modifica, anteprima e cattura della console funzionano poi localmente, e il codice che scrivi non viene mai caricato da nessuna parte.
Come usare Code Playground
Questo playground unisce HTML, CSS e JavaScript in un'anteprima dal vivo isolata (sandbox), interamente nel tuo browser, con un pannello console che cattura log ed errori. Una bozza viene salvata localmente così puoi riprendere da dove avevi lasciato.
- Modifica i riquadri HTML, CSS e JavaScript — ogni editor ha numeri di riga ed evidenziazione della sintassi.
- Con l'Esecuzione automatica attiva, l'anteprima si aggiorna mentre scrivi; altrimenti premi Esegui (o disattiva l'Esecuzione automatica ed esegui manualmente).
- Tieni d'occhio il pannello Console sotto l'anteprima: output di console.log, avvisi, errori ed eccezioni non gestite compaiono lì con i numeri di riga.
- Premi Reimposta per tornare alla demo integrata, o Scarica .html per salvare tutto in un unico file autosufficiente.
- Usa Apri in nuova finestra per vedere il documento corrente a dimensione piena in una scheda a parte.
La console viene svuotata a ogni esecuzione: aggiungi console.log a piacere durante il debug — appaiono all'istante senza aprire la vera console del browser.
Strumenti correlati
- Abbellitore JavaScript Abbellitore e formattatore di codice JavaScript gratuito online. Converti istantaneamente JS minificato in codice pulito, leggibile e ben indentato con opzioni personalizzabili.
- Minificatore JS Minifica il codice JavaScript istantaneamente. Rimuovi spazi, commenti e ottimizza il tuo JS per un caricamento più veloce.
- Tester Regex Testa e debugga espressioni regolari con corrispondenza in tempo reale e cattura di gruppi.
- Anteprima Markdown Editor Markdown online gratuito con anteprima live. Scrivi, renderizza ed esporta Markdown con supporto GFM completo.
- Verifica Hash Calcola e verifica hash MD5, SHA-1, SHA-256, SHA-512 localmente
- Calcolatrice Chmod Calcolatrice chmod online gratuita per visualizzare e calcolare i permessi dei file Linux con caselle di controllo. Converti istantaneamente tra notazione numerica (755, 644) e simbolica (rwxr-xr-x). Supporta permessi speciali come setuid, setgid, sticky bit.
- Tabella ASCII Riferimento completo per la codifica dei caratteri ASCII con codici decimali, esadecimali, ottali, binari, entità HTML e descrizioni. Ricerca e filtro istantanei.
- Visualizzatore Hex Visualizza i contenuti dei file in formato hex dump con ricerca, navigazione offset e scorrimento virtuale