Editor HTML WYSIWYG
Un editor HTML WYSIWYG te permite dar forma a una página web viendo cómo queda mientras el programa escribe el marcado. Descubre dónde la vista previa puede engañarte y cómo se compara Mobirise, nuestro editor gratuito basado en bloques, con otras cinco herramientas.
Gratis para sitios personales y comerciales.
por la aplicación y su exportación a HTML
La aplicación de escritorio de Mobirise exporta tu sitio como archivos estáticos en todos los planes. Abrir el código dentro del editor requiere un plan de pago.
El editor HTML WYSIWYG de un vistazo
Datos de los editores reunidos por el equipo de Mobirise en octubre de 2026.
WYSIWYG son las siglas de “what you see is what you get” (lo que ves es lo que obtienes). En un editor de este tipo trabajas sobre la página tal como se ve, no sobre su código fuente: haces clic en un título y escribes, añades una imagen o cambias un color, y el programa escribe el HTML y el CSS que hay detrás de cada acción. Así es posible diseñar páginas web en HTML sin escribir etiquetas, aunque la pantalla muestra una vista previa cercana, no una garantía.
Editores clásicos con vista de diseño, constructores por bloques, diseñadores visuales de CSS y editores de código con vista previa en vivo.
El editor visual y su exportación a HTML no cuestan nada en Windows, Mac ni Linux, y te dan más de 200 bloques para empezar. En el plan gratuito, las páginas publicadas incluyen la marca de Mobirise.
Páginas .html normales con estilos de Bootstrap 5 y sus scripts al lado. Cualquier hosting que sirva archivos simples puede entregarlas; no se ejecuta código en el servidor.
Para leer o cambiar el marcado, necesitas la extensión Code Editor, que viene con los planes KIT, BASE y GROW y funciona por bloque o por página.
Mobirise no puede cargar un sitio ni una plantilla creados con otra herramienta. Pinegrow, Dreamweaver, Bootstrap Studio y CoffeeCup sí pueden.
Los bloques se adaptan a teléfono, tableta y escritorio, y puedes previsualizar cada ancho. No hay un diseño aparte para teléfono.
Qué editor HTML visual encaja con tu trabajo
No hay un mejor editor HTML WYSIWYG para todo, así que elige según el trabajo que necesitas hacer. En varios de estos casos un rival es la mejor respuesta, y su tarjeta lo dice.
Mobirise
Ves el aspecto final mientras arrastras bloques a su sitio, reescribes su texto y ajustas los parámetros de cada bloque; después la aplicación gratuita genera un sitio estático con Bootstrap 5. El inconveniente: no carga HTML ajeno, y ver el código cuesta un plan.
Pinegrow Web Editor
Carga cualquier archivo .html existente y muestra una vista visual en vivo junto a su marcado; también admite Tailwind CSS. El inconveniente: 18 USD al mes, 149 USD al año o 199 USD en un pago único.
Bootstrap Studio
Componentes de Bootstrap que arrastras y sueltas, un editor de código integrado y proyectos sin conexión, por 29 USD o 59 USD en un pago único. El inconveniente: te quedas dentro del modelo de componentes de Bootstrap.
Adobe Dreamweaver
Live View te permite hacer clic en la página renderizada y cambiar sus textos, imágenes y clases, con el código fuente al mando. El inconveniente: una suscripción, de 22.99 USD al mes en el plan de una sola aplicación, y no hay versión para Linux.
CoffeeCup HTML Editor
Una vista previa dividida redibuja la página mientras escribes; hay una edición gratuita, y la versión completa cuesta 29 USD en un pago único. El inconveniente: solo para Windows, y escribes cada etiqueta.
Webflow
Un diseñador visual basado en CSS, con cada punto de corte ajustado a mano; exportar el código requiere un plan de pago. El inconveniente: los paneles reflejan el CSS, así que favorece a quien ya lo conoce.
8B AI
Escribes una frase y obtienes el diseño completo de un sitio; el nivel gratuito te deja ver el HTML y el CSS reales que hay detrás. El inconveniente: vive en el navegador, y publicar, la exportación completa y las ediciones por chat requieren el plan Pro (9 USD al mes, con facturación anual).
Elementor
Un plugin para crear páginas en sitios con WordPress. El inconveniente: no obtienes una carpeta independiente de HTML, porque las páginas necesitan WordPress funcionando en tu servidor.
Una advertencia: Mobirise es nuestro, así que lee esta lista como la de una parte interesada. Los datos de cada rival salieron de las páginas de producto y de precios de su fabricante, y donde un rival hace mejor un trabajo, lo decimos.
Seis herramientas visuales para HTML, lado a lado
Filas elegidas para quien se preocupa por el HTML en sí: qué editas en pantalla, qué tan abierto es el código y si se cargan archivos de fuera.
| Característica | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| Qué editas en pantalla | La propia página: bloques que arrastras, texto escrito en su sitio, ajustes por bloque | La página renderizada junto a sus archivos fuente | Sobre todo código; Live View permite editar en la página renderizada | Un diseño generado, retocado con el chat con IA en Pro | Componentes de Bootstrap colocados en un lienzo, con un panel de código | Código, con vista previa en vivo en pantalla dividida |
| Escribir tu propio código | Con la extensión Code Editor (KIT, BASE, GROW), por bloque o por página | Sí, con sincronización en ambos sentidos con VS Code | Sí, es el modo principal, con sugerencias de código | No figura la edición manual; el nivel gratuito muestra el HTML y el CSS reales | Sí: HTML, SASS, JavaScript y JSON en un editor inspirado en VS Code | Sí; completa el código y revisa tu marcado |
| Carga un sitio .html existente | No, solo proyectos iniciados en Mobirise | Sí, cualquier sitio existente | Sí, también páginas de Bootstrap existentes | El fabricante no lo indica | Sí, soltando en un proyecto páginas, hojas de estilo, scripts e imágenes existentes | Sí, archivos locales o páginas abiertas directamente en un servidor |
| Framework del HTML exportado | Bootstrap 5 | Tailwind CSS, Bootstrap o ninguno | Cualquiera; incluye Bootstrap 5.3.8, 4.4.1 y 3.4.1 | Marcado propio y personalizado; sin Bootstrap | Bootstrap 5, 4 o 3 | Tu propio marcado; plantillas adaptables gratuitas para empezar |
| Funciona en | Windows, macOS (versión para Apple Silicon o Intel), Linux basado en Debian, un navegador, Android | Windows, macOS, Linux; también una edición para navegador | Windows y macOS | Solo en el navegador | Windows, macOS, Linux | Solo Windows |
| Precio y facturación | 0 USD por el editor y su exportación a HTML. Planes anuales: KIT, por 149 USD, desbloquea Code Editor y los temas premium; BASE (199 USD) y GROW (249 USD) añaden además sitios alojados e IA | 18 USD al mes, 149 USD al año o 199 USD en un pago único; prueba gratuita | Plan de una sola aplicación por 22.99 USD al mes, con compromiso anual y pago mensual; prueba gratuita | Diseñar es gratis; Pro, necesario para publicar, cuesta 9 USD al mes con facturación anual | Pago único: 29 USD (Standard) o 59 USD (Lifetime) | Edición gratuita, o una licencia perpetua de 29 USD que incluye un año de actualizaciones |
Cuándo “lo que ves” deja de ser cierto
El editor dibuja la página una sola vez, en tu pantalla. Cada visitante llega con otro navegador, otro dispositivo y otras fuentes.
En la mayoría de los editores visuales actuales, el lienzo es una página web real dibujada por un motor de navegador, así que gran parte de lo que ves es auténtico: las mismas etiquetas, los mismos estilos. Las diferencias aparecen donde la configuración del visitante no coincide con la tuya. Tres de ellas afectan a casi todo el mundo.
Fuentes
Un visitante ve tu fuente solo si la página la carga desde la web o la incluye con el sitio. Si no, su dispositivo la sustituye por otra tipografía y los títulos cambian de línea. Comprueba que el tema aporta sus propias fuentes.
Tamaños de pantalla
El lienzo muestra un ancho cada vez. Un titular que cabe en un equipo portátil puede partirse en varias líneas en un teléfono, y una fila de columnas puede apilarse. Recorre la vista previa por cada ancho antes de publicar.
Scripts
Los carruseles, menús, formularios, mapas y videos incrustados suelen comportarse de otro modo dentro de un editor, o están en pausa a propósito. Trátalos ahí como marcadores de posición, prueba la página exportada en navegadores reales y envía un formulario de prueba desde el hosting real.
Cuatro familias de editores HTML WYSIWYG
Todos muestran la página mientras trabajas. Se distinguen por lo que tocas: la página, bloques ya hechos, propiedades de CSS o el código.
Vista de diseño clásica
Un lienzo parecido a un documento sobre el HTML, normalmente junto al código; Live View de Dreamweaver es su forma actual. Sirve a quien mantiene sitios escritos a mano y quiere corregir texto sin buscar entre etiquetas.
Constructores por bloques
Las páginas se arman con secciones o componentes ya hechos, como en Mobirise o Bootstrap Studio, mientras el programa escribe el marcado. Muchos llaman a este tipo constructor de páginas HTML. Es lo adecuado para quien quiere un sitio sin código; muchos constructores de páginas web fáciles para principiantes funcionan también así.
Diseñadores visuales de CSS
Webflow, o Pinegrow sobre tus propios archivos: das estilo a los elementos en paneles que se corresponden con propiedades de CSS. Sirve a diseñadores que ya piensan en cajas, clases y puntos de corte.
Editores de código con vista previa en vivo
CoffeeCup HTML Editor y otros similares, que a menudo aparecen como editores HTML WYSIWYG con vista previa: escribes el HTML y un panel al lado redibuja la página. Sirven a quien aprende HTML y a desarrolladores que escriben cada etiqueta pero quieren ver su efecto al instante.
¿Creas tu propia aplicación y no un sitio web? Entonces lo que necesitas es un componente: un cuadro de texto enriquecido que incrustas en un formulario, un CMS o un servicio de atención al cliente para que tus usuarios den formato al texto. TinyMCE y CKEditor 5 son los veteranos con más funciones, con planes en la nube de pago y complementos; Quill es un editor HTML WYSIWYG de código abierto más ligero; TipTap es un kit sin interfaz propia (headless) basado en ProseMirror, así que diseñas tú mismo su barra de herramientas. Generan fragmentos de HTML dentro de tu producto, no páginas completas, y por eso quedan fuera de la tabla de arriba.
Qué ajustas de forma visual en Mobirise y qué requiere código
Casi toda la página se hace señalando y haciendo clic. La extensión Code Editor cubre lo que los paneles no alcanzan.
Bloques
Cada página del editor es una columna de secciones ya hechas. Añade una nueva desde el panel lateral y elimina las que no necesites.
Texto y etiquetas de encabezado
Escribe directamente sobre la página. Cada título admite la etiqueta H que elijas, así que el esquema de la página lo defines tú.
Fotos
Haz clic en cualquier foto para cambiarla por la tuya. Reduce el tamaño de los archivos grandes antes de añadirlos; los consejos de más abajo explican por qué.
Parámetros de los bloques
El panel de parámetros de cada bloque define su espaciado, su fondo, las partes visibles (como el título o los botones) y el número de columnas.
Fuentes y colores
En Style Editor eliges las tipografías y la paleta de colores que usan los bloques.
Código, cuando lo necesites
Un atributo adicional, una regla de CSS personalizada o un marcado reelaborado pasan por la extensión Code Editor, incluida en KIT, BASE y GROW.
Un límite que conviene conocer: el HTML que maquetas es el HTML que recibe cada dispositivo. Mobirise no ofrece un diseño solo para teléfono, y no se puede ocultar ningún elemento en un único tamaño de pantalla.
Los archivos que obtienes al exportar
Exportar desde la aplicación de escritorio no cuesta nada en ningún plan. ¿Construyes en el navegador? Allí, descargar el código requiere BASE o GROW.
Páginas e imágenes
Un archivo HTML por página, con títulos, párrafos y enlaces normales, además de tus fotos y los gráficos del tema dentro de la carpeta exportada.
Estilos y scripts
El CSS y el JavaScript de Bootstrap 5, los estilos propios del tema, las opciones que elegiste en los paneles y los scripts de los menús y carruseles.
Nada en el servidor
Sin PHP, sin base de datos y sin panel de administración, así que el sitio funciona en cualquier hosting normal o en GitHub Pages.
La exportación funciona en un solo sentido. Mobirise construye a partir de su propio proyecto, no de HTML, así que las ediciones que hagas a los archivos exportados en otro editor quedan fuera de él. Haz los cambios de código en Code Editor, o deja las ediciones manuales como último paso.
Cómo mantener limpio y rápido el HTML hecho con un editor visual
Las herramientas visuales añaden algo de peso por diseño. Estos hábitos lo reducen, en Mobirise o en cualquier otro editor.
Esquematiza con encabezados, no con tamaños
Da a cada página un único H1, anida H2 y H3 debajo y elige cada etiqueta según su rango en el esquema. Lo grande que se vea es cosa de los estilos.
Reduce las fotos primero
Cambia cada imagen al ancho máximo al que se mostrará y guárdala como WebP o como JPEG bien comprimido. Una foto original de cámara puede pesar más que el resto de la página.
Aplica los estilos en un solo lugar
Dar estilo a los botones uno por uno deja un rastro de reglas sueltas. Define las fuentes y los colores de forma centralizada, en Style Editor o en el equivalente de tu herramienta, y el CSS se mantiene corto.
Prueba fuera del editor
Abre la página exportada en más de un navegador, pasa el validador del W3C y una prueba de velocidad como PageSpeed Insights, y corrige lo que señalen antes del lanzamiento.
¿Un tema de Mobirise o plantillas HTML gratuitas?
Ambos te dan un aspecto terminado desde el primer día. La diferencia está en quién escribe el marcado y qué editores pueden cargarlo después.
Una plantilla descargada
Una carpeta de archivos que escribió otra persona. Edítala en un editor de código o en una herramienta visual que abra HTML ajeno, como Pinegrow, Dreamweaver, Bootstrap Studio o CoffeeCup. Lee la licencia: algunas plantillas gratuitas exigen un enlace de crédito.
Un tema de Mobirise
Una biblioteca de bloques que vive dentro de la aplicación, no una carpeta de archivos. Compones las páginas con ella de forma visual y la exportación genera el HTML. Los usuarios gratuitos tienen más de 200 bloques en un único tema básico; KIT desbloquea todos los temas y extensiones premium, más de 220 en total.
Trasladar el aspecto de una plantilla
Mobirise no puede abrir una plantilla hecha en otro sitio, ni siquiera una creada con Bootstrap 5. Reconstruye el aspecto con bloques, o usa una captura de pantalla como prompt de Mobirise AI y edita los cuatro borradores que devuelve, si la licencia de la plantilla lo permite.
Para quién sirve Mobirise como editor visual
Mobirise es adecuado para algunos trabajos y no para otros. Así puedes saber de qué lado cae el tuyo.
Buena opción si
- Quieres maquetar páginas de forma visual y no escribir nunca una etiqueta
- Necesitas archivos simples para tu propio hosting sin pagar un plan
- Creas sitios para clientes con bloques coherentes y adaptables
- Trabajas sin conexión en un equipo portátil y publicas más tarde
- Quieres primero un borrador con IA y después retoques a mano en el mismo editor
Otra herramienta encaja mejor si
- Tu trabajo es arreglar un sitio antiguo escrito a mano o una plantilla descargada: Dreamweaver, Pinegrow o CoffeeCup HTML Editor
- Tu proyecto pide Tailwind o ningún framework: Pinegrow
- Quieres control al píxel y estilos por punto de corte: Webflow
- Prefieres pagar una sola vez por trabajar con Bootstrap: Bootstrap Studio
- Quieres escribir y previsualizar código gratis: la edición gratuita de CoffeeCup
- El sitio ya funciona con WordPress: Elementor
Preguntas sobre la edición visual de HTML
¿Qué es un editor HTML WYSIWYG?
Un editor en el que cambias una página web tal como aparece en pantalla mientras el programa escribe el HTML y el CSS. La sigla promete que la página que editas es la que publicas. En la práctica ambas se parecen mucho, pero no son idénticas, porque las fuentes, el ancho de pantalla y los scripts dependen del navegador de cada visitante.
¿Es Mobirise un editor HTML de arrastrar y soltar?
Sí, al nivel de los bloques: arrastras secciones ya hechas desde un panel lateral hasta la página y luego escribes en ellas. No sueltas elementos sueltos en lugares arbitrarios; el diseño sale de los bloques y de sus parámetros. Más sobre esta forma de trabajar: constructores de sitios web gratuitos de arrastrar y soltar.
¿Puedo editar el código HTML en Mobirise?
Puedes, una vez que tengas la extensión Code Editor, que viene con KIT (149 USD al año), BASE y GROW. Muestra el marcado y el CSS de un solo bloque o de toda la página. Los archivos exportados en el plan gratuito también se abren en cualquier editor de texto, pero las ediciones hechas allí nunca vuelven al proyecto.
¿Puede Mobirise abrir una plantilla HTML que descargué?
No. Una plantilla de un marketplace o un sitio escrito a mano es HTML simple, y Mobirise solo trabaja con proyectos creados dentro de él. Dreamweaver, Pinegrow, Bootstrap Studio y CoffeeCup HTML Editor cargan HTML existente; en Mobirise tendrías que recrear el aspecto con bloques.
¿Existe un editor HTML WYSIWYG gratuito?
Sí. La aplicación de escritorio de Mobirise no cuesta nada para sitios personales o de empresa, y su exportación tampoco, aunque los sitios gratuitos muestran la marca de Mobirise. CoffeeCup tiene una edición gratuita de su HTML Editor si prefieres escribir código. 8B AI genera diseños sin coste, aunque publicarlos es de pago. Comparamos más opciones sin coste en nuestra lista de software gratuito para crear sitios web.
¿El HTML de un editor visual es peor que el escrito a mano?
Normalmente es más pesado, porque las herramientas visuales añaden contenedores y clases que las páginas escritas a mano evitan. El resultado basado en un framework como Bootstrap 5 sigue siendo legible y predecible; para ver el lado del framework, consulta el constructor de sitios web con Bootstrap. Para el marcado más pequeño posible, escríbelo tú en un editor de código.
¿Hay un editor HTML WYSIWYG sin conexión para Mac, Windows o Linux?
Sí. La aplicación de escritorio de Mobirise tiene versiones para Windows, para macOS (Apple Silicon e Intel) y para Ubuntu y otros sistemas Linux basados en Debian, y editar no requiere conexión. Bootstrap Studio, que guarda los proyectos sin conexión, y Pinegrow también funcionan en los tres sistemas, mientras que Dreamweaver no tiene versión para Linux y CoffeeCup HTML Editor solo funciona en Windows. Los usuarios de Mac encontrarán más opciones en nuestra guía del constructor de páginas web para Mac.
¿Funciona Mobirise sin conexión?
En la aplicación de escritorio, sí: la edición visual, las vistas previas y cualquier tema o bloque que hayas instalado siguen funcionando sin red. Se necesita conexión para la IA, para publicar, para iniciar sesión, para las compras y para descargar actualizaciones o temas que aún no tienes. Más sobre esta división: software para crear sitios web sin conexión.
¿Hay un editor HTML WYSIWYG online para Android o iPhone?
Mobirise no tiene aplicación para dispositivos Apple, pero en iPhone y iPad su constructor en el navegador funciona online en Safari o en cualquier otro navegador de dispositivos móviles. En Android, la aplicación Mobirise AI, que se instala desde Google Play, genera diseños, traduce, publica y exporta HTML. 8B AI también funciona en el navegador.
Crea tu primera página hoy
Empieza con IA en el navegador o descarga la aplicación gratuita. En ambos casos es el mismo Mobirise.