E-mails responsivos com a linguagem de marcação MJML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 01 Horas 58 Min 20 Seg Tempo restante da oferta: 01 58 20 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) E-mails responsivos com a linguagem de marcação MJML [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) # E-mails responsivos com a linguagem de marcação MJML O MJML é um framework e linguagem de marcação para a criação de e-mails responsivos. Veja como integrá-lo aos seus projetos. [ Kennedy Tedesco ](https://www.treinaweb.com.br/blog/autor/kennedy-tedesco) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/31142052/mjml-cover.png) O [MJML](https://mjml.io) é um [framework](https://www.treinaweb.com.br/blog/para-que-serve-um-framework/ "framework") e linguagem de marcação para a criação de e-mails responsivos. Ele simplifica a escrita com uma linguagem simples e concisa (a Mailjet Markup Language) que é convertida para [HTML](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML"). Se você ainda não teve a oportunidade de ver o código HTML de um e-mail responsivo, costuma ser uma coisa muito bagunçada, pois os estilos são aplicados de forma inline e usa-se tabelas para a sua estruturação. Isso é feito para fazer com que o e-mail funcione no maior número possível de dispositivos. [ ![Wordpress - Desenvolvimento de blocos para o editor Gutenberg](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/wordpress.svg) Curso Wordpress - Desenvolvimento de blocos para o editor Gutenberg Conhecer o curso ](https://www.treinaweb.com.br/curso/wordpress-desenvolvimento-de-blocos-para-o-editor-gutenberg) Para você ter ideia, esse trecho de MJML de um dos e-mails que enviamos na TreinaWeb: ```html Python - Collections Estruturas de dados são pontos cruciais em qualquer linguagem de programação. Sendo que em cada uma, podem ser implementadas de uma forma diferente. Por isso que conhecer as particularidades e recursos da linguagem em relação a estrutura de dados, é imprescindível a qualquer um que queira dominar uma linguagem. Neste ponto o Python não fica atrás, fornecendo estruturas comuns em outras linguagens, bem como estruturas exclusivas. Neste curso veremos como manipulá-las e conheceremos os métodos de cada estrutura disponível nesta linguagem. SAIBA MAIS SOBRE O CURSO ``` É convertido para esse HTML: ```html Python - Collections Estruturas de dados são pontos cruciais em qualquer linguagem de programação. Sendo que em cada uma, podem ser implementadas de uma forma diferente. Por isso que conhecer as particularidades e recursos da linguagem em relação a estrutura de dados, é imprescindível a qualquer um que queira dominar uma linguagem. Neste ponto o Python não fica atrás, fornecendo estruturas comuns em outras linguagens, bem como estruturas exclusivas. Neste curso veremos como manipulá-las e conheceremos os métodos de cada estrutura disponível nesta linguagem. SAIBA MAIS SOBRE O CURSO ``` Através desse exemplo já dá para você notar como o MJML ajuda na escrita e na clareza do que está sendo escrito. ## E para escrever um e-mail usando MJML? O intuito desse artigo não é o de masterizar o uso do MJML ou de te ensinar a passo a passo a sintaxe dessa linguagem de marcação. O MJML possui uma completa documentação que mostra passo a passo tudo o que pode ser desenvolvido com ele. A ideia aqui é te dar o caminho da pedra, te apresentar os recursos disponíveis, o que você pode usar e te mostrar como converter o MJML para HTML em seu projeto. **A documentação:** A [documentação do MJML](https://mjml.io/documentation/) não deve ser ignorada. Portanto, é um ótimo começo. **Try it live:** Você pode visualizar o resultado enquanto escreve no [editor online](https://mjml.io/try-it-live) disponível no site do MJML. **Templates**: O site oficial tem uma área com alguns [templates](https://mjml.io/templates) para que você possa visualizar e tirar algumas ideias na hora de construir os seus e-mails. A própria documentação fornece um [template básico](https://mjml.io/try-it-live/templates/basic) para você começar por ele, caso deseje. ## E como vou converter o MJML para HTML? O MJML precisa ser convertido para HTML para que então os seus e-mails sejam enviados. Há algumas formas de atingir esse objetivo. Vamos começar pelas manuais: **1)** É possível converter MJML para HTML pelo [editor online](https://mjml.io/try-it-live) oficial. **2)** É possível converter através da [aplicação desktop](https://mjmlio.github.io/mjml-app/) disponível para Linux, macOS e Windows. Agora, se dinamicamente/programaticamente você constrói o MJML e precisa convertê-lo “on the fly” antes dos envios, existem algumas opções: **1)** Se registrar na [API Oficial](https://mjml.io/api) do MJML para que você receba uma credencial que te permitirá fazer uma requisição na API para converter MJML para HTML. É de grátis. ```bash curl \ -X POST "https://api.mjml.io/v1/render" \ --user "APPLICATION-ID:SECRET-KEY" \ -d '{ "mjml":"Hello World" }' ``` **2)** O MJML é open-source e escrito em JavaScript. Ou seja, você próprio pode criar a sua API em NodeJS para a conversão do MJML para HTML. Veja no [Github](https://github.com/mjmlio/mjml). ## Como usamos o MJML na TreinaWeb Na TreinaWeb usamos uma abordagem Serverless para essa conversão. Você não sabe o que é Serverless? Recomendo a leitura do artigo: [Serverless: uma introdução](https://www.treinaweb.com.br/blog/serverless-uma-introducao/). Criamos uma função e fizemos o deploy dela na AWS Lambda, pois é na AWS onde administramos toda a nossa infraestrutura. O código-fonte dessa função e do template do [Serverless Framework](https://serverless.com/) para deploy na AWS, você encontra nesse repositório: [KennedyTedesco/mjml-lambda](https://github.com/KennedyTedesco/mjml-lambda). [ ![React Native - Autenticação com Firebase Authentication](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Autenticação com Firebase Authentication Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-autenticacao-com-firebase-authentication) A função é extremamente simples, ela apenas invoca o código do MJML para realizar a conversão: ```javascript import mjml2html from 'mjml'; export async function convert(event, context, callback) { return mjml2html(event.mjml, { beautify: true, minify: true, keepComments: false, validationLevel: 'skip' }); } ``` Uma vez que a lambda está disponível para uso, a invocamos em um de nossos sitemas usando a SDK da AWS para PHP. Uma possível forma de atingir esse objetivo usando o PHP: ```php $lambda = new \Aws\Lambda\LambdaClient([ 'version' => 'latest', 'region' => 'us-east-1', ]); $result = $lambda->invoke([ 'FunctionName' => 'mjml-prod-to-html', 'InvocationType' => 'RequestResponse', 'LogType' => 'None', 'Payload' => json_encode(['mjml' => '...',]), ]); $result = json_decode($result->get('Payload')->getContents(), true); $html = $result['html']; // O HTML convertido ``` No entanto, se fosse necessário expor essa função na Web para que qualquer um utilizasse, poderíamos usar o [API Gateway](https://aws.amazon.com/pt/api-gateway/) na “frente” da lambda. Dessa forma conseguimos manter o template dos nossos e-mails bem fáceis de serem desenvolvidos e alterados, além de que trazemos para a nossa infraestrutura a responsabilidade de fazer a conversão, para não ter que depender de um serviço de terceiro (a API BETA do MJML). Espero que o MJML ajude a sua equipe a produzir lindos e-mails responsivos. Até a próxima! [ ![Desenvolvedor Front-end Júnior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Front-end Júnior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-junior) - [ #NodeJS ](https://www.treinaweb.com.br/blog/tag/nodejs) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #email ](https://www.treinaweb.com.br/blog/tag/email) - [ #newsletter ](https://www.treinaweb.com.br/blog/tag/newsletter) - [ #linguagem de marcação ](https://www.treinaweb.com.br/blog/tag/linguagem-de-marcacao) - [ #mjml ](https://www.treinaweb.com.br/blog/tag/mjml) - [ #aws lambda ](https://www.treinaweb.com.br/blog/tag/aws-lambda) - [ #serverless ](https://www.treinaweb.com.br/blog/tag/serverless) Autor ![Kennedy Tedesco](//secure.gravatar.com/avatar/236c86e9469327ba7a9250ff15fef424?d=mm) ## Kennedy Tedesco Head de desenvolvimento. Vasta experiência em desenvolvimento Web com foco em PHP. Graduado em Sistemas de Informação. Pós-graduando em Arquitetura de Software Distribuído pela PUC Minas. Zend Certified Engineer (ZCE) e Coffee Addicted Person (CAP). [@KennedyTedesco](https://twitter.com/KennedyTedesco) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/kennedy-tedesco) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/02215124/CHAT-ONLINE-1-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Porquê instalar um chat online pronto vale a pena ](https://www.treinaweb.com.br/blog/porque-instalar-um-chat-online-pronto-vale-a-pena) Confira neste artigo as vantagens de instalar um chat online. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/como-melhorar-a-experiencia-do-usuario-em-ecommerce-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Como melhorar a experiência do usuário em e-commerce ](https://www.treinaweb.com.br/blog/como-melhorar-a-experiencia-do-usuario-em-e-commerce) O ato de fazer compras online cresceu nos últimos meses. Sendo assim, confira neste artigo como melhorar a experiência do usuário no seu e-commerce. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/o-que-e-programacao-reativa-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ O que é programação reativa? ](https://www.treinaweb.com.br/blog/o-que-e-programacao-reativa) Confira neste artigo o que vem a ser programação reativa, um princípio de desenvolvimento de software que vem ganhando espaço entre os desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/enviando-e-mails-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Enviando e-mails no ASP.NET Core ](https://www.treinaweb.com.br/blog/enviando-e-mails-no-asp-net-core) O .NET possui um módulo nativo para o envio de e-mails. Entretanto, veja como facilitar este processo utilizando a biblioteca Coravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/capa-engenharia-social-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 6 anos atrás ## [ O que é Engenharia Social? ](https://www.treinaweb.com.br/blog/o-que-e-engenharia-social) Nos últimos anos os tipos de ataque não só aumentaram como estão mais sofisticados. É importante conhecê-los para que possamos nos prevenir de uma forma mais assertiva. Vamos conferir neste artigo o que é a engenharia social e como os hackers a utilizam para fazer suas vítimas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/28164502/o-que-e-phishing-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 7 anos atrás ## [ Termos comuns de segurança: Phishing ](https://www.treinaweb.com.br/blog/termos-comuns-de-seguranca-phishing) Existem muitas pessoas mal intencionadas que fazem uso da internet para aplicar golpes: um deles é o Phishing, que veremos neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/PAY-FOR-UNLOCK-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 6 anos atrás ## [ Termos comuns de segurança: Ransomware ](https://www.treinaweb.com.br/blog/termos-comuns-de-seguranca-ransomware) Você sabia que seus arquivos podem ser criptografados por hackers que exigem dinheiro para liberá-los? Confira neste artigo o Ransomware e como evitá-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/18090957/PYTHON-EMAIL-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Enviando email com Python e SMTP ](https://www.treinaweb.com.br/blog/enviando-email-com-python-e-smtp) Neste artigo veremos como enviar emails utilizando Python e SMTP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/10212549/O-QUE-É-SYMFONY-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ O que é Symfony? ](https://www.treinaweb.com.br/blog/o-que-e-symfony) Neste artigo veremos o que é Symfony e suas principais características. Vamos falar sobre sua história, o padrão estrutural MVC, componentes, tipos de estruturas de projeto, além de ciclo de atualização e suporte. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/14232157/capa-produtividade-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Como quintuplicar a produtividade no desenvolvimento de software? ](https://www.treinaweb.com.br/blog/como-quintuplicar-a-produtividade-no-desenvolvimento-de-software) Veja neste artigo algumas dicas que podem te ajudar em sua produtividade no desenvolvimento de software. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/09/guia-termos-comuns-seguranca-400x280.png) [ Guias ](https://www.treinaweb.com.br/blog/categoria/guias) 3 anos atrás ## [ Guia de termos comuns de segurança ](https://www.treinaweb.com.br/blog/guia-de-termos-comuns-de-seguranca) Neste guia de segurança veremos alguns dos principais ataques que podem acontecer na web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/capa-termos-comuns-segurança-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 6 anos atrás ## [ Termos comuns de segurança ](https://www.treinaweb.com.br/blog/termos-comuns-de-seguranca) Quando falamos sobre a área de Segurança dentro da Tecnologia da Informação, é comum que existam termos que até já ouvimos falar, mas não sabemos ao certo o que significam. Por isso, neste artigo, vamos abordar alguns termos comuns de segurança. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **01h 58min 20s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58