{"id":19039064,"url":"https://github.com/ramasilveyra/mjml-loader","last_synced_at":"2025-09-14T06:10:06.913Z","repository":{"id":57298699,"uuid":"64014885","full_name":"ramasilveyra/mjml-loader","owner":"ramasilveyra","description":"MJML loader for webpack","archived":false,"fork":false,"pushed_at":"2019-05-10T11:17:15.000Z","size":67,"stargazers_count":27,"open_issues_count":4,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T04:54:35.540Z","etag":null,"topics":["mjml","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ramasilveyra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-23T12:18:02.000Z","updated_at":"2023-04-08T06:43:55.000Z","dependencies_parsed_at":"2022-08-26T18:02:35.320Z","dependency_job_id":null,"html_url":"https://github.com/ramasilveyra/mjml-loader","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramasilveyra%2Fmjml-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramasilveyra%2Fmjml-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramasilveyra%2Fmjml-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramasilveyra%2Fmjml-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ramasilveyra","download_url":"https://codeload.github.com/ramasilveyra/mjml-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250506140,"owners_count":21441723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mjml","webpack","webpack-loader"],"created_at":"2024-11-08T22:11:45.777Z","updated_at":"2025-04-23T20:11:12.316Z","avatar_url":"https://github.com/ramasilveyra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/mjml-loader\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/mjml-loader.svg?maxAge=86400\" alt=\"Last npm Registry Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/ramasilveyra/mjml-loader?branch=master\"\u003e\n    \u003cimg src=\"https://travis-ci.org/ramasilveyra/mjml-loader.svg?branch=master\" alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/github/ramasilveyra/mjml-loader?branch=master\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/ramasilveyra/mjml-loader.svg?branch=master\" alt=\"Code coverage\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eMJML loader for webpack\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eConverts MJML files to HTML and exports them as string.\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eTable of Contents\u003c/h2\u003e\n\n- [Install](#install)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Contribute](#contribute)\n- [License](#license)\n\n\u003ch2 align=\"center\"\u003eInstall\u003c/h2\u003e\n\n**Node.js v6.5 or newer** is required.\n\n**webpack 2 or newer** is required.\n\nVia the yarn client:\n\n```bash\n$ yarn add --dev mjml-loader webpack\n```\n\nVia the npm client:\n\n```bash\n$ npm install --save-dev mjml-loader webpack\n```\n\n\u003ch2 align=\"center\"\u003eUsage\u003c/h2\u003e\n\n\n[Look into the official webpack loaders usage documentation](https://webpack.js.org/concepts/loaders/#using-loaders).\n\nAt this moment this loader has no options.\n\n\u003ch2 align=\"center\"\u003eExamples\u003c/h2\u003e\n\n### Compile MJML file to HTML file\n\nFor transforming a MJML file to a HTML file is better to use [`mjml cli`](https://www.npmjs.com/package/mjml-cli) or [`gulp-mjml`](https://www.npmjs.com/package/gulp-mjml).\n\n### Inline the MJML result (HTML) into bundle\n\nWith this configuration:\n\n```javascript\n{\n  // ...\n  module: {\n    rules: [\n      { test: /\\.mjml$/, loader: 'mjml-loader' }\n    ]\n  }\n  // ...\n}\n```\n\nWith this MJML file:\n\n`template.mjml`\n```xml\n \u003cmjml\u003e\n  \u003cmj-body\u003e\n    \u003cmj-container\u003e\n      \u003cmj-section\u003e\n        \u003cmj-column\u003e\n          \u003cmj-text\u003eHello World!\u003c/mj-text\u003e\n        \u003c/mj-column\u003e\n      \u003c/mj-section\u003e\n    \u003c/mj-container\u003e\n  \u003c/mj-body\u003e\n\u003c/mjml\u003e\n```\n\nThis entry point:\n\n`index.js`\n```javascript\nimport template from './template.mjml';\nconsole.log(template);\n```\n\nThe console output will be:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\"\u003e\n\u003chead\u003e\n\u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"\u003e\n\u003ctitle\u003e\u003c/title\u003e\n\u003cstyle type=\"text/css\"\u003e\n  #outlook a { padding: 0; }\n  .ReadMsgBody { width: 100%; }\n  .ExternalClass { width: 100%; }\n  .ExternalClass * { line-height:100%; }\n  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }\n  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }\n  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }\n  p { display: block; margin: 13px 0; }\n\u003c/style\u003e\n\u003c!--[if !mso]\u003e\u003c!--\u003e\n\u003cstyle type=\"text/css\"\u003e\n  @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\n\u003c/style\u003e\n\u003cstyle type=\"text/css\"\u003e\n  @media only screen and (max-width:480px) {\n    @-ms-viewport { width:320px; }\n    @viewport { width:320px; }\n  }\n\u003c/style\u003e\n\u003clink href=\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\"\u003e\n\u003c!--\u003c![endif]--\u003e\n\u003cstyle type=\"text/css\"\u003e\n  @media only screen and (min-width:480px) {\n    .mj-column-per-100, * [aria-labelledby=\"mj-column-per-100\"] { width:100%!important; }\n  }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv\u003e\u003c!--[if mso]\u003e\n      \u003ctable border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" align=\"center\" style=\"width:600px;\"\u003e\u003ctr\u003e\u003ctd\u003e\n      \u003c![endif]--\u003e\u003cdiv style=\"margin:0 auto;max-width:600px;\"\u003e\u003ctable cellpadding=\"0\" cellspacing=\"0\" style=\"font-size:0;width:100%;\" align=\"center\" border=\"0\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"text-align:center;vertical-align:top;font-size:0;padding:20px 0;\"\u003e\u003c!--[if mso]\u003e\n      \u003ctable border=\"0\" cellpadding=\"0\" cellspacing=\"0\"\u003e\u003ctr\u003e\u003ctd style=\"vertical-align:top;width:600px;\"\u003e\n      \u003c![endif]--\u003e\u003cdiv aria-labelledby=\"mj-column-per-100\" class=\"mj-column-per-100\" style=\"vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;\"\u003e\u003ctable cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" border=\"0\"\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd style=\"word-break:break-word;font-size:0;padding:10px 25px;\" align=\"left\"\u003e\u003cdiv style=\"cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;\"\u003eHello World!\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\u003c!--[if mso]\u003e\n      \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n      \u003c![endif]--\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\u003c!--[if mso]\u003e\n      \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n      \u003c![endif]--\u003e\n      \u003c!--[if mso]\u003e\n      \u003ctable border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" align=\"center\" style=\"width:600px;\"\u003e\u003ctr\u003e\u003ctd\u003e\n      \u003c![endif]--\u003e\u003cdiv\u003e\u003c/div\u003e\u003c!--[if mso]\u003e\n      \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n      \u003c![endif]--\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003ch2 align=\"center\"\u003eContribute\u003c/h2\u003e\n\nFeel free to dive in! [Open an issue](https://github.com/ramasilveyra/mjml-loader/issues/new) or submit PRs.\n\nmjml-loader follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.\n\n\u003ch2 align=\"center\"\u003eLicense\u003c/h2\u003e\n\n[MIT © Ramiro Silveyra d'Avila](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framasilveyra%2Fmjml-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framasilveyra%2Fmjml-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framasilveyra%2Fmjml-loader/lists"}