README

This package is a port of mjml to laravel blade. The goal is to have a running mjml version purely in php and blade, without the need for node.

You can just use the original mjml xml as blade view.

<!-- resources/views/mail/mjml-example.blade.php -->
<mjml>
    <mj-body>
        <mj-section>
            <mj-column>
                <mj-image width="100px" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
                <mj-divider border-color="#F45E43"></mj-divider>
                <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

You can now use this view in your mails:

public function content(): Content
{
    return new Content(
        view: 'mail.mjml-example',
    );
}

Limitations

• mj-include is not supported. Use @include instead.

• mj-html-attributes not supported yet.

• mj-raw attribute position="file-start" is not supported yet.

• Inline mj-style not working yet.

• mj-accordion does not handle missing children. You need to always provide mj-accordion-text and mj-accordion-title.

Component overview

Head Components:

• mj-attributes
• mj-breakpoint
• mj-font
• mj-html-attributes
• mj-preview
• mj-style
• mj-title

Body Components:

• mj-accordion
• mj-button
• mj-carousel
• mj-column
• mj-divider
• mj-group
• mj-hero
• mj-image
• mj-navbar
• mj-raw
• mj-section
• mj-social
• mj-spacer
• mj-table
• mj-text
• mj-wrapper

Good to know

The original mjml implementation works differently than the blade compiler. MJML renders recursively, which means that a parent component calls the render function of all its childern and can provide a context or wrap them. The blade compiler works differently. First it compiles the blade view into a php file, then it "just" runs the php file. We cannot provide a context programmatically, because the blade compiler does not know about the context of the parent component.

(Blade do not really know that it is working with html. It does not care, it does not do any html analysis or anything like that. It is just string manipulation.)

This is the biggest challenge of this package. This is why we keep a context stack and a global context.

For example, we need to wrap the child components of a column into a table, which in mjml is done in the mj-column component.

Another challenge was to find out how many siblings a colum has. In the component we don't have any access to the parent html or whatsoever. Now this package "precompiles" the mjml and sets the siblings as an attribute.

The precompilation also changes <mj-> tp <x-mj-> so that the blade compiler can handle it correctly.

Installation

Install the package via composer:

composer require colq2/blade-mjml

Usage

Just put mjml template into your blade files and use the view for sending emails.

Relevant documentation for laravel and mjml:

• Sending Emails in Laravel
• MJML Documentation

// resources/views/mail/mjml-example.blade.php
<mjml>
    <mj-body>
        <mj-section>
            <mj-column>
                <mj-image width="100px" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
                <mj-divider border-color="#F45E43"></mj-divider>
                <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

And use the view in your mail class:

public function content(): Content
{
    return new Content(
        view: 'mail.mjml-example',
    );
}

Or render it directly as a view:

Route::get('/mjml-example', function () {
    return view('mail.mjml-example');
});

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• colq2
• All Contributors

License

The MIT License (MIT). Please see License File for more information.