Entrada HTML

Salida Pug

¿Que es un conversor HTML a Pug?

Un conversor HTML a Pug transforma el marcado HTML estandar en sintaxis de plantilla Pug. Pug reemplaza el HTML verboso con una sintaxis limpia basada en espacios en blanco: etiquetas sin corchetes angulares, clases con punto, IDs con almohadilla.

Por ejemplo, <div class="hero"><p>Hola</p></div> se convierte en div.hero p Hola. Pug se usa ampliamente con Express.js y otros frameworks Node.js.

Como convertir HTML a Pug

Sigue estos tres pasos para transformar HTML en sintaxis Pug.

Pega o sube HTML

Pega tu HTML en el panel izquierdo o haz clic en Subir.

Ver la salida Pug

El panel derecho muestra la plantilla Pug convertida con notacion .clase, #id y sangria correcta.

Copiar o descargar

Haz clic en Copiar o Descargar para guardar como archivo .pug.

Cuando usar este conversor

Migrar proyectos Express.js

Convierte plantillas HTML existentes para usar con Pug como motor de vistas en Express.

Limpiar HTML verboso

La sintaxis Pug elimina todas las etiquetas de cierre, reduciendo el archivo en un 30-50%.

Aprender la sintaxis Pug

Convierte HTML que ya conoces y ve inmediatamente el equivalente Pug.

Generacion de plantillas prototipo

Convierte salidas HTML de herramientas de diseno a plantillas Pug para Node.js.

Preguntas frecuentes

¿Que es la sintaxis Pug?

Pug usa sangria en lugar de etiquetas de cierre. Las clases van con punto: div.miClase. Los IDs con almohadilla: div#miId. Los atributos entre parentesis: a(href="/").

¿Maneja elementos anidados?

Si. El conversor recorre el DOM y coloca cada elemento en el nivel de sangria correcto.

¿Como se manejan los atributos?

Todos los atributos excepto clase e id van entre parentesis: input(type="text").

¿Se preserva el contenido de texto?

Si. El texto se coloca como contenido en linea cuando no hay elementos hijos.

¿Se almacenan mis datos?

No. Todo ocurre en tu navegador.

Herramientas relacionadas

Mas herramientas para trabajar con HTML:

Conversor HTML a Pug