PHPackages garagist/mjml - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. garagist/mjml ActiveNeos-plugin[Utility & Helpers](/categories/utility) garagist/mjml ============= Integrate MJML into Neos. Works great togehter with Garagist.Mautic 0.2.3(3y ago)1286GPL-3.0-or-laterPHPPHP ^8.0 Since Sep 20Pushed 3y ago2 watchersCompare [ Source](https://github.com/Garagist/Garagist.Mjml)[ Packagist](https://packagist.org/packages/garagist/mjml)[ RSS](/packages/garagist-mjml/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (4)Versions (6)Used By (0) Garagist.Mjml ============= [](#garagistmjml) [![Latest stable version](https://camo.githubusercontent.com/d3a6b3bd90b6fd920e499d0a2e8c0aa222912382cc624f1473948c3f156378bf/68747470733a2f2f706f7365722e707567782e6f72672f67617261676973742f6d6a6d6c2f762f737461626c65)](https://packagist.org/packages/garagist/mjml) [![GitHub stars](https://camo.githubusercontent.com/dd51fdcf5fd489732f8a4bb02eeb7515d0d775b31c4430b5799202c015cbc0a6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f47617261676973742f47617261676973742e4d6a6d6c)](https://github.com/Garagist/Garagist.Mjml/stargazers) [![GitHub watchers](https://camo.githubusercontent.com/4e85892795882b0860de3c0ad97f86a20f777e308c33c1b0557232cdd103028b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f47617261676973742f47617261676973742e4d6a6d6c2e737667)](https://github.com/Garagist/Garagist.Mjml/subscription) [![GitHub license](https://camo.githubusercontent.com/51d23fc0fe713c60ee1d3dc261c1e86f9be55901ae61cefd5fe5cb580d9fe2f5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f47617261676973742f47617261676973742e4d6a6d6c)](LICENSE) [![GitHub issues](https://camo.githubusercontent.com/ca475a904e6774e867a095690446368274510af33af8706da0310dc8b694fef2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f47617261676973742f47617261676973742e4d6a6d6c)](https://github.com/Garagist/Garagist.Mjml/issues) [![GitHub forks](https://camo.githubusercontent.com/2fece6e2500e5d65f0bad4b5ef889a63cf2df9c71a7166fcd449a4655752723b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f47617261676973742f47617261676973742e4d6a6d6c)](https://github.com/Garagist/Garagist.Mjml/network) [MJML](https://mjml.io) is a markup language to build responsive email templates by providing a semantic syntax and a rich standard component library. This package adds the Eel Helper for compiling `MJML` markup as well as some Fusion prototypes, which allow using [TailwindCSS](https://tailwindcss.com) like classes. But more about that later. Installation ------------ [](#installation) Add the package to your site package: ``` composer require --no-update garagist/mjml ``` Then run `composer update` in your project root. Usage ----- [](#usage) You can use this package with the official API from [MJML](https://mjml.io) or with [Docker](https://www.docker.com) and the [MJML image from Adrian Rudnik](https://hub.docker.com/r/adrianrudnik/mjml-server). ### Use with the official API from MJML [](#use-with-the-official-api-from-mjml) To use it with the MJML API, set `apiEndpoint` to `true`. You must also set the `applicationID` and the `secretKey`. If you don't want to use the environment variables, you can simply overwrite them in your `Settings.yaml` file. ``` Garagist: Mjml: apiEndpoint: true applicationID: "%env:MJML_API_APPLICATION_ID%" secretKey: "%env:MJML_API_SECRET_KEY%" ``` ### Use with docker [](#use-with-docker) Set the enviroment variable `MJML_API_ENDPOINT`, or set it in your `Settings.yaml`: ``` Garagist: Mjml: apiEndpoint: "mjml:80" ``` ### Development with ddev [](#development-with-ddev) If you use [ddev](https://ddev.com/) for development, you can use the following configuration: ``` version: "3.6" services: mjml: container_name: ddev-${DDEV_SITENAME}-mjml hostname: ${DDEV_SITENAME}-mjml image: adrianrudnik/mjml-server labels: com.ddev.site-name: ${DDEV_SITENAME} com.ddev.approot: $DDEV_APPROOT environment: - HTTP_EXPOSE=8080 - CORS=* - MJML_KEEP_COMMENTS=true - MJML_VALIDATION_LEVEL=strict - MJML_MINIFY=false - MJML_BEAUTIFY=true - HEALTHCHECK=false ``` After that, your MJML endpoint is something like `ddev-DDEV_SITENAME-mjml:80` Mixin to hide nodes ------------------- [](#mixin-to-hide-nodes) This package adds a node type mixin [`Garagist.Mjml:Mixin.Visibility`](Configuration/NodeTypes.Mixin.Visibility.yaml). With this, you can show content nodes only on the website or in the newsletter. Just add the mixin to your content nodes: ``` Foo.Bar:Content.Text: superTypes: Garagist.Mjml:Mixin.Visibility: true ``` Fusion prototypes ----------------- [](#fusion-prototypes) This package adds several Fusion prototypes for easier integration of your `MJML` markup. Let's start with the small ones: ### [`Garagist.Mjml:Presentation.Spacer`](Resources/Private/Fusion/Presentation/Spacer.fusion) [](#garagistmjmlpresentationspacer) This prototype is great for adding a spacer between elements. If you want to add a colored, full-width bar with a height of 40px, you can do it like that: ``` ``` All properties except `fullWidth` and `height` are transferred to the [`mj-section`](https://documentation.mjml.io/#mj-section). ### [`Garagist.Mjml:Presentation.Image`](Resources/Private/Fusion/Presentation/Image.fusion) [](#garagistmjmlpresentationimage) This prototype is a small helper to render [`mj-image`](https://documentation.mjml.io/#mj-image) or [`mj-carousel-image`](https://documentation.mjml.io/#mj-carousel). Inside a [`mj-carousel`](https://documentation.mjml.io/#mj-carousel), set `carousel` to `true` to render a [`mj-carousel-image`](https://documentation.mjml.io/#mj-carousel). #### The `image` property [](#the-image-property) The `image` property is a `Neos.Fusion:DataStructure` where you can pass all options from [`Neos.Neos:ImageUri`](https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-neos-imageuri). #### The `thumbnail` property [](#the-thumbnail-property) The `thumbnail` property is a `Neos.Fusion:DataStructure` where you can pass all options from [`Neos.Neos:ImageUri`](https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-neos-imageuri). This is used to set a different image to have a thumbnail different than the image it's linked to. This has no effect if `carousel` is set to `false`. All properties except `carousel`, `image` and `thumbnail` are transferred to [`mj-image`](https://documentation.mjml.io/#mj-image) or [`mj-carousel-image`](https://documentation.mjml.io/#mj-carousel). ### [`Garagist.Mjml:Presentation.Page`](Resources/Private/Fusion/Presentation/Page.fusion) [](#garagistmjmlpresentationpage) This is the heart of the Fusion MJML prototypes. It generates the `MJML` code, which is compiled to `HTML`. It has the following properties: PropertyDescription`owa`If set to `"desktop"`, switch force desktop version for older (self-hosted) version of Outlook.com that doesn't support media queries. Defaults to `null``lang`Used as `` attribute. Defaults to `null``dir`Used as `` attribute. Defaults to `null``backgroundColor`The general background color (color formats). Defaults to `null``cssClass`Class name, added to the root HTML element created. Defaults to `null``width`Email's width in px. Defaults to `600``title`Defines the document's title that browsers show in the title bar or a page's tab. Defaults to `null``preview`This allows you to set the preview that will be displayed in the inbox of the recipient. If you use [Garagist.Mautic](https://github.com/Garagist/Garagist.Mautic), there is no need to set this, as it will be set automatically. Defaults to `null``attributes`Set [`mj-attributes`](https://documentation.mjml.io/#mj-attributes) in the [`mj-head`](https://documentation.mjml.io/#mj-head). Defaults to `null``htmlAttributes`Set [`mj-html-attributes`](https://documentation.mjml.io/#mj-html-attributes) in the [`mj-head`](https://documentation.mjml.io/#mj-head). Need to be a nested DataStructure where the first key is the `mj-selector` and the children are `mj-html-attribute` (`itemKey` is the name and `item` is the value). Defaults to `null``breakpoint`This allows you to control on which breakpoint the layout should go desktop/mobile. Integer value in pixels. Defaults to `null``head`Additional tags for [`mj-head`](https://documentation.mjml.io/#mj-head). Defaults to `null``content`The content section of the email. Defaults to `null``trackingPixel`Add the markup for the tracking pixel. If you use [Garagist.Mautic](https://github.com/Garagist/Garagist.Mautic), there is no need to set this, as it will be set automatically. Read the setting `Garagist.Mjml.trackingPixel``debugUrl`Debug url for logging. Defaults to `null``defaults`Set some default CSS setting for the email. Look at [`Settings.Garagist.yaml`](Configuration/Settings.Garagist.yaml) to see the defaults. Read the setting `Garagist.Mjml.theme.defaults``colors`Adds colors as [`mj-class`](https://documentation.mjml.io/#mj-attributes). More about this below. Take a look to [`Settings.Garagist.yaml`](Configuration/Settings.Garagist.yaml) to see the defaults. Read the setting `Garagist.Mjml.theme.colors``fontSize`Adds font sizes as [`mj-class`](https://documentation.mjml.io/#mj-attributes). More about this below. Look at [`Settings.Garagist.yaml`](Configuration/Settings.Garagist.yaml) to see the defaults. Read the setting `Garagist.Mjml.theme.fontSize``fontWeight`Adds font weights as [`mj-class`](https://documentation.mjml.io/#mj-attributes). More about this below. Look at [`Settings.Garagist.yaml`](Configuration/Settings.Garagist.yaml) to see the defaults. Read the setting `Garagist.Mjml.theme.fontWeight`#### Colors [](#colors) Adds multiple [`mj-class`](https://documentation.mjml.io/#mj-attributes) tags for each set colors. Here, the color key is prefixed to control each property. Let's assume the following configuration: ``` Garagist: Mjml: theme: colors: black: "#000" tahiti: light: "#67e8f9" DEFAULT: "#06b6d4" dark: "#0e7490" ``` With `` the text color is set to black. With `` the text color is set to `#67e8f9`. A special case is the `DEFAULT` value: This can be reached without specifying `DEFAULT`: ``. - `text-COLOR-PATH` sets `color` - `bg-COLOR-PATH` sets `background-color` - `container-bg-COLOR-PATH` sets `container-background-color` - `inner-bg-COLOR-PATH` sets `inner-background-color` #### Font sizes [](#font-sizes) Adds multiple [`mj-class`](https://documentation.mjml.io/#mj-attributes) tags for each set font sizes. Let's assume the following configuration: ``` Garagist: Mjml: theme: fontSize: xs: pixel: 12 lineHeight: 16px sm: 14 ``` With `` you'll set the font size to 12 pixel and the line height to 16px. With `` you'll set the font size to 14 pixel. #### Font weights [](#font-weights) Adds multiple [`mj-class`](https://documentation.mjml.io/#mj-attributes) tags for each set font-weight. Let's assume the following configuration: ``` Garagist: Mjml: theme: fontWeight: normal: 400 semibold: 600 ``` With `` you'll set the font weight to `400`. With `` you'll set the font weight to `600`. ### [`Garagist.Mjml:Helper.Visibility`](Resources/Private/Fusion/Helper/Visibility.fusion) [](#garagistmjmlhelpervisibility) This small helper reads the property `mjmlVisibility` (from the mixin `Garagist.Mjml:Mixin.Visibility`) and returns `true` or `false` based on the arguments in the request and if the user is in the backend. This prototype is is added to `Neos.Neos:ContentComponent` and `Neos.Neos:Content`) automatically. ### [`Garagist.Mjml:Component`](Resources/Private/Fusion/Component/Component.fusion) [](#garagistmjmlcomponent) This prototype uses `Neos.Fusion:Component` and adds the helper [`Garagist.Mjml:Helper.Visibility`](Resources/Private/Fusion/Helper/Visibility.fusion). ### [`Garagist.Mjml:Page`](Resources/Private/Fusion/Component/Page.fusion) [](#garagistmjmlpage) This prototype uses [`Garagist.Mjml:Presentation.Page`](Resources/Private/Fusion/Presentation/Page.fusion) and sets the following properties: - `language`: Set the `lang` attribute from the `` tag - If `language` is set, this will be used as the language. - If `languageDimension` (set to `language` by default) is present, the language of the `documentNode` will be used. - If no language dimension is set, `Neos.Flow.i18n.defaultLocale` will be used as language. - If none of the above can be set, no language will be defined. - `title`: Try to get the property `titleOverride` or `title` from the `documentNode` - `debugUrl`: Generates the URL of the current URL for the log output Furthermore, various prototypes will be adopted: - `Neos.Neos:ContentCase` - Checks if there is a prototype with `.Mjml` (e.g. `Foo.Bar:Content.Text.Mjml`) and outputs it. - If no prototype is found, it creates a message that the renderer was not found, based on the `Garagist.Mjml.debugOutputMode` setting. The following values are possible: - `true`: Creates a visible warning message - `comment`: Creates a HTML comment with the warning - `false`: Does not output a warning message - By default, the visible warning is issued in the `Development` context, and the warning is hidden in the `Production` context. - `Neos.Neos:NodeUri`: Set `absolute` to `true` - `Neos.Neos:ConvertUris`: - Set `absolute` to `true` - Set `forceConversion` to `true` - Set `externalLinkTarget` to `''` - Set `resourceLinkTarget` to `''` Eel helper ---------- [](#eel-helper) ### `Mjml.compile(mjml, url)` [](#mjmlcompilemjml-url) Compile the `mjml` string to HTML. The `url` is for the log output. ### `Mjml.theme(path)` [](#mjmlthemepath) Get the setting from `Garagist.Mjml.theme`. It is similar to the eel helper `Configuration.setting` with only special treatment for `DEFAULT` values: If you have set these colors: ``` Garagist: Mjml: theme: colors: tahiti: light: "#67e8f9" DEFAULT: "#06b6d4" dark: "#0e7490" ``` `Mjml.theme('colors.tahiti')` will return `#06b6d4` as this is the default value. The other values like `Mjml.theme('colors.tahiti.dark')` etc. will return the corresponding color. In short, it works similar to the [`theme()`](https://tailwindcss.com/docs/functions-and-directives#theme) function in [TailwindCSS](https://tailwindcss.com). ### Health Score 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community9 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 5 Last Release 1320d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto) ![](https://www.gravatar.com/avatar/73795aa56d38a252f4b3dbc303b3ce712fd834dfca14d1a9b8b607ec90fbefa8?d=identicon)[davidspiola](/maintainers/davidspiola) --- Top Contributors [![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (43 commits)") --- Tags hacktoberfestmjmlneoscmspackage ### Embed Badge ![Health badge](/badges/garagist-mjml/health.svg) ``` [![Health](https://phpackages.com/badges/garagist-mjml/health.svg)](https://phpackages.com/packages/garagist-mjml) ``` ### Alternatives [carbon/includeassets Include your assets (css, js) in an easy way into Neos 14228.6k10](/packages/carbon-includeassets)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker)[shel/neos-commandbar A commandbar (CMD+K) for Neos CMS 1614.6k1](/packages/shel-neos-commandbar) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)