This repo is archived

MJML

MJML preview, lint, compile for Visual Studio Code.

Features

Live preview for MJML files. Preview updates as you type. Preview based on html-preview-vscode.
Inline errors (squiggle underlines). Linter based on atom-linter-mjml.
Export HTML file from MJML.
Copy the result HTML to clipboard.
Take a screenshot of the rendered MJML document.
Send email with Nodemailer or Mailjet.
Code snippets for MJML. Based on mjml-syntax.
Fetch official templates. Based on mjml-app.
Beautify MJML code.
Migrate a template from MJML 3 to MJML 4.
MJML syntax highlight. Based on mjml-syntax.
Built-in MJML documentation with Try it live support.

It looks like this

Installation

Press F1, type ext install vscode-mjml.

Usage

Start command palette (with Ctrl+Shift+P or F1) and start typing MJML.

Available commands

The following command is available:

MJML: Beautify or Format Document Beautify MJML code.
MJML: Copy HTML Copy the result HTML to clipboard.
MJML: Export HTML Export HTML file from MJML.
MJML: Migrate Migrate a template from MJML 3 to MJML 4.
MJML: Multiple Screenshots Take multiple screenshots of the rendered MJML document.
MJML: Open Preview to the Side Opens a preview in a column alongside the current document.
MJML: Screenshot Take a screenshot of the rendered MJML document, and save it as a file.
MJML: Send Email Send email with Nodemailer or Mailjet.
MJML: Template Fetch official templates.
MJML: Documentation open the MJML documentation.
MJML: Search in MJML documentation search for the selected mj-element in the MJML documentation.
MJML: Version Shows the version of MJML.

Settings

