Skip to content
akoutmosPublic

About

Create emails that WOW your customers using MJML and EEx

Resources

Stars

137 stars

Watchers

2 watching

Forks

Repository files navigation

MJML EEx Logo

Easily create beautiful emails using MJML right from Elixir!

Hex.pm GitHub Workflow Status (master) Coveralls master branch Support the project


Contents

Installation

Available in Hex, the package can be installed by adding mjml_eex to your list of dependencies in mix.exs. It requires Elixir 1.18 or later.

def deps do
  [
    {:mjml_eex, "~> 1.0.0-rc.1"}
  ]
end

Documentation can be found at https://hexdocs.pm/mjml_eex. Upgrading from 0.x? See Migrating from 0.x.

Level Up Your Elixir Skills!

Everything I have learned building production Elixir systems ends up in one of two places: an open source library on Hex, or a book. The libraries are free and will stay that way. The books are what let me keep writing them.

If this library has been useful to you, picking up one of my books is the best way to support this library and the many others that I maintain. You'll also gain knowledge that took me years to attain!

Elixir For Finance — Learn how to navigate markets and trading without leaving the BEAM. Livebook for exploration, Explorer for dataframes, VegaLite for visualizations. This book goes through it all!

Elixir Patterns — The essential BEAM handbook for the busy developer. The patterns and mental models covered in this book teach you how to build scalable systems that can handle whatever production throw at them.

Programming Nerves — The best place to start if you are looking to get your own hardware projects up and running with Elixir and Nerves. I doubt you'll find a more fun and enjoyable hardware book out there!

Build a Weather Station with Elixir and Nerves — A project-based introduction to Nerves. Wire up the sensors, capture readings and then pipe the data into a time series database that can be visualized with Grafana.

Using MJML EEx

Write emails with MJML and the template syntax you know from HEEx:

defmodule MyApp.Emails.Welcome do
  use MjmlEEx
  import MyApp.Emails.Components

  def render(assigns) do
    ~MJML"""
    <mjml>
      <mj-body>
        <mj-section>
          <mj-column>
            <mj-text font-size="20px" color="#F45E43">Hello {@first_name}!</mj-text>
            <mj-text :for={item <- @items}>{item.name}</mj-text>
            <.cta :if={@cta_url} href={@cta_url}>Get started</.cta>
          </mj-column>
        </mj-section>
      </mj-body>
    </mjml>
    """
  end
end
MyApp.Emails.Welcome.to_html(first_name: "Alex", items: items, cta_url: "https://example.com")

Or keep the template in a welcome.meex file next to the module, like LiveView's colocated templates.

  • HEEx syntax: {...} interpolation, attr={...}, :if, :for, and EEx blocks when you need them.
  • Function components with attr and slot declarations, modeled on Phoenix.Component, and checked at compile time.
  • Core components for polished emails without writing styles: heroes, cards, headings, buttons, badges, tables, callouts, a header and footer and more, styled with a theme you can change.
  • Prebuilt templates for common emails: welcome emails, email confirmations, magic links, one-time passwords, password resets, team invitations, security alerts, trial conversions, failed payments, invoices, order confirmations, webinars, newsletters, product launches and flash sales.
  • Layouts that share the head and outer structure of your emails.
  • Validation against the MJML spec at compile time: unknown tags, misspelled attributes, invalid values and misplaced components fail the build, with the file, line and column.
  • Fast rendering with MRML, the Rust implementation of MJML, through the precompiled mjml_nif. No Node or Rust needed.
  • Plain-text versions of every email, for multipart emails, with the generated to_text/1.
  • A mix format plugin for .meex files and ~MJML sigils.
  • Telemetry events for every rendered email.

The prebuilt templates are complete emails, ready for your content and your theme:

The prebuilt templates

Guides

Attribution

  • The logo for the project is an edited version of an SVG image from the unDraw project
  • The Elixir MJML library that this library builds on top of MJML
  • The Rust MRML library that provides the MJML compilation functionality MRML
  • The attribute type validation in lib/mjml_eex/spec/types.ex is ported from MJML's mjml-core (MIT license, Copyright (c) 2016 Mailjet SAS), and lib/mjml_eex/spec/generated.ex is generated from MJML's component definitions
  • The test corpus in test/fixtures/corpus/ is vendored from MRML (MIT license)
  • The template tokenizer, parser and compiler (lib/mjml_eex/tag_engine/) and the formatter (lib/mjml_eex/formatter.ex and lib/mjml_eex/formatter/) are forked from Phoenix LiveView's tag engine and HTML formatter (MIT license, Copyright (c) 2018 Chris McCord)
  • The HTML entities that plain-text emails decode are generated from the HTML Living Standard (CC BY 4.0, Copyright (c) WHATWG)
  • The licenses of all of these are in NOTICE

About

Create emails that WOW your customers using MJML and EEx

Resources

Stars

137 stars

Watchers

2 watching

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages