All Projects → mjmlio → Mjml

mjmlio / Mjml

Licence: mit
MJML: the only framework that makes responsive-email easy

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Mjml

mjml-syntax
Sublime package for the MJML
Stars: ✭ 44 (-99.66%)
Mutual labels:  email, mjml, responsive-email
Cerberus
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
Stars: ✭ 4,356 (-66.18%)
Mutual labels:  email, responsive-email, email-boilerplate
cli
CLI tool for the Maizzle Email Framework.
Stars: ✭ 31 (-99.76%)
Mutual labels:  email-boilerplate, email-campaigns, responsive-email
Responsive Html Email Signature
Template generator for (responsive) emails & email signatures ✨
Stars: ✭ 525 (-95.92%)
Mutual labels:  email, responsive-email, responsive
Maizzle Php
Jigsaw-based PHP build system for rapid HTML email development with Tailwind CSS.
Stars: ✭ 303 (-97.65%)
Mutual labels:  email, responsive-email
Email Templates
📫 Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more!
Stars: ✭ 3,291 (-74.45%)
Mutual labels:  email, responsive
Mail For Good
An open source email campaign management tool for nonprofits
Stars: ✭ 3,841 (-70.18%)
Mutual labels:  email, email-campaigns
acorn
A responsive email framework based on a golden ratio typography grid.
Stars: ✭ 90 (-99.3%)
Mutual labels:  email-boilerplate, responsive-email
Heml
HEML is an open source markup language for building responsive email.
Stars: ✭ 4,264 (-66.89%)
Mutual labels:  email, responsive-email
Bootstrap Email
Bootstrap 4 (and soon 5) stylesheet, compiler, and inliner for responsive and consistent emails with the Bootstrap syntax you know and love.
Stars: ✭ 781 (-93.94%)
Mutual labels:  email, responsive
Pine
A modular and lightweight, responsive email framework.
Stars: ✭ 98 (-99.24%)
Mutual labels:  email, responsive-email
Grunt Email Workflow
A Grunt workflow for designing and testing responsive HTML email templates with SCSS.
Stars: ✭ 3,010 (-76.63%)
Mutual labels:  email, responsive
laravel-mjml
Laravel MJML offers support for rendering MJML syntax into in-line HTML that can be sent within mails.
Stars: ✭ 26 (-99.8%)
Mutual labels:  email, mjml
Blastula
Easily send great-looking HTML email messages from R
Stars: ✭ 394 (-96.94%)
Mutual labels:  email, responsive-email
mjml-starter-kit
MJML starter kit, create responsive emails very quickly using MJML and this productive toolchain
Stars: ✭ 35 (-99.73%)
Mutual labels:  email, mjml
Mjml Utils
The utility belt for MJML developers
Stars: ✭ 85 (-99.34%)
Mutual labels:  email, responsive-email
Awesome Emails
✉️ An awesome list of resources to build better emails.
Stars: ✭ 1,379 (-89.29%)
Mutual labels:  email, responsive-email
language-mjml
Atom Editor package providing syntax support for MJML
Stars: ✭ 48 (-99.63%)
Mutual labels:  mjml, responsive-email
Responsive Html Email Template
A free simple responsive HTML email template
Stars: ✭ 10,831 (-15.91%)
Mutual labels:  email, responsive
Email Templates
A collection of email templates coded in MJML
Stars: ✭ 69 (-99.46%)
Mutual labels:  email, responsive-email

MJML 4

If you're looking for MJML 3.3.X check this branch

github actions

| Translated documentation | Introduction | Installation | Usage |


Translated documentation

Language Link for documentation
日本語 日本語ドキュメント

Introduction

MJML is a markup language created by Mailjet and designed to reduce the pain of coding a responsive email. Its semantic syntax makes the language easy and straightforward while its rich standard components library shortens your development time and lightens your email codebase. MJML’s open-source engine takes care of translating the MJML you wrote into responsive HTML.

Installation

You can install MJML with NPM to use it with NodeJS or the Command Line Interface. If you're not sure what those are, head over to Usage for other ways to use MJML.

npm install mjml

Development

To work on MJML, make changes and create merge requests, download and install yarn for easy development.

git clone https://github.com/mjmlio/mjml.git && cd mjml
yarn
yarn build

You can also run yarn build:watch to rebuild the package as you code.

Usage

Online

Don't want to install anything? Use the free online editor!

try it live


Applications and plugins

MJML comes with an ecosystem of tools and plugins, check out:

For more tools, check the Community page.

Command line interface

Compiles the file and outputs the HTML generated in output.html

mjml input.mjml -o output.html

You can pass optional arguments to the CLI and combine them.

argument description default value
mjml -m [input] Migrates a v3 MJML file to the v4 syntax NA
mjml [input] -o [output] Writes the output to [output] NA
mjml [input] -s Writes the output to stdout NA
mjml -w [input] Watches the changes made to [input] (file or folder) NA
mjml [input] --config.beautify Beautifies the output (true or false) true
mjml [input] --config.minify Minifies the output (true or false) false

See mjml-cli documentation for more information about config options.

Inside Node.js

import mjml2html from 'mjml'

/*
  Compile an mjml string
*/
const htmlOutput = mjml2html(`
  <mjml>
    <mj-body>
      <mj-section>
        <mj-column>
          <mj-text>
            Hello World!
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
`, options)


/*
  Print the responsive HTML generated and MJML errors if any
*/
console.log(htmlOutput)

You can pass optional options as an object to the mjml2html function:

option unit description default value
fonts object Default fonts imported in the HTML rendered by HTML See in index.js
keepComments boolean Option to keep comments in the HTML output true
ignoreIncludes boolean Option to ignore mj-includes false
beautify boolean Option to beautify the HTML output false
minify boolean Option to minify the HTML output false
validationLevel string Available values for the validator: 'strict', 'soft', 'skip' 'soft'
filePath string Path of file, used for relative paths in mj-includes '.'
preprocessors array of functions Preprocessors applied to the xml before parsing. Input must be xml, not json. Functions must be (xml: string) => string []
juicePreserveTags Preserve some tags when inlining css, see mjml-cli documentation for more info NA
minifyOptions Options for html minifier, see mjml-cli documentation for more info NA
mjmlConfigPath string The path or directory of the .mjmlconfig file (for custom components use) process.cwd()
useMjmlConfigOptions Allows to use the config attribute from .mjmlconfig file false

Client-side (in browser)

var mjml2html = require('mjml-browser')

/*
  Compile a mjml string
*/
var htmlOutput = mjml2html(`
  <mjml>
    <mj-body>
      <mj-section>
        <mj-column>
          <mj-text>
            Hello World!
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
`, options)


/*
  Print the responsive HTML generated and MJML errors if any
*/
console.log(htmlOutput)

API

A free-to-use MJML API is available to make it easy to integrate MJML in your application. Head over here to learn more about the API.

MJML Slack

MJML wouldn't be as cool without its amazing community. Head over the Community Slack to meet fellow MJML'ers.

Contributors

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].