Name	Default	Description
`mjml.autoPreview`	`false`	Automatically update preview when switching between MJML documents.
`mjml.beautifyHtmlOutput`	`false`	Beautify HTML output. (Works when `mjml.minifyHtmlOutput` aren't enabled.)
`mjml.beautify`		Beautify options (available options).
`mjml.exportType`	`.html`	Specifies the file type of the output file.
`mjml.lintEnable`	`true`	Enable/disable MJML linter (requires restart).
`mjml.lintWhenTyping`	`true`	Whether the linter is run on type or on save.
`mjml.mailFromName`		Sender name.
`mjml.mailRecipients`		Comma separated list of recipients email addresses.
`mjml.mailSender`		Sender email address. (Mailjet: must be a verified sender.)
`mjml.mailSubject`		Email subject.
`mjml.mailer`	`mailjet`	Send email with Nodemailer or Mailjet. Possible values are 'nodemailer' and 'mailjet'.
`mjml.mailjetAPIKey`		Mailjet API Key.
`mjml.mailjetAPISecret`		Mailjet API Secret.
`mjml.minifyHtmlOutput`	`true`	Minify HTML output.
`mjml.nodemailer`	`{}`	Nodemailer configuration. Please see the Nodemailer documentation for more information.
`mjml.preserveFocus`	`true`	Preserve focus of Text Editor after preview open.
`mjml.screenshotQuality`	`75`	Screenshot quality.
`mjml.screenshotType`	`jpg`	Screenshot type. Possible values are 'png', 'jpg', and 'jpeg'.
`mjml.screenshotWidth`	`650`	Screenshot width.
`mjml.screenshotWidths`	`640,750`	Screenshot widths.
`mjml.updateWhenTyping`	`true`	Update preview when typing.
`mjml.previewBackgroundColor`		Preview background color.
`mjml.autoClosePreview`	`true`	Automatically close preview when all open MJML documents have been closed.
`mjml.showSaveDialog`	`false`	Show the save as dialog instead of input box.
`mjml.templateGallery`	`false`	Show the template gallery instead of quick pick.
`mjml.templateGalleryAutoClose`	`true`	Automatically close template gallery when selecting a template.

Snippets

Trigger	URL	Content
`mjall`	mj-all	`<mj-all />`
`mjattributes`	mj-attributes	`<mj-attributes></mj-attributes>`
`mjbody`	mj-body	`<mj-body></mj-body>`
`mjbreakpoint`	mj-breakpoint	`<mj-breakpoint width="" />`
`mjbutton`	mj-button	`<mj-button></mj-button>`
`mjcarousel`	mj-carousel	`<mj-carousel></mj-carousel>`
`mjcarousel-image`	mj-carousel-image	`<mj-carousel-image src="" />`
`mjclass`	mj-class	`<mj-class name="" />`
`mjcolumn`	mj-column	`<mj-column width=""></mj-column>`
`mjdivider`	mj-divider	`<mj-divider />`
`mjfont`	mj-font	`<mj-font name="" href="" />`
`mjgroup`	mj-group	`<mj-group></mj-group>`
`mjhead`	mj-head	`<mj-head></mj-head>`
`mjhero`	mj-hero	`<mj-hero></mj-hero>`
`mjimage`	mj-image	`<mj-image src="" alt="" />`
`mjinclude`	mj-include	`<mj-include path="" />`
`mjraw`	mj-raw	`<mj-raw></mj-raw>`
`mjsection`	mj-section	`<mj-section></mj-section>`
`mjsocial`	mj-social	`<mj-social></mj-social>`
`mjsocialelement`	mj-social-element	`<mj-social-element></mj-social-element>`
`mjstyle`	mj-style	`<mj-style></mj-style>`
`mjtable`	mj-table	`<mj-table></mj-table>`
`mjtext`	mj-text	`<mj-text></mj-text>`
`mjtitle`	mj-title	`<mj-title></mj-title>`
`mjml`	mjml	`<mjml></mjml>`
`mjpreview`	mj-preview	`<mj-preview></mj-preview>`
`mjspacer`	mj-spacer	`<mj-spacer height="" />`
`mjwrapper`	mj-wrapper	`<mj-wrapper></mj-wrapper>`
`mjaccordion`	mj-accordion	`<mj-accordion></mj-accordion>`
`mjaccordion-element`	mj-accordion-element	`<mj-accordion-element>...</mj-accordion-element>`
`mjnavbar`	mj-navbar	`<mj-navbar></mj-navbar>`
`mjnavbarlink`	mj-navbar-link	`<mj-navbar-link></mj-navbar-link>`
`mjlink`	mj-link	`<mj-link href=""></mj-link>`
`mjml-`		Basic MJML Template

Nodemailer configuration

Please see the Nodemailer documentation for more information.

Gmail

"mjml.nodemailer": {
    "service": "Gmail",
    "auth": {
        "user": "youremail@gmail.com",
        "pass": "password"
    }
}

Mailtrap

"mjml.nodemailer": {
    "host": "smtp.mailtrap.io",
    "port": 2525,
    "auth": {
        "user": "username",
        "pass": "password"
    }
}

Ethereal

"mjml.nodemailer": {
    "host": "smtp.ethereal.email",
    "port": 587,
    "auth": {
        "user": "youremail@ethereal.email",
        "pass": "password"
    }
}

Change Log

[1.6.0] (2018-10-28)

[new] Configuration property mjml.templateGallery: Show the template gallery instead of quick pick.
[new] Configuration property mjml.templateGalleryAutoClose: Automatically close template gallery when selecting a template.
#42 #43: fixed beautify issues.
[new] #47 MJML: Version: Shows the version of MJML.
.mjmlconfig is working again.
MJML 4.2.0
Other improvements and bugfixes.

[1.5.1] (2018-10-03)

#41: fixed preview issue.
#40: fixed comment issue.

[1.5.0] (2018-09-28)

[new] Configuration property mjml.previewBackgroundColor: preview background color (#39).
[new] Configuration property mjml.showSaveDialog: show the save as dialog instead of input box.
[new] Configuration property mjml.autoClosePreview: automatically close preview when all open MJML documents have been closed.
[new] MJML: Documentation: open the MJML documentation.
[new] MJML: Search in MJML documentation: search for the selected mj-element in the MJML documentation.
#38: added support for beautify mj-style.
#35: show more useful information on error in sending the email.
#29: merged pull request.
MJML syntax highlight with CSS support.
The PreviewManager has been completely rewritten.
Built-in MJML documentation with Try it live support.
Search in MJML documentation from context menu.
MJML 4.1.2
Some other improvements.

[1.4.0] (2018-07-14)

#30: fixed PhantomJS rebuild issue.
#27 #31: fixed rendering issue.
MJML 4.1.0
Some other improvements.

[1.3.0] (2018-05-15)

[new] Configuration property mjml.autoPreview: Automatically update preview when switching between MJML documents.
MJML 4.0.5
Various fixes and other improvements.

[1.2.1] (2018-04-15)

#24: fixed.
Dependency updates.

[1.2.0] (2018-03-26)

[new] Configuration property mjml.mailer: send email with Nodemailer or Mailjet. Possible values are 'nodemailer' and 'mailjet'.
[new] Configuration property mjml.nodemailer: Nodemailer configuration. Please see the Nodemailer documentation for more information.
Send email with Nodemailer.
Added support for inline images (automatically generated from local images).
New preview icon.
Some other improvements.
MJML 4.0.3

[1.1.0] (2018-03-18)

[new] Configuration property mjml.exportType: Specifies the file type of the output file.
MJML: Export HTML: allows to specify the exported file type (e.g. example.html or .pug).
MJML 4.0.2

[1.0.0] (2018-03-07)

[new] MJML: Migrate: Migrate a template from MJML 3 to MJML 4.
Change to Semantic Versioning.
Some fixes.
MJML 4.0.0

[0.1.0] (2017-12-14)

[new] MJML: Beautify: #8 Beautify MJML code.
#15: fixed preview cache issue.
Some other improvements.

[0.0.9] (2017-10-06)

[new] Configuration property mjml.screenshotWidths: Screenshot widths.
[new] MJML: Multiple Screenshots: #13 Take multiple screenshots of the rendered MJML document.
[new] MJML: Template: Fetch official templates from source. Based on mjml-app.
Some other small improvements.
MJML 3.3.5

[0.0.8] (2017-09-04)

#10: added MJML snippets. Based on mjml-syntax.

[0.0.7] (2017-07-21)

#5: .mjmlconfig is now supported.
[new] Configuration property mjml.mailjetAPIKey: Mailjet API Key.
[new] Configuration property mjml.mailjetAPISecret: Mailjet API Secret.
[new] Configuration property mjml.mailSender: Sender email address. (Mailjet: must be a verified sender.)
[new] Configuration property mjml.mailFromName: Sender name.
[new] Configuration property mjml.mailSubject: Email subject.
[new] Configuration property mjml.mailRecipients: Comma separated list of recipients email addresses.
[new] MJML: Copy HTML: Copy the result HTML to clipboard.
[new] MJML: Send Email: Send email with Mailjet.
Some other small improvements.

[0.0.6] (2017-06-28)

Added PhantomJS-rebuild functionallity in order to build PhantomJS for the propper OS. Based on MarkdownConverter.

[0.0.5] (2017-06-28)

#3: fixed preview issue.
[new] Configuration property mjml.lintWhenTyping: whether the linter is run on type or on save.
[new] Configuration property mjml.minifyHtmlOutput: minify HTML output.
[new] Configuration property mjml.beautifyHtmlOutput: beautify HTML output. (Works when mjml.minifyHtmlOutput aren't enabled.)
[new] Configuration property mjml.screenshotWidth: screenshot width.
[new] Configuration property mjml.screenshotType: screenshot type. Possible values are 'png', 'jpg', and 'jpeg'.
[new] Configuration property mjml.screenshotQuality: screenshot quality.
[new] MJML: Screenshot: Take a screenshot of the rendered MJML document, and save it as a file.
Fixed background-url path issue.
Lint when a MJML file is opened.
Some other small improvements.

[0.0.4] (2017-06-21)

#1: fixed image path issue.
#2: fixed mj-include issue.
[new] Configuration property mjml.preserveFocus: preserve focus of Text Editor after preview open.
[new] Configuration property mjml.updateWhenTyping: update preview when typing.
MJML: Open Preview was renamed to MJML: Open Preview to the Side
MJML: Generate HTML was renamed to MJML: Export HTML
MJML 3.3.3

[0.0.2] (2017-05-08)

Some fixes.

[0.0.1] (2017-05-07)

This is the initial release of this extension.

Issues

Submit the issues if you find any bug or have any suggestion.

Contribution

Fork the repo and submit pull requests.

Contributors

A big thanks to the people that have contributed to this project:

Christian Brevik (@cbrevik) - contributions)
Kevin Oliveira (@kvnol) - contributions)
Joshua Skrzypek (@jskrzypek) - contributions)

License

This extension is licensed under the MIT License.

attilabuti / vscode-mjml