Anúncios incomodam? Ir Sem anúncios Hoje 

Conversor de MJML para HTML de E-mail Responsivo

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

E-mail HTML Responsivo

HTML pronto para produção com condições do Outlook (MSO) e estilos internos.

Cole o MJML à esquerda para ver uma prévia em tempo real aqui.

ANUNCIADO Remover?

Guia

Conversor MJML para HTML de e-mail responsivo

Conversor de MJML para HTML de E-mail Responsivo

Cole o markup MJML e obtenha imediatamente um HTML de e-mail responsivo e pronto para produção, com condicionais do Outlook (MSO), estilos internos e uma prévia em desktop e celular. A compilação ocorre totalmente no seu navegador usando o motor oficial do MJML, então seus modelos nunca saem da sua máquina.

Como usar

Cole ou digite seu código MJML no editor da esquerda (ou clique Tente um exemplo para carregar um modelo inicial).
Escolha um estilo de saída: Aparecida para HTML legível, Minificado para o payload mais pequeno, ou Bruta para o padrão do motor.
Escolha um nível de validação: Suave exibe problemas sem interromper, Rígido interrompe em caso de erros, Pular desliga a validação.
Inspeccione o HTML compilado à direita e use o botão de dispositivo para visualizar layouts em desktop e celular.
Clique Copiar HTML para copiar o código, ou Baixar .html para salvá-lo para seu ESP ou cliente de e-mail.

Características

Suporte completo à especificação do MJML – seções mj-section, colunas mj-column, botões mj-button, imagens mj-image, texto mj-text, separadores mj-divider, atributos mj-head e mais.
Saída adequada para o Outlook – comentários condicionais do MSO e layout baseado em tabelas para clientes de e-mail legados do Outlook.
Pré-visualização em tempo real – iframe isolado com larguras de dispositivo de Desktop (600px) e Mobile (360px).
Exibição de erros e avisos – mensagens internas com números de linhas e nomes de tags problemáticas.
Saída aprimorada, compactada ou bruta – escolha o formato para corresponder ao seu editor ou pipeline de envio.
100% do lado do cliente – O seu código MJML e o HTML compilado nunca chegam a um servidor.
Copiar e baixar – Cópia rápida para a área de transferência ou salvamento como arquivo .html independente.

 Perguntas frequentes

O que é MJML e por que é usado para e-mail?

MJML (Mailjet Markup Language) é uma linguagem de marcação aberta projetada para tornar o desenvolvimento de e-mails responsivos mais acessível. Codificar e-mails em HTML manualmente é difícil porque os navegadores de e-mail (especialmente versões antigas do Outlook) exigem tabelas aninhadas, estilos internos e comentários condicionais do MSO para renderizar corretamente. O MJML oferece um vocabulário de componentes mais alto (mj-section, mj-column, mj-button, mj-image, mj-text) que compila automaticamente para HTML legado baseado em tabelas, permitindo que você tenha uma única fonte que se renderiza de forma consistente em clientes modernos e antigos.
Por que o HTML de e-mail precisa de tabelas e estilos internos em vez de CSS moderno?

Os navegadores de e-mail isolam e reescrevem o HTML que recebem. Muitos navegadores removem estilos, ignoram folhas de estilo externas e só respeitam um subconjunto limitado de propriedades de CSS. O Outlook para Windows usa o renderizador HTML do Microsoft Word, que não tem suporte para flexbox, grid nem mesmo para flutuantes. A única primitiva de layout que se renderiza com consistência em todos os navegadores é a tabela HTML com atributos de largura explícita e estilos internos em cada elemento. O MJML oculta essa estrutura verbosa e propensa a erros por meio de componentes limpos.
O que são comentários condicionais do MSO e por que os outputs do MJML os incluem?

Os comentários condicionais do MSO são comentários HTML especiais na forma que só o Outlook (Windows) processa. Eles permitem que você envie um markup alternativo para o Outlook — por exemplo, formas do VML (Vector Markup Language) para botões resistentes que se renderizam como retângulos mesmo no renderizador quebrado do Outlook. A saída compilada do MJML inclui esses comentários para que um único modelo se adapte de forma suave do Apple Mail e Gmail até o Outlook 2007 e versões posteriores.
O que significa realmente um e-mail responsivo dada a limitação de CSS dos navegadores de e-mail?

Um e-mail responsivo geralmente combina duas estratégias: um layout fluido baseado em tabelas para desktop (largura máxima em torno de 600px, centralizado) e um conjunto de consultas CSS que empilham colunas verticalmente e redimensionam fontes em telas estreitas. Como alguns navegadores ignoram as consultas CSS, o MJML gera um layout que se adapta automaticamente a larguras comuns usando tabelas com porcentagens, e depois camada de substituições com consultas CSS para navegadores que as respeitam. O resultado é um e-mail que parece intencional em um celular mesmo quando o suporte a CSS é parcial.
Qual a diferença prática entre a saída aprimorada e a compactada de HTML?

A saída aprimorada mantém a indentação e quebras de linha, o que é útil ao inspecionar o markup, comparar mudanças de modelo ou colar em uma revisão de código. A saída compactada remove espaços e comentários para reduzir o tamanho do payload — útil porque alguns provedores de e-mail cobram por quilobyte e o Gmail corta mensagens acima de aproximadamente 102 KB. Funcionalmente, as duas produzem o mesmo e-mail renderizado; escolha a aprimorada ao escrever e a compactada ao enviar.