MJML

This is a fork of the @mjmlio extension, which itself, is a fork of the original @attilabuti VSC extension.

Differences

Additions:

• mjml.switchOnSeparateFileChange: optionally restrict preview to original file used to open it, reflects external updates.
• Attribute auto-completion within tags.
• CSS property/value completion within mj-style tags.
• HTML tag completion within mj-text tags.
• Updated dependencies.
• <!-- mjml-render -->: add this comment anywhere in a file that doesn't already have an <mjml> tag to enable previewing.
• <!-- mj-head-render ... -->: wraps ... in mj-head tags which are only rendered when previewing with mjml-render.
• Color providers (hover palettes).
• mjml.snippetsInsideComments: optionally prevent snippets/completion items inside HTML and CSS comments.
• cmd (or your configured key) + click relative paths to follow link.
• Linked-editing of tag pairs (if enabled in settings.json under editor.linkedEditing).
• Uses HTMLMinifier and JS Beautifier instead of the native MJML options (as they're now deprecated and will soon be removed).

Removals:

• Template feature.
• Screenshot feature.
• Email sending feature.
• Documentation feature.
• Migration feature.
• mj-link snippet as it's deprecated.

The reason for removing these features is they take up a massive chunk of the overall extension size (over 70mb of a roughly 80mb package).

---

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

It looks like this

Installation

• From the VS Marketplace.
• From the extensions bar in VSCode.

Usage

Start command palette and start typing MJML.

Available commands

The following commands are 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: Open Preview to the Side Opens a preview in a column alongside the current document.
• 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.minifyHtmlOutput	true	Minify HTML output.
mjml.preserveFocus	true	Preserve focus of Text Editor after preview open.
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.switchOnSeparateFileChange	true	Automatically switch preview when editing a different file.
mjml.snippetsInsideComments	true	Determines whether snippets/completion items are triggered inside HTML and CSS comments.

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>
mjml-		Basic MJML Template

Issues

Submit an issue if you find any bug or have any suggestion.

Contribution

Fork the repo and submit pull requests.

Contributors

Main Author: Attila Buti (@attilabuti)

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.