Editor HTML WYSIWYG
Um editor HTML WYSIWYG permite montar uma página web vendo o resultado enquanto o programa escreve a marcação. Veja onde a prévia pode enganar e como o Mobirise, nosso editor gratuito baseado em blocos, se compara a outras cinco ferramentas.
Grátis para sites pessoais e comerciais.
pelo aplicativo e pela exportação em HTML
O aplicativo para desktop do Mobirise exporta seu site como arquivos estáticos em todos os planos. Abrir o código dentro do editor exige um plano pago.
Editor HTML WYSIWYG em resumo
Dados dos editores reunidos pela equipe do Mobirise, em outubro de 2026.
WYSIWYG vem de “what you see is what you get”, ou seja, “o que você vê é o que você obtém”. Num editor desse tipo, você trabalha na página como ela aparece, e não no código-fonte: clica em um título e digita, coloca uma imagem ou muda uma cor, e o programa escreve o HTML e o CSS por trás de cada ação. Isso permite fazer o design de páginas web em HTML sem digitar tags, embora a tela mostre uma prévia próxima, não uma garantia.
Editores clássicos com modo de design, construtores de blocos, designers visuais de CSS e editores de código com prévia ao vivo.
O editor visual e a exportação em HTML não custam nada no Windows, no Mac ou no Linux, e você já começa com mais de 200 blocos. No plano gratuito, as páginas publicadas exibem a marca do Mobirise.
Páginas .html simples estilizadas com Bootstrap 5, com seus scripts ao lado. Qualquer hospedagem que sirva arquivos simples pode entregá-las; nenhum código roda no servidor.
Para ler ou alterar a própria marcação, é preciso a extensão Code Editor, que vem nos planos KIT, BASE e GROW e funciona por bloco ou por página.
O Mobirise não consegue carregar um site ou template criado em outro lugar. Pinegrow, Dreamweaver, Bootstrap Studio e CoffeeCup conseguem.
Os blocos se reorganizam para celular, tablet e desktop, e você pré-visualiza cada largura. Não existe um layout separado para celular.
Qual editor HTML visual serve para o seu trabalho
Não existe um único melhor editor HTML WYSIWYG, então escolha pelo trabalho que você precisa fazer. Em vários desses casos, um concorrente é a melhor resposta, e o cartão correspondente diz isso.
Mobirise
Você vê o visual final enquanto arrasta blocos para o lugar, redigita o texto e ajusta os parâmetros dos blocos; o aplicativo gratuito então gera um site estático em Bootstrap 5. O porém: HTML de fora não abre, e ver o código exige um plano.
Pinegrow Web Editor
Abre qualquer arquivo .html existente e mostra uma visão visual ao vivo ao lado da marcação; o Tailwind CSS também é compatível. O porém: US$ 18 por mês, US$ 149 por ano ou US$ 199 uma única vez.
Bootstrap Studio
Componentes Bootstrap de arrastar e soltar, editor de código embutido e projetos offline, por US$ 29 ou US$ 59 em pagamento único. O porém: você fica dentro do modelo de componentes do Bootstrap.
Adobe Dreamweaver
O Live View permite clicar na página renderizada e alterar textos, imagens e classes, com o código-fonte ainda no comando. O porém: é uma assinatura, US$ 22,99 por mês no plano de um só aplicativo, e não há versão para Linux.
CoffeeCup HTML Editor
Uma prévia dividida redesenha a página enquanto você digita; há uma edição gratuita, e a versão completa custa US$ 29 uma única vez. O porém: só para Windows, e você escreve todas as tags.
Webflow
Um designer visual construído sobre CSS, com cada breakpoint definido manualmente; exportar o código exige um plano pago. O porém: os painéis espelham o CSS, então ele recompensa quem já o conhece.
8B AI
Digite uma frase e receba o design de um site completo; o nível gratuito deixa você ver o HTML e o CSS reais por trás dele. O porém: ele roda no navegador, e publicar, a exportação completa e as edições por chat exigem o plano Pro (US$ 9 por mês, cobrado anualmente).
Elementor
Um plugin construtor de páginas para sites WordPress. O porém: você não recebe uma pasta de HTML independente, porque as páginas precisam do WordPress rodando no seu servidor.
Um aviso: o Mobirise é nosso, então trate esta lista como escrita por uma parte interessada. Os detalhes de cada concorrente vieram das páginas de produto e de preços do respectivo fornecedor, e quando um concorrente faz um trabalho melhor, nós o indicamos.
Seis ferramentas de HTML visual lado a lado
Linhas escolhidas para quem se importa com o próprio HTML: o que você edita na tela, quão aberto é o código e se arquivos de fora carregam.
| Recurso | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| O que você edita na tela | A própria página: blocos arrastados, texto digitado no lugar, configurações por bloco | A página renderizada ao lado dos arquivos de código | Principalmente código; o Live View permite editar na página renderizada | Um design gerado, retrabalhado pelo chat com IA no plano Pro | Componentes Bootstrap soltos em uma tela, com um painel de código | Código, com prévia ao vivo em tela dividida |
| Digitar o seu próprio código | Pela extensão Code Editor (KIT, BASE, GROW), para um bloco ou uma página | Sim, com sincronização bidirecional com o VS Code | Sim, é o modo principal, com sugestões de código | Sem edição manual listada; o nível gratuito mostra o HTML e o CSS reais | Sim: HTML, SASS, JavaScript e JSON em um editor inspirado no VS Code | Sim; ele completa o código e verifica a sua marcação |
| Abre um site .html existente | Não, apenas projetos iniciados no Mobirise | Sim, qualquer site existente | Sim, inclusive páginas Bootstrap existentes | Não informado pelo fornecedor | Sim, soltando páginas, folhas de estilo, scripts e imagens existentes em um projeto | Sim, arquivos locais ou páginas abertas diretamente em um servidor |
| Framework usado no HTML exportado | Bootstrap 5 | Tailwind CSS, Bootstrap ou nenhum | Qualquer um; vem com Bootstrap 5.3.8, 4.4.1 e 3.4.1 | Marcação própria; sem Bootstrap | Bootstrap 5, 4 ou 3 | Sua própria marcação; templates responsivos gratuitos para começar |
| Roda em | Windows, macOS (versão para Apple Silicon ou Intel), Linux baseado em Debian, navegador, Android | Windows, macOS, Linux; também há uma edição no navegador | Windows e macOS | Somente no navegador | Windows, macOS, Linux | Somente Windows |
| Preço e cobrança | US$ 0 pelo editor e pela exportação em HTML. Planos anuais: o KIT, por US$ 149, libera o Code Editor e os temas premium; BASE (US$ 199) e GROW (US$ 249) trazem também sites hospedados e IA | US$ 18 por mês, US$ 149 por ano ou US$ 199 uma única vez; teste gratuito | Plano de um só aplicativo por US$ 22,99 por mês, com compromisso anual pago mensalmente; teste gratuito | Criar designs é grátis; o Pro, necessário para publicar, custa US$ 9 por mês, cobrado anualmente | Pagamento único: US$ 29 Standard ou US$ 59 Lifetime | Edição gratuita ou licença perpétua de US$ 29 que inclui um ano de atualizações |
Onde o “o que você vê” deixa de ser verdade
O editor desenha a página uma vez, na sua tela. Cada visitante chega com um navegador, um dispositivo e um conjunto de fontes diferentes.
Na maioria dos editores visuais atuais, a área de edição é uma página web de verdade, desenhada por um motor de navegador, então boa parte do que você vê é genuína: as mesmas tags, os mesmos estilos. As diferenças aparecem onde a configuração do visitante é diferente da sua. Três delas pegam quase todo mundo.
Fontes
O visitante só vê a sua fonte se a página a carrega da web ou a inclui no site. Se não, o dispositivo dele usa outra tipografia no lugar e os títulos quebram de outro jeito. Confira se o tema fornece as próprias fontes.
Tamanhos de tela
A área de edição mostra uma largura por vez. Um título que cabe em um laptop pode quebrar em várias linhas no celular, e uma fileira de colunas pode empilhar. Passe a prévia por cada largura antes de publicar.
Scripts
Carrosséis, menus, formulários, mapas e vídeos incorporados costumam se comportar de outro jeito dentro de um editor, ou ficam pausados de propósito. Trate-os ali como substitutos, teste a página exportada em navegadores reais e envie um formulário de teste a partir da hospedagem em que o site estiver no ar.
Quatro tipos de editor HTML WYSIWYG
Todos mostram a página enquanto você trabalha. Eles diferem no que você toca: a página, blocos prontos, propriedades de CSS ou o código.
Modo de design clássico
Uma área parecida com um documento sobre o HTML, geralmente ao lado do código; o Live View do Dreamweaver é a forma atual desse modelo. Serve para quem mantém sites feitos à mão e quer corrigir textos sem caçar tags.
Construtores de blocos
As páginas se formam a partir de seções ou componentes prontos, como no Mobirise ou no Bootstrap Studio, enquanto o programa escreve a marcação. Muita gente chama esse tipo de construtor de páginas HTML. Serve para quem quer um site sem código; muitos construtores de páginas web fáceis para iniciantes também funcionam assim.
Designers visuais de CSS
Webflow, ou Pinegrow nos seus próprios arquivos: você estiliza elementos em painéis que correspondem a propriedades de CSS. Serve para designers que já pensam em caixas, classes e breakpoints.
Editores de código com prévia ao vivo
O CoffeeCup HTML Editor e os similares, muitas vezes listados como editores HTML WYSIWYG com prévia: você digita o HTML e um painel ao lado redesenha a página. Servem para quem está aprendendo HTML e para desenvolvedores que escrevem cada tag, mas gostam de ver o efeito na hora.
Está criando o seu próprio aplicativo, e não um site? Então o editor de que você precisa é um componente: uma caixa de texto rico que você incorpora em um formulário, em um CMS ou em um help desk para que seus usuários formatem texto. TinyMCE e CKEditor 5 são os veteranos completos, com planos de nuvem pagos e complementos; Quill é um editor HTML WYSIWYG de código aberto mais leve; TipTap é um kit headless construído sobre o ProseMirror, então a barra de ferramentas é você quem projeta. Eles geram trechos de HTML dentro do seu produto, não páginas inteiras, e por isso ficam fora da tabela acima.
O que você define visualmente no Mobirise e o que exige código
A maior parte de uma página se faz apontando e clicando. A extensão Code Editor cobre o que os painéis deixam de fora.
Blocos
Toda página no editor é uma coluna de seções prontas. Puxe uma nova pelo painel lateral e exclua as que você não precisar.
Palavras e tags de título
Digite direto na página. Cada título aceita a tag H que você escolher, então a estrutura da página fica por sua conta.
Fotos
Clique em qualquer foto para trocá-la pela sua. Reduza os arquivos grandes antes de adicioná-los; as dicas abaixo explicam por quê.
Parâmetros do bloco
Um painel para cada bloco define o espaçamento, o fundo, as partes visíveis, como o título ou os botões, e o número de colunas.
Fontes e cores
No Style Editor você escolhe as tipografias e a paleta de cores que os blocos usam.
Código, quando você precisar
Um atributo extra, uma regra de CSS personalizada ou uma marcação reformulada passam pela extensão Code Editor, incluída nos planos KIT, BASE e GROW.
Um limite a conhecer: o HTML que você monta é o HTML que todo dispositivo recebe. O Mobirise não oferece layout só para celular, e nenhum elemento pode ser ocultado em apenas um tamanho de tela.
Os arquivos que você recebe ao exportar
Exportar pelo aplicativo para desktop não custa nada em nenhum plano. Está criando no navegador? Lá, baixar o código exige BASE ou GROW.
Páginas e imagens
Um arquivo HTML por página, com títulos, parágrafos e links comuns, além das suas fotos e dos gráficos do tema dentro da pasta exportada.
Estilos e scripts
O CSS e o JavaScript do Bootstrap 5, os estilos próprios do tema, as escolhas que você fez nos painéis e os scripts por trás de menus e carrosséis.
Nada no servidor
Sem PHP, sem banco de dados, sem painel de administração, então o site roda em qualquer hospedagem comum ou no GitHub Pages.
A exportação funciona em mão única. O Mobirise constrói a partir do próprio projeto, não do HTML, então as edições feitas nos arquivos exportados em outro editor ficam fora dele. Faça as alterações de código no Code Editor ou trate as edições manuais como a última etapa.
Como manter limpo e rápido o HTML feito de forma visual
Ferramentas visuais acrescentam algum peso por natureza. Estes hábitos o reduzem, no Mobirise ou em qualquer outro editor.
Estruture com títulos, não com tamanhos
Dê a cada página um único H1, aninhe H2 e H3 abaixo dele e escolha cada tag pela posição na estrutura. O tamanho com que ela aparece é trabalho de estilo.
Reduza as fotos antes
Redimensione cada imagem para mais ou menos a maior largura em que ela vai aparecer e salve como WebP ou como JPEG bem compactado. Um original de câmera pode pesar mais que o resto da página.
Estilize em um só lugar
Reestilizar botões um por um deixa um rastro de regras avulsas. Defina fontes e cores de forma centralizada, no Style Editor ou no equivalente da sua ferramenta, e o CSS fica curto.
Teste fora do editor
Abra a página exportada em mais de um navegador, rode o validador do W3C e um teste de velocidade, como o PageSpeed Insights, e corrija o que eles apontarem antes do lançamento.
Um tema do Mobirise ou templates de sites HTML gratuitos?
Os dois dão um visual pronto desde o primeiro dia. A diferença está em quem escreve a marcação e em quais editores conseguem abri-la depois.
Um template baixado
Uma pasta de arquivos escritos por outra pessoa. Edite em um editor de código ou em uma ferramenta visual que abre HTML de fora, como Pinegrow, Dreamweaver, Bootstrap Studio ou CoffeeCup. Leia a licença: alguns templates gratuitos exigem um link de crédito.
Um tema do Mobirise
Uma biblioteca de blocos que vive dentro do aplicativo, e não uma pasta de arquivos. Você monta as páginas com ela de forma visual, e a exportação gera o HTML. Usuários do plano gratuito recebem mais de 200 blocos em um único tema básico; o KIT libera todos os temas premium e extensões, mais de 220 no total.
Levar o visual de um template para o Mobirise
O Mobirise não abre um template feito em outro lugar, nem mesmo um criado com Bootstrap 5. Recrie o visual com blocos ou dê ao Mobirise AI uma captura de tela como prompt e edite os quatro designs que ele devolve, se a licença do template permitir.
Para quem o Mobirise serve como editor visual de HTML
O Mobirise é certo para alguns trabalhos e errado para outros. Veja como saber de que lado o seu está.
Combina bem
- Você quer montar páginas de forma visual e nunca digitar uma tag
- Você precisa de arquivos simples para a sua própria hospedagem, sem pagar por um plano
- Você cria sites de clientes com blocos responsivos e consistentes
- Você trabalha offline em um laptop e publica depois
- Você quer primeiro um rascunho feito por IA e depois edições manuais no mesmo editor
Outra ferramenta serve melhor se
- Seu trabalho é consertar um site antigo feito à mão ou um template baixado: Dreamweaver, Pinegrow ou CoffeeCup HTML Editor
- Seu projeto pede Tailwind ou nenhum framework: Pinegrow
- Você quer controle no nível do pixel e estilos por breakpoint: Webflow
- Você prefere pagar uma única vez por trabalho com Bootstrap: Bootstrap Studio
- Você quer escrever e visualizar código de graça: a edição gratuita do CoffeeCup
- O site já roda no WordPress: Elementor
Perguntas sobre a edição visual de HTML
O que é um editor HTML WYSIWYG?
Um editor em que você altera uma página web como ela aparece na tela, enquanto o programa escreve o HTML e o CSS. A sigla promete que a página que você edita é a página que você publica. Na prática, as duas são parecidas, mas não idênticas, porque fontes, largura de tela e scripts dependem do navegador de cada visitante.
O Mobirise é um editor HTML de arrastar e soltar?
Sim, no nível dos blocos: você arrasta seções prontas de um painel lateral para a página e depois digita nelas. Você não solta elementos avulsos em pontos arbitrários; o layout vem dos blocos e de seus parâmetros. Mais sobre esse modo de trabalho: construtor de sites gratuito de arrastar e soltar.
Posso editar o código HTML no Mobirise?
Pode, depois de ter a extensão Code Editor, que vem com o KIT (US$ 149 por ano), o BASE e o GROW. Ela mostra a marcação e o CSS de um único bloco ou da página inteira. Os arquivos exportados no plano gratuito também abrem em qualquer editor de texto, mas as edições feitas lá nunca voltam para o projeto.
O Mobirise consegue abrir um template HTML que eu baixei?
Não. Um template de marketplace ou um site codificado à mão é HTML simples, e o Mobirise só trabalha com projetos criados dentro dele. Dreamweaver, Pinegrow, Bootstrap Studio e CoffeeCup HTML Editor carregam HTML existente; no Mobirise, você recriaria o visual com blocos.
Existe um editor HTML WYSIWYG gratuito?
Sim. O aplicativo para desktop do Mobirise não custa nada para sites pessoais ou comerciais, e a exportação também não, embora os sites gratuitos exibam a marca do Mobirise. O CoffeeCup tem uma edição gratuita do HTML Editor, se você preferir digitar o código. O 8B AI gera designs sem custo, embora publicá-los seja pago. Comparamos mais opções gratuitas na nossa lista de software gratuito de design de sites.
O HTML de um editor visual é pior do que o código escrito à mão?
Em geral é mais pesado, porque as ferramentas visuais acrescentam camadas extras e classes que as páginas escritas à mão dispensam. A saída construída sobre um framework como o Bootstrap 5 continua legível e previsível; sobre esse lado do framework, veja construtor de sites Bootstrap. Para a menor marcação possível, escreva você mesmo em um editor de código.
Existe um editor HTML WYSIWYG offline para Mac, Windows ou Linux?
Sim. O aplicativo para desktop do Mobirise tem versões para Windows, para macOS (Apple Silicon e Intel) e para Ubuntu e outros sistemas Linux baseados em Debian, e a edição não precisa de conexão. O Bootstrap Studio, que mantém os projetos offline, e o Pinegrow também rodam nos três sistemas, enquanto o Dreamweaver não tem versão para Linux e o CoffeeCup HTML Editor roda só no Windows. Quem usa Mac encontra mais opções no nosso guia de criador de sites para Mac.
O Mobirise funciona offline?
No aplicativo para desktop, sim: a edição visual, as prévias e qualquer tema ou bloco que você já instalou continuam funcionando sem rede. É preciso estar conectado para usar a IA, publicar, entrar na conta, fazer compras e baixar atualizações ou temas que você ainda não tem. Mais sobre essa divisão: software para criar sites offline.
Existe um editor HTML WYSIWYG online para Android ou iPhone?
O Mobirise não tem aplicativo para dispositivos Apple, mas no iPhone e no iPad o construtor no navegador funciona online no Safari ou em qualquer outro navegador de celular. No Android, o app Mobirise AI, instalado pelo Google Play, gera designs, traduz, publica e exporta HTML. O 8B AI também funciona no navegador.
Crie sua primeira página hoje
Comece com IA no navegador ou baixe o aplicativo gratuito. Nos dois casos, é o mesmo Mobirise.