Skip to content
MJML preview, lint, compile for Visual Studio Code.
Branch: master
Clone or download
Pull request Compare This branch is 8 commits behind attilabuti:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
images
media
snippets
src
.gitignore
.vscodeignore
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

MJML

MJML preview, lint, compile for Visual Studio Code.

GitHub license Visual Studio Marketplace Visual Studio Marketplace installs 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.

It looks like this

MJML Preview

MJML Lint

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.

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.

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

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

License

This extension is licensed under the MIT License.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.