💻 Editor HTML Studio

Edita código a la izquierda o visualmente a la derecha.

Código Fuente (Editable) HTML5
Vista Previa (Visual) Listo

¿Cómo funciona este Editor HTML?

Esta herramienta es un entorno de desarrollo "WYSIWYG" (Lo que ves es lo que obtienes). Puedes escribir etiquetas HTML a la izquierda y ver el resultado instantáneamente a la derecha. Además, el panel derecho es editable: puedes hacer clic en el texto de la vista previa, escribir, y el código se actualizará solo.

¿Qué es el Editor HTML en Vivo y por qué deberías usarlo?

El Editor HTML en Vivo es una herramienta técnica diseñada para desarrolladores, diseñadores web y estudiantes que necesitan agilidad al escribir código. A diferencia de los editores de texto tradicionales, esta utilidad permite visualizar de forma inmediata cómo se renderiza el código en el navegador, eliminando la necesidad de guardar archivos y recargar páginas constantemente.

Ventajas de utilizar un editor de código con vista previa real

Trabajar en un entorno de desarrollo en tiempo real ofrece múltiples beneficios para la productividad y el aprendizaje:

Cómo aprovechar al máximo esta herramienta

Para obtener los mejores resultados con nuestro editor, te recomendamos seguir estos pasos:

  1. Escribe o pega tu estructura HTML en el panel de edición.
  2. Añade estilos CSS dentro de etiquetas <style> para dar forma a tu diseño.
  3. Observa cómo la ventana de vista previa se actualiza automáticamente con cada pulsación de tecla.
  4. Copia el código final una vez que el diseño sea exactamente lo que buscas.

Ya sea que estés creando una firma de correo electrónico, probando un nuevo componente de Bootstrap o practicando tus habilidades de frontend, nuestro editor te proporciona la flexibilidad que necesitas.

Equipo Editorial | Utilidades.io

Equipo Editorial | Utilidades.io

Desarrollamos herramientas prácticas y gratuitas para el día a día.

`; // --- LÓGICA DE SINCRONIZACIÓN --- function updateVisualFromCode() { const doc = visualEditor.contentDocument || visualEditor.contentWindow.document; doc.open(); doc.write(codeEditor.value); doc.close(); doc.designMode = "on"; // Habilita edición visual attachVisualEvents(doc); } function updateCodeFromVisual() { const doc = visualEditor.contentDocument || visualEditor.contentWindow.document; codeEditor.value = doc.documentElement.outerHTML; } function attachVisualEvents(doc) { ['input', 'keyup', 'paste', 'cut', 'mouseup'].forEach(evt => { doc.addEventListener(evt, () => { isSyncingCode = true; updateCodeFromVisual(); statusMsg.innerText = "Sincronizando..."; setTimeout(() => statusMsg.innerText = "Listo", 500); isSyncingCode = false; }); }); } // --- EVENTOS --- codeEditor.addEventListener('input', () => { if (!isSyncingCode) { updateVisualFromCode(); statusMsg.innerText = "Renderizando..."; setTimeout(() => statusMsg.innerText = "Listo", 500); } }); btnClean.addEventListener('click', () => { if (confirm("¿Borrar todo el código?")) { codeEditor.value = ""; updateVisualFromCode(); } }); btnDownload.addEventListener('click', () => { let filename = prompt("Nombre del archivo:", "index"); if (!filename) return; if (!filename.toLowerCase().endsWith('.html')) filename += '.html'; const blob = new Blob([codeEditor.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); btnCopy.addEventListener('click', () => { navigator.clipboard.writeText(codeEditor.value).then(() => { const originalText = btnCopy.innerHTML; btnCopy.innerHTML = "✅ ¡Copiado!"; setTimeout(() => btnCopy.innerHTML = originalText, 2000); }); }); // Inicio codeEditor.value = initialContent; updateVisualFromCode();