Editor HTML WYSIWYG

Verificado em outubro de 2026 · pela equipe do Mobirise, que mantém o mobirize.com

Como você edita

Solte blocos na página, reescreva o texto no próprio lugar e clique em uma imagem para trocá-la. Cada bloco tem seu painel de parâmetros: espaçamento, fundo, partes visíveis e número de colunas.

O que ele gera

HTML, CSS e um pouco de JavaScript, tudo baseado em Bootstrap 5. Os blocos seguem a grade do Bootstrap, que se reorganiza sozinha em telas estreitas e largas.

Preço

Grátis para sites pessoais ou comerciais, com um tema inicial e cerca de 200 blocos. As assinaturas começam em US$ 149 por ano.

Sistemas

Windows 7 ou superior, macOS 10.13 ou superior com um instalador para Apple Silicon e outro para Intel, e Linux da família Debian, como o Ubuntu. Também existe uma versão do construtor no navegador.

Acesso ao código

Os arquivos prontos ficam com você, qualquer que seja o plano. Reescrever à mão o HTML de um bloco exige a extensão Code Editor, um complemento pago.

Principal limite

Só é possível abrir projetos do Mobirise. Uma página ou um template criado em outra ferramenta não pode ser carregado para edição visual.

A expressão abrange ferramentas para públicos muito diferentes. Saber de qual família você precisa poupa a maior parte da busca.

Uma lista honesta por situação. Nós fazemos o Mobirise, então leia nossa própria linha com isso em mente.

Um site inteiro, sem código, grátis

Mobirise: feito de blocos, instala no Windows, Mac e Linux, e o plano gratuito exporta arquivos Bootstrap 5.

Trabalhar com HTML existente

Pinegrow: importa qualquer projeto existente e permite editar visualmente ou no código; voltado a quem tem fluência em HTML e CSS.

Trabalho com Bootstrap por pagamento único

Bootstrap Studio: pagamento único, a partir de US$ 29, importa páginas prontas e funciona offline depois de ativado.

Posicionamento livre de objetos no Windows

WYSIWYG Web Builder: uma tela de posição livre, comprada uma única vez, com 30 dias de teste.

Um construtor de blocos nativo para Mac

Blocs: grátis para experimentar; exportação e publicação vêm com uma licença única.

Escrever código com um painel renderizado

Adobe Dreamweaver: um editor de código profissional vendido pelo Creative Cloud.

Uma caixa de formatação dentro do seu próprio aplicativo

Uma das bibliotecas incorporáveis, como TinyMCE ou TipTap; nenhuma das ferramentas de desktop aqui faz esse trabalho.

Sete ferramentas em uma só grade, mantendo as linhas que favorecem os concorrentes.

Valores coletados de 13 a 16 de outubro de 2026 nas páginas de preços e na documentação de cada fornecedor, em dólares, sem impostos, salvo indicação em contrário. As ofertas mudam com frequência, então confirme na página do fornecedor antes de comprar.

Quem busca um editor HTML em tempo real quer uma de duas coisas: alterar a página e ver o resultado na hora, ou digitar código e ver uma prévia se atualizar. São ferramentas diferentes.

Com a extensão paga Code Editor, o Mobirise cobre os dois estilos: abra o HTML e o CSS de um bloco ou de uma página, altere e veja a tela se atualizar.

Qualquer gerador de código HTML transforma cliques, ou uma frase digitada, em marcação, e seu valor depende do resultado. O trecho abaixo mostra o tipo de estrutura Bootstrap 5 que um construtor de blocos produz para uma seção simples de duas colunas. É uma marcação genérica que ilustra o padrão, não um arquivo de tema do 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>

Nos celulares, as classes da grade empilham as colunas, e a partir do breakpoint grande elas ficam lado a lado. Você escolhe o nível do título no editor, as imagens viram WebP automaticamente e o texto alternativo é preenchido a partir das configurações da imagem.