MJML installs statistics

MJML

MJML preview, lint, compile for Visual Studio Code.

[![GitHub license][license-img]][license-url] [![Visual Studio Marketplace][vs-market-version]][vs-market-url] [![Visual Studio Marketplace installs][vs-market-installs]][vs-market-url] [![Dependencies Status][dependencies-status]][dependencies-status]

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 | | | mjattributes | mj-attributes | | | mjbody | mj-body | | | mjbreakpoint | mj-breakpoint | | | mjbutton | mj-button | | | mjcarousel | mj-carousel | | | mjcarousel-image | mj-carousel-image | | | mjclass | mj-class | | | mjcolumn | mj-column | | | mjdivider | mj-divider | | | mjfont | mj-font | | | mjgroup | mj-group | | | mjhead | mj-head | | | mjhero | mj-hero | | | mjimage | mj-image | | | mjinclude | mj-include | | | mjraw | mj-raw | | | mjsection | mj-section | | | mjsocial | mj-social | | | mjsocialelement | mj-social-element | | | mjstyle | mj-style | | | mjtable | mj-table | | | mjtext | mj-text | | | mjtitle | mj-title | | | mjml | mjml | | | mjpreview | mj-preview | | | mjspacer | mj-spacer | | | mjwrapper | mj-wrapper | | | mjaccordion | mj-accordion | | | mjaccordion-element | mj-accordion-element | ... | | mjnavbar | mj-navbar | | | mjnavbarlink | mj-navbar-link | | | mjlink | mj-link | | | mjml- | | Basic MJML Template |

Nodemailer configuration

Please see the Nodemailer documentation for more information.

Gmail

Mailtrap

Ethereal

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

Description from the VS Code Marketplace listing.