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 Mailjet.
• Code snippets for MJML. Based on mjml-syntax.

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: Export HTML Export HTML file from MJML.
• 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: Copy HTML Copy the result HTML to clipboard.
• MJML: Send Email Send email with Mailjet.

Settings

Name	Default	Description
mjml.lintEnable	true	Enable/disable MJML linter (requires restart).
mjml.lintWhenTyping	true	Whether the linter is run on type or on save.
mjml.updateWhenTyping	true	Update preview when typing.
mjml.preserveFocus	true	Preserve focus of Text Editor after preview open.
mjml.minifyHtmlOutput	true	Minify HTML output.
mjml.beautifyHtmlOutput	false	Beautify HTML output. (Works when mjml.minifyHtmlOutput aren't enabled.)
mjml.screenshotWidth	650	Screenshot width.
mjml.screenshotType	jpg	Screenshot type. Possible values are 'png', 'jpg', and 'jpeg'.
mjml.screenshotQuality	75	Screenshot quality.
mjml.mailjetAPIKey		Mailjet API Key.
mjml.mailjetAPISecret		Mailjet API Secret.
mjml.mailSender		Sender email address. (Mailjet: must be a verified sender.)
mjml.mailFromName		Sender name.
mjml.mailSubject		Email subject.
mjml.mailRecipients		Comma separated list of recipients email addresses.

Snippets

Trigger	URL	Content
mjall	mj-all	<mj-all />
mjattributes	mj-attributes	<mj-attributes></mj-attributes>
mjbody	mj-body	<mj-body></mj-body>
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></mj-column>
mjcontainer	mj-container	<mj-container></mj-container>
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-content></mj-hero-content></mj-hero>
mjhtml	mj-html	<mj-html></mj-html>
mjimage	mj-image	<mj-image src="" />
mjinclude	mj-include	<mj-include path="" />
mjinvoice	mj-invoice	<mj-invoice></mj-invoice>
mjinvoice-item	mj-invoice-item	<mj-invoice-item name="" price="" quantity="" />
mjlocation	mj-location	<mj-location address="" />
mjraw	mj-raw	<mj-raw></mj-raw>
mjsection	mj-section	<mj-section></mj-section>
mjsocial	mj-social	<mj-social />
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>
mjinline-links	mj-inline-links	<mj-inline-links></mj-inline-links>
mjlink	mj-link	<mj-link href=""></mj-link>
mjlist	mj-list	<mj-list></mj-list>
mjml-		Basic MJML Template

Change Log

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

License

This extension is licensed under the MIT License.