Git Product home page Git Product logo

mjml's Introduction

MJML 4

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

travis

| Introduction | Installation | Usage | Contribute |


Introduction

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward while its rich standard components library fastens 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

Requirements

  • Node >= 4.2.x

Via NPM:

We recommend installing and using MJML locally, in a project folder where you'll use MJML:

npm install mjml

In the folder where you installed MJML you can now run:

./node_modules/.bin/mjml input.mjml

To avoid typing ./node_modules/.bin/, add it to your PATH:

export PATH="$PATH:./node_modules/.bin"

You can now run MJML directly, in that folder:

mjml input.mjml
Via... click:

Show me the code!

Command line

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

mjml -r input.mjml

Redirects the HTML generated to a file named output.html

mjml -r input.mjml -o output.html

Sets the validation rule to skip so that the file is rendered without being validated

mjml -l skip -r input.mjml

Watches a file and compiles every time the file changes

mjml -w input.mjml -o output.html

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>
`)

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

Create your component

One of the great advantages of MJML is that it's component based. Components abstract complex patterns and can easily be reused. Added to the standard library of components, it is also possible to create your own components!

To learn how to create your own component, follow this step-by-step guide which also includes a ready-to-use boilerplate.

Try it live

Get your hands dirty by trying the MJML online editor! Write awesome code on the left side and preview your email on the right. You can also get the rendered HTML directly from the online editor.

try it live


Contributors

Maxime Robin Loeck Guillaume Meriadec Nicolas Arnaud HTeuMeuLeu Emmanuel Payer Matthieu
Maxime Robin Loeck Guillaume Meriadec Nicolas Arnaud HTeuMeuLeu Emmanuel Payet Matthieu

Contribute

  • Fork the repository
  • Code an awesome feature (we are confident about that)
  • Make your pull request
  • Add your github profile here

mjml's People

Contributors

aenohe avatar arnaudbreton avatar asmockler avatar blaze33 avatar christopher-ramirez avatar dragon3 avatar epayet avatar everus avatar gilbert09 avatar havens avatar hugomassing avatar ianchadwick avatar igalarzab avatar iryusa avatar jeroendesloovere avatar jitendravyas avatar kmcb777 avatar loeck avatar lohek avatar martinhorsky avatar meriadec avatar mrskippy avatar ngarnier avatar ogonkov avatar pixelize avatar rogierslag avatar slantz avatar uelb avatar unipro-danmunn avatar zakdoek avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.