Editor HTML WYSIWYG

Comprobado en octubre de 2026 · por el equipo de Mobirise, que gestiona mobirize.com

Cómo editas

Sueltas bloques en la página, reescribes el texto directamente y haces clic en una imagen para cambiarla. Cada bloque tiene su propio panel de parámetros: espaciado, fondo, partes visibles y número de columnas.

Qué genera

HTML, CSS y algo de JavaScript, todo basado en Bootstrap 5. Los bloques se apoyan en la cuadrícula de Bootstrap, que se reajusta sola en pantallas estrechas y anchas.

Precio

Gratis para sitios personales o de empresa, con un tema básico y unos 200 bloques. Las suscripciones empiezan en 149 USD al año.

Sistemas

Windows 7 o superior, macOS 10.13 o superior con un instalador para Apple Silicon y otro para Intel, y Linux de la familia Debian como Ubuntu. También existe una edición del constructor en el navegador.

Acceso al código

Te quedas con los archivos terminados sea cual sea tu plan. Reescribir a mano el HTML de un bloque requiere la extensión Code Editor, un complemento de pago.

Límite principal

Solo se pueden abrir proyectos de Mobirise. Una página o plantilla creada con otra herramienta no se puede cargar para seguir editándola visualmente.

La expresión abarca herramientas pensadas para personas muy distintas. Saber qué familia necesitas ahorra gran parte de la búsqueda.

Una lista honesta según la situación. Nosotros hacemos Mobirise, así que lee nuestra propia línea con eso en mente.

Un sitio completo, sin código, gratis

Mobirise: hecho de bloques, se instala en Windows, Mac y Linux, y su plan gratuito exporta archivos de Bootstrap 5.

Trabajar sobre HTML existente

Pinegrow: acepta cualquier proyecto existente y permite editar de forma visual o en código; pensado para quien domina HTML y CSS.

Trabajo con Bootstrap por un pago único

Bootstrap Studio: pago único, desde 29 USD, importa páginas terminadas y funciona sin conexión una vez activado.

Colocación libre de objetos en Windows

WYSIWYG Web Builder: un lienzo de posición libre, de compra única, con 30 días de prueba.

Un constructor de bloques nativo para Mac

Blocs: gratis para probar; exportar y publicar requieren una licencia de pago único.

Escribir código con un panel renderizado

Adobe Dreamweaver: un editor de código profesional que se vende con Creative Cloud.

Un cuadro de formato dentro de tu propia aplicación

Una de las bibliotecas integrables como TinyMCE o TipTap; ninguna de las herramientas de escritorio de aquí sirve para eso.

Siete herramientas en una sola tabla, conservando las filas que favorecen a la competencia.

Datos tomados del 13 al 16 de octubre de 2026 de las páginas de precios y la documentación de cada vendedor, en dólares sin impuestos salvo indicación contraria. Las ofertas cambian a menudo, así que verifica en la página del vendedor antes de comprar.

Quien busca un editor HTML en tiempo real quiere una de dos cosas: cambiar la página y verlo al instante, o escribir código y ver cómo se actualiza una vista previa. Son herramientas distintas.

Si añades la extensión de pago Code Editor, Mobirise cubre ambos estilos: abre el HTML y el CSS de un bloque o de una página, modifícalos y mira cómo se actualiza el lienzo.

Cualquier generador de código HTML convierte clics, o una sola frase escrita, en marcado, y su valor depende del resultado. El fragmento de abajo muestra el tipo de estructura de Bootstrap 5 que emite un constructor de bloques para una sección sencilla de dos columnas. Es un marcado genérico que ilustra el patrón, no un archivo de un tema de Mobirise.

<section class="features">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6">
        <h2>Fresh bread every morning</h2>
        <p>Baked on site from 6 am, six days a week.</p>
        <a class="btn btn-primary" href="menu.html">See the menu</a>
      </div>
      <div class="col-12 col-lg-6">
        <img src="../assets/images/bakery.webp" alt="Loaves cooling on a rack"
             class="img-fluid" loading="lazy">
      </div>
    </div>
  </div>
</section>

En los teléfonos, las clases de la cuadrícula apilan las columnas, y a partir del punto de corte grande se colocan una junto a otra. Tú eliges el nivel del título en el editor, las imágenes se convierten solas a WebP y el texto alternativo se rellena a partir de los ajustes de la imagen.