{"id":13528304,"url":"https://github.com/GrapesJS/mjml","last_synced_at":"2025-04-01T11:31:16.288Z","repository":{"id":21068105,"uuid":"91735667","full_name":"GrapesJS/mjml","owner":"GrapesJS","description":"Newsletter Builder with MJML components in GrapesJS","archived":false,"fork":false,"pushed_at":"2024-10-12T07:55:35.000Z","size":7528,"stargazers_count":665,"open_issues_count":21,"forks_count":235,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-03-24T11:57:32.241Z","etag":null,"topics":["builder","editor","newsletter","wysiwyg"],"latest_commit_sha":null,"homepage":"http://grapesjs.com/demo-mjml.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GrapesJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-18T20:38:15.000Z","updated_at":"2025-03-17T08:33:23.000Z","dependencies_parsed_at":"2024-09-28T06:31:16.732Z","dependency_job_id":"c393cdf8-6c47-48e6-b9f5-b5acce803397","html_url":"https://github.com/GrapesJS/mjml","commit_stats":{"total_commits":424,"total_committers":40,"mean_commits":10.6,"dds":0.5235849056603774,"last_synced_commit":"b96c64610010cef57a656a97aa134fb265ff3749"},"previous_names":["artf/grapesjs-mjml"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fmjml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fmjml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fmjml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fmjml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrapesJS","download_url":"https://codeload.github.com/GrapesJS/mjml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246112666,"owners_count":20725301,"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":["builder","editor","newsletter","wysiwyg"],"created_at":"2024-08-01T06:02:24.748Z","updated_at":"2025-04-01T11:31:15.862Z","avatar_url":"https://github.com/GrapesJS.png","language":"TypeScript","readme":"# GrapesJS MJML\n\n\u003e Requires GrapesJS v0.15.9 or higher\n\n[![build](https://github.com/artf/grapesjs-mjml/workflows/build/badge.svg)](https://github.com/artf/grapesjs-mjml/actions)\n\nThis plugin enables the usage of [MJML](https://mjml.io/) components inside the GrapesJS environment. MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the [MJML Live Editor](https://mjml.io/try-it-live).\n\n\n[Demo](http://grapesjs.com/demo-mjml.html)\n\nSupported MJML components (using default mjml-browser parser):\n`mj-mjml`\n`mj-head`\n`mj-body`\n`mj-wrapper`\n`mj-group`\n`mj-section`\n`mj-column`\n`mj-text`\n`mj-image`\n`mj-button`\n`mj-social`\n`mj-social-element`\n`mj-divider`\n`mj-spacer`\n`mj-style`\n`mj-font`\n`mj-hero`\n`mj-navbar`\n`mj-navbar-link`\n`mj-raw`\n\n\n## Options\n\n|Option|Description|Default|\n|-|-|-\n|`blocks`|Which blocks to add|(all)|\n|`block`|Add custom block options, based on block id.|`(blockId) =\u003e ({})`|\n|`codeViewerTheme`|Code viewer theme.|`hopscotch`|\n|`customComponents`|List of components which will be added to default one |`[]` |\n|`importPlaceholder`|Placeholder MJML template for the import modal|`''`|\n|`imagePlaceholderSrc`|Image placeholder source|`'https://via.placeholder.com/350x250/78c5d6/fff'`|\n|`i18n`|I18n object containing language [more info](https://grapesjs.com/docs/modules/I18n.html#configuration)|`{}`|\n|`mjmlParser`|Custom [mjml-browser](https://www.npmjs.com/package/mjml-browser) instance. Allows to extend MJML functionality or add custom MJML components |`(input: string \\| MJMLJsonObject, opt: MJMLParsingOptions) =\u003e MJMLParseResults`|\n|`overwriteExport`|Overwrite default export command|`true`|\n|`preMjml`|String before the MJML in export code|`''`|\n|`postMjml`|String after the MJML in export code|`''`|\n|`resetBlocks`|Clean all previous blocks if true|`true`|\n|`resetDevices`|Clean all previous devices and set a new one for mobile|`true`|\n|`resetStyleManager`|Reset the Style Manager and add new properties for MJML|`true`|\n|`resetDevices`|Clean all previous devices and set a new one for mobile|`true`|\n|`hideSelector`|Hide the default selector manager|`true`|\n|`useXmlParser`|Experimental: use XML parser instead of HTML. This should allow importing void MJML elements (without closing tags) like `\u003cmj-image/\u003e`|`false`|\n|`columnsPadding`|Column padding (this way it's easier to select columns)|`10px 0`|\n|`useCustomTheme`|Load custom preset theme|`true`|\n\n\n## Download\n\n* `npm i grapesjs-mjml`\n\n\n\n## Usage\n\n```html\n\u003clink href=\"path/to/grapes.min.css\" rel=\"stylesheet\"/\u003e\n\u003cscript src=\"path/to/grapes.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/grapesjs-mjml.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"gjs\"\u003e\n  \u003cmjml\u003e\n    \u003cmj-body\u003e\n      \u003c!-- Your MJML body here --\u003e\n      \u003cmj-section\u003e\n        \u003cmj-column\u003e\n          \u003cmj-text\u003eMy Company\u003c/mj-text\u003e\n        \u003c/mj-column\u003e\n      \u003c/mj-section\u003e\n    \u003c/mj-body\u003e\n  \u003c/mjml\u003e\n\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  const editor = grapesjs.init({\n      fromElement: true,\n      container: '#gjs',\n      plugins: ['grapesjs-mjml'],\n      pluginsOpts: {\n        'grapesjs-mjml': {/* ...options */}\n      }\n  });\n\u003c/script\u003e\n```\n\n#### Or using ESM imports:\n\n```js\nimport 'grapesjs/dist/css/grapes.min.css'\nimport grapesJS from 'grapesjs'\nimport grapesJSMJML from 'grapesjs-mjml'\n\ngrapesJS.init({\n   fromElement: true,\n   container: '#gjs',\n   plugins: [grapesJSMJML],\n   pluginsOpts: {\n      [grapesJSMJML]: {/* ...options */}\n   },\n});\n```\n\n#### i18n usage:\n\n```js\nimport 'grapesjs/dist/css/grapes.min.css'\nimport grapesJS from 'grapesjs'\nimport nl from 'grapesjs/locale/nl'\nimport grapesJSMJML from 'grapesjs-mjml'\nimport mjmlNL from 'grapesjs-mjml/locale/nl'\n\ngrapesJS.init({\n   fromElement: true,\n   container: '#gjs',\n   i18n: {\n      // locale: 'en', // default locale\n      // detectLocale: true, // by default, the editor will detect the language\n      // localeFallback: 'en', // default fallback\n      messages: { nl: nl },\n   },\n   plugins: [grapesJSMJML],\n   pluginsOpts: {\n      [grapesJSMJML]: {\n        // Optional options\n        i18n: { nl: mjmlNL }\n      }\n   },\n});\n```\n\n### Using Independent mjml-browser Build\n\nIn case, you have your own version of MJML with custom or extended components, it is possible\nto override default [mjml parser](https://github.com/mjmlio/mjml/tree/master/packages/mjml-browser)\nwith custom one and create custom grapesJS components.\n\nFor further info how to create MJML Component, you can\n[visit components folder](https://github.com/GrapesJS/mjml/tree/master/src/components)\nor you can go to [docs](https://grapesjs.com/docs/modules/Components.html#define-custom-component-type).\n\n```ts\nimport 'grapesjs/dist/css/grapes.min.css'\nimport grapesJS from 'grapesjs'\nimport grapesJSMJML from 'grapesjs-mjml'\nimport customMjmlParser from 'custom-mjml-parser';\n\nimport customImage from 'custom/components/path'\n\ngrapesJS.init({\n   fromElement: true,\n   container: '#gjs',\n   plugins: [grapesJSMJML],\n   pluginsOpts: {\n      [grapesJSMJML]: {\n        mjmlParser: customMjmlParser,\n        customComponents: [\n          customImage,\n        ]\n      }\n   },\n});\n```\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/GrapesJS/mjml.git\n$ cd mjml\n```\n\nInstall it\n\n```sh\n$ npm i\n```\n\nStart the dev server\n\n```sh\n$ npm start\n```\n\n## Releasing\n\n1) Run `npm run v:patch` to bump the version in package.json and create a git tag\n2) Push the commit + new tag\n3) Go to github and draft a new release\n4) Select the new tag and add some release notes\n5) Hit publish, the release will automatically publish to npm\n\n## License\n\nBSD 3-Clause\n","funding_links":[],"categories":["TypeScript","editor"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrapesJS%2Fmjml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGrapesJS%2Fmjml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrapesJS%2Fmjml/lists"}