{"id":13515241,"url":"https://github.com/wix-incubator/mjml-react","last_synced_at":"2025-05-15T02:07:45.306Z","repository":{"id":34044568,"uuid":"136326816","full_name":"wix-incubator/mjml-react","owner":"wix-incubator","description":"React component library to generate the HTML emails on the fly","archived":false,"fork":false,"pushed_at":"2023-04-24T14:06:41.000Z","size":92,"stargazers_count":994,"open_issues_count":3,"forks_count":49,"subscribers_count":87,"default_branch":"master","last_synced_at":"2025-05-12T05:07:37.785Z","etag":null,"topics":["email","email-marketing","email-templates","html","mjml","node","react"],"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/wix-incubator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-06-06T12:39:37.000Z","updated_at":"2025-04-24T20:25:04.000Z","dependencies_parsed_at":"2023-01-15T04:11:03.121Z","dependency_job_id":"18ceb1c8-0ad3-4f52-b84c-78282b815cf7","html_url":"https://github.com/wix-incubator/mjml-react","commit_stats":{"total_commits":103,"total_committers":20,"mean_commits":5.15,"dds":0.4368932038834952,"last_synced_commit":"4cc98e51180ec3ac9c49b2997bea572047d10d0c"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Fmjml-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Fmjml-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Fmjml-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Fmjml-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wix-incubator","download_url":"https://codeload.github.com/wix-incubator/mjml-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259383,"owners_count":22040820,"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":["email","email-marketing","email-templates","html","mjml","node","react"],"created_at":"2024-08-01T05:01:08.216Z","updated_at":"2025-05-15T02:07:45.269Z","avatar_url":"https://github.com/wix-incubator.png","language":"JavaScript","readme":"# mjml-react \u0026middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/wix-incubator/mjml-react/blob/master/LICENSE) \u003ca href=\"https://www.npmjs.com/package/mjml-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/mjml-react.svg\" alt=\"npm version\"\u003e\u003c/a\u003e [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/wix-incubator/mjml-react/pulls)\n\n---\n\n## NOTICE: This project is no longer maintained. :warning:\n\nThis project is no longer maintained. There will be no more new features, fixes and releases. Feel free to fork this repository, use different build system and release this project under different name.\n\nKnown forks:\n\n* [Faire mjml-react fork](https://github.com/Faire/mjml-react)\n\n---\n\n\u003cimg src=\"https://cdn.worldvectorlogo.com/logos/mjml-by-mailjet.svg\" height=\"64\"/\u003e \u0026middot; \u003cimg src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K\" width=\"64\" height=\"64\"/\u003e\n\nThere is an awesome library [mjml](https://mjml.io/) with github repo here [https://github.com/mjmlio/mjml](https://github.com/mjmlio/mjml).\n\n`MJML` is a markup language created by [Mailjet](https://www.mailjet.com/).\nSo in order to create emails on the fly we created a library with `React` components.\n\n## How it works\n\nInstall the required dependencies first:\n\n```bash\nnpm install react react-dom mjml mjml-react\n```\n\nAnd afterwards write a code like a pro:\n\n```js\nimport {\n  render,\n  Mjml,\n  MjmlHead,\n  MjmlTitle,\n  MjmlPreview,\n  MjmlBody,\n  MjmlSection,\n  MjmlColumn,\n  MjmlButton,\n  MjmlImage,\n} from \"mjml-react\";\n\nconst { html, errors } = render(\n  \u003cMjml\u003e\n    \u003cMjmlHead\u003e\n      \u003cMjmlTitle\u003eLast Minute Offer\u003c/MjmlTitle\u003e\n      \u003cMjmlPreview\u003eLast Minute Offer...\u003c/MjmlPreview\u003e\n    \u003c/MjmlHead\u003e\n    \u003cMjmlBody width={500}\u003e\n      \u003cMjmlSection fullWidth backgroundColor=\"#efefef\"\u003e\n        \u003cMjmlColumn\u003e\n          \u003cMjmlImage src=\"https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg\" /\u003e\n        \u003c/MjmlColumn\u003e\n      \u003c/MjmlSection\u003e\n      \u003cMjmlSection\u003e\n        \u003cMjmlColumn\u003e\n          \u003cMjmlButton\n            padding=\"20px\"\n            backgroundColor=\"#346DB7\"\n            href=\"https://www.wix.com/\"\n          \u003e\n            I like it!\n          \u003c/MjmlButton\u003e\n        \u003c/MjmlColumn\u003e\n      \u003c/MjmlSection\u003e\n    \u003c/MjmlBody\u003e\n  \u003c/Mjml\u003e,\n  { validationLevel: \"soft\" }\n);\n```\n\nAnd as the result you will get a nice looking email HTML (works in mobile too!)\n\n![preview](https://user-images.githubusercontent.com/10008149/41058394-59b8ce9e-69d2-11e8-9eb9-c294f35bae9f.png)\n\n## Options\n\nmjml-react sets the following MJML options when rendering to HTML:\n\n```js\n{\n  keepComments: false,\n  beautify: false,\n  minify: true,\n  validationLevel: 'strict'\n}\n```\n\nIf you want to override these, you can pass an object to `render` as a second argument. See the [MJML docs](https://documentation.mjml.io/#inside-node-js) for the full list of options you can set.\n\n## Extensions\n\n```js\nimport {\n  MjmlHtml,\n  MjmlComment,\n  MjmlConditionalComment\n} from 'mjml-react/extensions';\n\n\u003cMjmlComment\u003eBuilt with ... at ...\u003c/MjmlComment\u003e\n// \u003c!--Built with ... at ...--\u003e\n\n\u003cMjmlConditionalComment\u003eMSO conditionals\u003c/MjmlConditionalComment\u003e\n// \u003c!--[if gte mso 9]\u003eMSO conditionals\u003c![endif]--\u003e\n\n\u003cMjmlConditionalComment condition=\"if IE\"\u003eMSO conditionals\u003c/MjmlConditionalComment\u003e\n// \u003c!--[if IE]\u003eMSO conditionals\u003c![endif]--\u003e\n\n\u003cMjmlHtml tag=\"div\" html=\"\u003cspan\u003eHello World!\u003c/span\u003e\" /\u003e\n// \u003cdiv\u003e\u003cspan\u003eHello World!\u003c/span\u003e\u003c/div\u003e\n```\n\n## Utils\n\nWe do have also some utils for post processing the output HTML.\nBecause not all mail clients do support named HTML entities, like `\u0026apos;`.\nSo we need to replace them to hex.\n\n```js\nimport { namedEntityToHexCode, fixConditionalComment } from \"mjml-react/utils\";\n\nconst html = \"\u003cdiv\u003e\u0026apos;\u003c/div\u003e\";\nnamedEntityToHexCode(html);\n// \u003cdiv\u003e\u0026#39;\u003c/div\u003e\n\nfixConditionalComment(\n  \"\u003c!--[if mso]\u003e\u003cdiv\u003eHello World\u003c/div\u003e\u003c![endif]--\u003e\",\n  \"Hello\",\n  \"if IE\"\n);\n// \u003c!--[if IE]\u003e\u003cdiv\u003eHello World\u003c/div\u003e\u003c![endif]--\u003e\n```\n\n## Limitations\n\nCurrently `mjml` and `mjml-react` libraries are meant to be run inside a node.\n\n## Example project\n\nYou can find an example project here\n[https://github.com/wix-incubator/mjml-react-example](https://github.com/wix-incubator/mjml-react-example)\n","funding_links":[],"categories":["JavaScript","Tools","Github Repositories"],"sub_categories":["Frontend Development"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Fmjml-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwix-incubator%2Fmjml-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Fmjml-react/lists"}