Editor HTML online

Scrivi, esegui e condividi snippet di codice, senza configurare nulla.

AnteprimaAnteprima automatica

Console

L'output della console appare qui.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Lorem Ipsum Demo</title>
        <style>
            body { font-family: system-ui, sans-serif; padding: 24px; max-width: 680px; }
            p { color: #333; line-height: 1.6; }
        </style>
    </head>
    <body>
        <h1>About the project</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt.</p>
    </body>
</html>

Crea con HTML, CSS e JavaScript con un'anteprima dal vivo

Un playground HTML, CSS e JavaScript online e gratuito con una vera anteprima nel browser. Modifica tre file, index.html, styles.css e script.js, e l'iframe si aggiorna a ogni modifica. Niente server locale, niente estensione Live Server, niente fase di build.

L'editor è costruito sullo stesso motore di VS Code, quindi tag HTML, proprietà CSS e completamento automatico JS funzionano tutti. L'anteprima dal vivo mostra la tua pagina in un iframe isolato nel browser. Ottimo per abbozzare una landing page, sperimentare con CSS grid o scrivere script DOM in JavaScript puro.

Perché questo playground HTML, CSS e JavaScript è utile

Anteprima dal vivo immediata: modifica HTML, CSS o JS e l'iframe si aggiorna a ogni modifica. Nessuna build, nessun ricaricamento.
Evidenziazione della sintassi e completamento automatico per HTML, CSS e JavaScript. Scorciatoie in stile Emmet e feedback immediato, tutto nello stesso motore di editor di VS Code.
Zero installazioni: niente Node, niente Live Server, niente server HTTP locale. Visualizza HTML, CSS e JS da qualsiasi browser.
Anteprima dal vivo con tutti e tre i file: HTML, CSS e JavaScript si modificano insieme e si aggiornano in un iframe a ogni modifica, senza build.

Cosa puoi creare nel playground HTML, CSS e JavaScript

Una landing page: HTML ben strutturato, CSS moderno (grid, flex, custom property) e un pizzico di JavaScript, tutto ricaricato dal vivo nell'iframe di anteprima.
Esperimenti CSS: layout grid, allineamento flex, animazioni e media query responsive, con un riscontro visivo immediato a ogni modifica.
Scripting del DOM in JavaScript puro: querySelector, event listener, chiamate fetch, localStorage, con un'anteprima dal vivo nel browser per un feedback immediato.

Domande frequenti sul playground HTML, CSS e JavaScript

Il playground HTML, CSS e JavaScript online è gratuito?

Sì, il playground HTML, CSS e JavaScript è gratuito. Niente registrazione, niente server locale e niente estensione Live Server di VS Code: scrivi e guarda l'anteprima.

Mi serve un server locale o Live Server di VS Code?

Non serve installare nulla. Non ti servono Live Server di VS Code, un server HTTP locale o Node. Il browser mostra l'anteprima dei tuoi file HTML, CSS e JS direttamente in un iframe.

Il playground HTML, CSS e JavaScript funziona da smartphone?

Sì. Il playground HTML, CSS e JavaScript funziona nei browser di computer, tablet e smartphone. L'editor, l'iframe di anteprima e le schede dei file si adattano agli schermi più piccoli.

È sicuro visualizzare HTML e JavaScript qui?

Sì. HTML, CSS e JavaScript vengono visualizzati in un iframe di anteprima isolato nel tuo browser, separato dalla pagina di Coddy che lo contiene.

Come imparo HTML, CSS e JavaScript dopo aver provato il playground?

Modifica l'HTML, il CSS e il JS di esempio, premi Esegui e guarda l'anteprima aggiornarsi. Quando vuoi qualcosa di più strutturato, i corsi interattivi di HTML, CSS e JavaScript di Coddy ti portano dai selettori fino a pagine complete.

Strumenti utili per Web

Strumenti gratuiti nel browser che si abbinano bene al playground Web, tutti parte di Coddy.

Vedi tutti gli strumenti per sviluppatori Cheat sheet Web Confronta le piattaforme di programmazione