Definición:
WYSIWYG es el acrónimo de What You See Is What You Get, que significa lo que ves es lo que obtienes. Describe una forma de edición en la que el contenido se muestra durante su creación con una apariencia cercana al resultado final.
El término se aplica a procesadores de texto, editores de contenido, herramientas de diseño y constructores de páginas. En lugar de trabajar únicamente con instrucciones o código, la persona modifica directamente una representación visual del documento o de la interfaz.
La correspondencia no siempre es exacta. El resultado puede variar al imprimir, cambiar el tamaño de pantalla, utilizar otro navegador, cargar una fuente distinta o aplicar estilos y datos que el editor no reproduce completamente.
Índice de contenidos
Cómo funciona un editor WYSIWYG
Un editor WYSIWYG combina una superficie visual con un modelo interno del contenido. Cuando se introduce un título, una lista, una imagen o una tabla, la herramienta registra también la estructura y las propiedades necesarias para representarlo.
En un procesador de texto, ese modelo contiene páginas, estilos, márgenes y elementos del documento. En un CMS, puede convertirse en bloques, componentes o código HTML que después interpreta el navegador.
Estas cinco funciones son habituales en una interfaz WYSIWYG:
- Edición directa: permite escribir, seleccionar y reorganizar elementos en la propia vista del contenido.
- Controles de formato: aplica encabezados, énfasis, listas, enlaces, alineación y otros estilos sin introducir sus instrucciones manualmente.
- Inserción de elementos: incorpora imágenes, tablas, botones, formularios u otros componentes mediante controles visuales.
- Vista previa inmediata: muestra el efecto aproximado de cada cambio durante la edición.
- Representación estructurada: conserva datos, bloques o marcado que permiten guardar y volver a renderizar el contenido.
El editor puede ofrecer una vista de código además de la visual. Ambas vistas modifican el mismo contenido, pero exponen niveles distintos: una representa el resultado y la otra muestra parte de las instrucciones con las que se construye.
Usos y ejemplos de WYSIWYG
La idea se popularizó con las interfaces gráficas y los procesadores de texto que permitían ver en pantalla la disposición del documento. Sustituyó flujos en los que el texto y las instrucciones de formato se introducían primero y el resultado solo podía comprobarse después.
Actualmente aparece en distintos entornos:
- Procesadores de texto: Microsoft Word y Google Docs representan estilos, páginas, imágenes y tablas mientras se edita el documento.
- Gestores de contenidos: WordPress y Drupal incorporan editores visuales o por bloques para preparar contenido web.
- Editores de texto enriquecido: aplicaciones de correo, soporte o documentación permiten aplicar formato y enlaces sin escribir HTML.
- Constructores de páginas: organizan secciones y componentes sobre una vista aproximada de la página publicada.
- Herramientas de diseño: muestran la composición de piezas gráficas, presentaciones o interfaces durante su creación.
No todas estas herramientas ofrecen el mismo grado de correspondencia. Un documento destinado a un tamaño de página fijo puede aproximarse más al resultado impreso que una web adaptable, cuya presentación cambia según el dispositivo y el contexto.
WYSIWYG frente a código y WYSIWYM
WYSIWYG describe la relación entre la vista de edición y la salida, no un lenguaje ni un formato de archivo. Puede generar HTML, documentos de oficina, componentes u otras representaciones internas, según la aplicación.
Estas diferencias ayudan a distinguir tres enfoques:
- Edición WYSIWYG: la interfaz da prioridad a la apariencia aproximada del resultado.
- Edición de código o marcado: la persona trabaja directamente con instrucciones como HTML, CSS o Markdown y comprueba el resultado en una vista separada.
- WYSIWYM: What You See Is What You Mean da prioridad al significado estructural, como título, cita o referencia, mientras el sistema decide su presentación final.
- Edición híbrida: combina bloques visuales, campos estructurados, vista previa y acceso parcial o completo al código.
Un enfoque no es universalmente superior. La edición visual facilita la composición y la revisión inmediata; el código ofrece control explícito; y la edición estructurada favorece la reutilización del contenido en distintos canales. Muchas aplicaciones combinan los tres.
Ventajas y limitaciones
WYSIWYG reduce la distancia entre una modificación y su representación visual. Esto facilita tareas editoriales a personas que no necesitan conocer la sintaxis subyacente y permite detectar antes problemas de composición.
Sin embargo, ver una apariencia correcta en el editor no garantiza que el resultado publicado sea correcto. En una web pueden intervenir hojas de estilo, scripts, permisos, contenido dinámico, tamaños de pantalla y características del navegador que no estén presentes en la vista de edición.
El código generado también puede contener elementos innecesarios o una estructura semántica deficiente. Un texto que parece un encabezado por su tamaño no es necesariamente un encabezado en HTML, y una composición visual no asegura orden de lectura, navegación mediante teclado ni compatibilidad con tecnologías de asistencia. La accesibilidad web requiere comprobar la estructura y el comportamiento además de la apariencia.
Por ello, la revisión final debe realizarse en el formato y los contextos de salida pertinentes. WYSIWYG aproxima la experiencia de edición al resultado, pero no elimina la necesidad de validar el contenido renderizado, su estructura y sus variantes.