Pug a HTML cuando necesitas ver la plantilla antes de pegarla
Pug (y la sintaxis Jade más antigua) cambia los corchetes angulares por indentación. Es agradable — hasta que miras veinte líneas de etiquetas anidadas e intentas recordar si `nav.main-nav` cerró bien tres niveles arriba. Lo habitual es la CLI `pug` en una máquina con Node. Esta página hace el paso de compilación en la pestaña que ya tienes abierta. Pega un fragmento, sube un archivo `.pug` o `.jade` y lee el HTML a la derecha mientras editas. La compilación corre en local tras cargar la página — nada se envía a un servidor para transformar. Lo que separa este banco de un convertidor «pega y reza» es la vista previa: pasas del marcado en bruto a la vista renderizada de la página compilada y detectas errores de maquetación antes de que el HTML llegue a un CMS, una herramienta de email o el repositorio de un compañero.
La conversión visual gana a leer la indentación en la cabeza
La mayoría de utilidades Pug a HTML dan una caja de texto y un enlace de descarga. Para un fragmento de cinco líneas basta. Se desmorona cuando revisas marcado de navegación, una cuadrícula de tarjetas o un pie con texto y enlaces mezclados. Aquí origen y resultado se ven a la vez. Cambias una indentación, el panel HTML reacciona, pasas a Vista previa cuando importan espaciado y jerarquía — no solo si existe un `</div>` en algún sitio. La barra de estado bajo el editor dice si la plantilla analiza. Si no, ves el mensaje del compilador en la línea que falló — no un panel vacío y silencioso. HTML en vivo más render en sandbox: esa es la diferencia práctica. No exportas marcado a ciegas para abrirlo en otra app y ver si la página se ve bien.
Conviene decir dos límites al inicio para no perder tiempo. Esta herramienta compila el Pug que pegas o importas en el navegador. No lee una carpeta de proyecto — `include`, `extends` y partials externos quedan fuera. Mixins, condicionales, bucles y bloques `style.` / `script.` en el mismo archivo se comportan como en una compilación local normal. Si escribes JavaScript multilínea al inicio de la plantilla — por ejemplo un array de ítems de menú — usa una línea `-` sola y el bloque JavaScript indentado debajo. Pug trata como código solo la primera línea tras `-`; seguir un array en el siguiente nivel de indentación sin ese patrón es una trampa de sintaxis frecuente, y el mensaje de error puede parecer críptico hasta que conoces la regla.
Volver al convertidorVista previa renderizada, no solo el origen
La pestaña Vista previa carga el HTML compilado en un iframe aislado. Títulos, listas y enlaces aparecen como los dibujará el navegador — útil cuando la indentación sola no dice si una sección quedó en el sitio correcto.
Lado a lado mientras corriges la sintaxis
Pug a la izquierda, HTML a la derecha. Cambios pequeños — renombrar un atributo, un punto faltante en una clase — se ven al momento antes de copiar o descargar.
Sin instalación para una entrega rápida
¿Solo necesitas marcado para un ticket o un bloque de landing puntual? Te saltas `npm install pug` y un script local. Importa, convierte, copia, sigue.
Convierte Pug a HTML y verifica la página, no solo las etiquetas
Edición lado a lado, vista previa renderizada del HTML compilado, marcado en bruto para copiar y exportar — sin subir el origen a un servidor.
Conversión visual en la que puedes confiar antes de pegar
El diseño es deliberadamente simple: entrada Pug a un lado, salida al otro. Al escribir, el panel HTML se actualiza. Cambia a Vista previa cuando quieras ver el documento como página — barras de navegación, cuadrículas de tarjetas, columnas de pie — en lugar de inferir la estructura desde la sintaxis indentada. Ese paso visual atrapa bugs que pasan si solo hojeas corchetes angulares: un envoltorio faltante, una clase en el elemento equivocado, texto que debería ir dentro de un enlace pero queda como hermano. El HTML en bruto queda a un clic cuando necesitas inspeccionar atributos, copiar un fragmento para un bloque CMS o comparar con un archivo existente. No quedas atrapado solo en vista previa o solo en origen — el flujo coincide con cómo la gente revisa plantillas de verdad.
Cómo convertir Pug a HTML en esta página
Añade el origen Pug
Pega en el panel izquierdo o usa Subir para un archivo `.pug` o `.jade`. La indentación define el anidamiento — no mezcles tabulaciones y espacios en el mismo archivo. Si declaras variables o arrays en JavaScript sin buffer (`-`), pon el código multilínea bajo una línea `-` sola con el script indentado debajo.
Lee el HTML y abre Vista previa
El panel derecho muestra por defecto la vista previa renderizada de la página compilada. Cambia a HTML cuando necesites las etiquetas literales. Si el panel de entrada muestra error, corrige esa línea primero — vista previa y exportación quedan bloqueadas hasta que la plantilla analice.
Copia, descarga o continúa en el playground
Usa Copiar cuando el destino sea otra herramienta o un bloque HTML de CMS. Descargar guarda un archivo `.html`. Vista previa / editar HTML visualmente envía la salida actual al playground de la página principal cuando quieres edición visual más allá de lo que Pug solo permite.
Pug a HTML: preguntas que surgen de verdad
¿Listo para pasar Pug a HTML que de verdad has visto?
Edición lado a lado, vista previa renderizada, copiar y descargar — gratis, sin cuenta.
Pug a HTML
- Conversión visual con Pug y HTML lado a lado
- Vista previa renderizada del HTML compilado antes de exportar
- Copiar, descargar o abrir en el playground
- Ejecución local en el navegador tras cargar
Solo plantillas autónomas — sin `include` ni `extends` desde disco.
