{"id":28752204,"url":"https://github.com/yankovsky/react-to-email","last_synced_at":"2026-05-09T06:35:53.168Z","repository":{"id":139425962,"uuid":"379972510","full_name":"Yankovsky/react-to-email","owner":"Yankovsky","description":"Create static html files with inlined css using React","archived":false,"fork":false,"pushed_at":"2021-06-25T08:26:05.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T23:09:44.526Z","etag":null,"topics":["email","inline-css","proof-of-concept","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yankovsky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2021-06-24T15:34:03.000Z","updated_at":"2021-06-25T08:33:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"8300a9ef-31dc-46eb-9f13-e559a57c5806","html_url":"https://github.com/Yankovsky/react-to-email","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Yankovsky/react-to-email","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yankovsky%2Freact-to-email","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yankovsky%2Freact-to-email/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yankovsky%2Freact-to-email/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yankovsky%2Freact-to-email/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yankovsky","download_url":"https://codeload.github.com/Yankovsky/react-to-email/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yankovsky%2Freact-to-email/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32809929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","inline-css","proof-of-concept","react","styled-components"],"created_at":"2025-06-16T23:09:43.346Z","updated_at":"2026-05-09T06:35:53.153Z","avatar_url":"https://github.com/Yankovsky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React, styled-components -\u003e static email html\n\nGenerates static html. Uses styled-components for css.\n\n`yarn` to install all dependencies\n\n`yarn dev` to start development in watch mode\n\n`yarn build` to build the code base and \nput all generated html email pages in dist/ folder\n\n# Example usage\n\n```js\nimport React from 'react'\n\nimport { Title } from '../../components/Title'\nimport { Text } from '../../components/Text'\nimport { StyledTable } from './styled'\n\nexport const MyExamplePage = () =\u003e {\n  return \u003cStyledTable\u003e\n    \u003cTitle\u003eMy Title\u003c/Title\u003e\n    \u003cText\u003eMy Text\u003c/Text\u003e\n  \u003c/StyledTable\u003e\n}\n```\n-\u003e \n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eMy Html page\u003c/title\u003e\n\t\u003cstyle data-styled=\"true\" data-styled-version=\"5.3.0\"\u003e\n        .fIhgoC:hover {\n            color: green !important;\n        }\n\n        @media (max-width: 1200px) {\n            .fIhgoC {\n                color: pink !important;\n                background: blue !important;\n            }\n        }\n\t\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style=\"margin:0\"\u003e\n\u003ctable style=\"background: lightcyan; margin: 200px;\"\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003ch1 class=\"fIhgoC\" style=\"color: red;\"\u003eMy Title\u003c/h1\u003e\n\t\t\t\u003cp style=\"font-style: italic; background: lightcoral;\"\u003eMy Text\u003c/p\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Emails FAQ\n\n- our priority is to support Gmail, Outlook and iOS Mail\n- we should use inline styles as much as possible, because only they guaranteed to work in all mail clients\n- pseudo classes and media queries stay inside the embedded \u003cstyle/\u003e tag, because they cannot be inlined,\n  also !important should be added to any rule in these categories to make their specificity higher than inlined styles\n- use tables for layouts\n- we can test emails on litmus, http://testi.at/, or using https://mailchimp.com/help/test-with-inbox-preview/\n- \u003c!DOCTYPE html\u003e must be in resulting html document\n- mailchimp and mail clients can add their own postprocessing \n\n# TODOs\n\n- figure out how to embed images\n- unsubscribe link\n- “Confirm email address” button (will it call some API method or redirect to a page)\n- pass template params to mailchimp\n- responsive?\n- prepare fonts and upload them somewhere\n\n## References and useful resources on creating emails\n\n[https://templates.mailchimp.com/getting-started/html-email-basics/](https://templates.mailchimp.com/getting-started/html-email-basics/)\n\n[https://templates.mailchimp.com/resources/email-client-css-support/](https://templates.mailchimp.com/resources/email-client-css-support/)\n\n[https://www.caniemail.com/](https://www.caniemail.com/)\n\n[https://docs.google.com/spreadsheets/d/1LMIT7wvUHgEncYHtI1TssjICxwa-hDAs9ui0-Lvkido/edit?usp=sharing](https://docs.google.com/spreadsheets/d/1LMIT7wvUHgEncYHtI1TssjICxwa-hDAs9ui0-Lvkido/edit?usp=sharing)\n\n[https://paddle.com/blog/why-we-created-an-email-system-using-react/](https://paddle.com/blog/why-we-created-an-email-system-using-react/)\n\n[https://building.lang.ai/how-to-build-emails-with-react-fcf941b125d1](https://building.lang.ai/how-to-build-emails-with-react-fcf941b125d1)\n\n[Article on how to style emails](https://webcache.googleusercontent.com/search?q=cache:Qpic5sqjfB0J:https://customer.io/blog/how-to-make-css-play-nice-in-html-emails-without-breaking-everything/+\u0026cd=1\u0026hl=en\u0026ct=clnk\u0026gl=ru)\n\n[Responsive emails](https://css-tricks.com/ideas-behind-responsive-emails/)\n\n[Discussion in styled-components repo](https://github.com/styled-components/styled-components/issues/1116)\n\n[Similar approach and stack](https://github.com/acro5piano/react-emailify)\n\n[Some other repo related to the subject](https://github.com/sbekrin/styled-email-components)\n\n[Discussion about react emails](https://spectrum.chat/react/general/how-do-you-write-emails~f60d85ff-3154-4248-86c0-cb3cae65543f)\n\n[Alternative to juice](http://styliner.slaks.net/)\n\n[https://gist.github.com/ArtyomResh/008b285d4a6aec3493bd911661ebe53e](https://gist.github.com/ArtyomResh/008b285d4a6aec3493bd911661ebe53e)\n\n[https://github.com/chromakode/react-html-email](https://github.com/chromakode/react-html-email)\n\n[https://github.com/lang-ai/react-emails](https://github.com/lang-ai/react-emails)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyankovsky%2Freact-to-email","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyankovsky%2Freact-to-email","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyankovsky%2Freact-to-email/lists"}