Da Pug a HTML quando devi vedere il markup prima di incollarlo
Pug (e la vecchia sintassi Jade) scambia le parentesi angolari con l’indentazione. Va bene finché non hai venti righe annidate e il dubbio se `nav.main-nav` si sia chiuso correttamente tre livelli sopra. La soluzione abituale è la CLI `pug` su una macchina con Node. Questa pagina fa la compilazione nella scheda che hai già aperta. Incolla un frammento, importa un `.pug` o `.jade`, leggi l’HTML a destra mentre modifichi. La compilazione gira in locale dopo il caricamento: nulla viene inviato a un server per la trasformazione. Ciò che distingue questo banco da un convertitore «incolla e spera» è l’anteprima: passi dal markup grezzo alla pagina renderizzata e intercetti errori di layout prima che l’HTML finisca in un CMS, in un tool email o nel repo di un collega.
La conversione visiva batte l’indentazione nella testa
La maggior parte degli strumenti Pug verso HTML offre una casella di testo e un link di download. Per cinque righe basta. Quando devi controllare una navigazione, una griglia di card o un footer con testo e link mescolati, non regge. Qui sorgente e risultato restano visibili insieme. Cambi un’indentazione, il pannello HTML reagisce, passi ad Anteprima quando contano spaziatura e gerarchia — non solo se da qualche parte c’è un `</div>`. La striscia di stato sotto l’editor dice se il modello viene analizzato. In caso di errore, compare il messaggio del compilatore sulla riga incriminata — non un pannello vuoto e muto. HTML live più render in sandbox: è la differenza pratica. Non esporti markup alla cieca per aprirlo in un’altra app e scoprire se la pagina regge.
Due limiti subito, per non perdere tempo. Lo strumento compila il Pug che incolli o importi nel browser. Non legge una cartella di progetto: `include`, `extends` e partial esterni restano fuori. Mixin, condizioni, cicli e blocchi `style.` / `script.` nello stesso file si comportano come in compilazione locale. Se scrivi JavaScript su più righe in testa al modello — ad esempio un array di voci di menu — usa una riga `-` da sola e il blocco JavaScript rientrato sotto. Pug tratta solo la prima riga dopo `-` come codice; continuare un array sulla riga indentata successiva senza questo schema è un errore frequente, e il messaggio può sembrare criptico finché non conosci la regola.
Torna al convertitoreAnteprima renderizzata, non solo sorgente
La scheda Anteprima carica l’HTML compilato in un iframe isolato. Titoli, elenchi e link compaiono come li disegnerà il browser — utile quando l’indentazione da sola non dice se una sezione è nel posto giusto.
Affiancato mentre correggi la sintassi
Pug a sinistra, HTML a destra. Rinomini un attributo, manca un punto su una classe: il cambiamento è immediato prima di copiare o scaricare.
Nessuna installazione per una consegna veloce
Ti serve solo markup per un ticket o un blocco landing una tantum? Salti `npm install pug` e uno script locale. Importa, converti, copia, avanti.
Convertire Pug in HTML e controllare la pagina, non solo i tag
Modifica affiancata, anteprima renderizzata dell’HTML compilato, markup grezzo per la copia ed export — senza caricare la sorgente su un server.
Conversione visiva su cui contare prima dell’incolla
Il layout è volutamente lineare: Pug da un lato, output dall’altro. Mentre digiti, il pannello HTML si aggiorna. Passa ad Anteprima per vedere il documento come pagina — barre di navigazione, griglie di card, colonne del footer — invece di dedurre la struttura dalla sintassi indentata. Quel passaggio visivo intercetta i bug che sfuggono sfogliando solo le parentesi: wrapper mancante, classe sull’elemento sbagliato, testo accanto al link invece che dentro. L’HTML grezzo resta a un clic quando devi ispezionare attributi, copiare un frammento per un blocco CMS o confrontare con un file esistente. Non sei bloccato solo su anteprima o solo su sorgente — il flusso rispecchia come si revisionano davvero i modelli.
Come convertire Pug in HTML su questa pagina
Aggiungi la sorgente Pug
Incolla nel pannello sinistro o importa un file `.pug` o `.jade`. L’indentazione definisce l’annidamento — non mescolare tab e spazi nello stesso file. Per variabili o array in JavaScript non bufferizzato (`-`), metti il codice multilinea sotto una riga `-` da sola con lo script rientrato sotto.
Leggi l’HTML e apri l’anteprima
A destra parte l’anteprima renderizzata della pagina compilata. Passa su HTML per vedere i tag letterali. Se il pannello di input segnala un errore, correggi prima quella riga — anteprima ed export restano bloccati finché il modello non viene analizzato.
Copia, scarica o continua nel playground
Usa Copia quando la destinazione è un altro strumento o un blocco HTML del CMS. Scarica salva un file `.html`. Anteprima / modifica visiva HTML invia l’output corrente al playground della home per modifiche visive oltre il solo Pug.
Da Pug a HTML: domande che capitano davvero
Pronto a trasformare Pug in HTML che hai davvero guardato?
Modifica affiancata, anteprima renderizzata, copia e download — gratis, senza account.
da Pug a HTML
- Conversione visiva con Pug e HTML affiancati
- Anteprima HTML renderizzata prima dell’export
- Copia, download o apertura nel playground
- Esecuzione locale nel browser dopo il caricamento
Solo modelli autonomi — niente `include` o `extends` da disco.
