The resulting email HTML is optimized to work across most popular email clients including Gmail, Apple Mail and Outlook.
Demo email examples based on https://react.email/examples
The content is provided in Google Docs see Project: https://drive.google.com/drive/folders/1uaz_fqzAD5K3giQmfumNAyhyloKUdaVm and styled via github.css.
First, install the doc2 CLI with npm i -g @doc2/cli, then run the doc2.email dev server:
doc2 email --dev
Open http://localhost:3000/github with your browser to see the result. Modify the styles then refresh the page to see the changes applied.
By default, doc2.email will wrap the published content with html, head, body and main tags and map them to react.email components.
The mapping of published content to react.email components is as follows :
html: https://github.com/resendlabs/react-email/tree/main/packages/htmlmeta.preview: https://github.com/resendlabs/react-email/tree/main/packages/previewhead: https://github.com/resendlabs/react-email/tree/main/packages/headbody: https://github.com/resendlabs/react-email/tree/main/packages/bodymain: https://github.com/resendlabs/react-email/tree/main/packages/maina: https://github.com/resendlabs/react-email/tree/main/packages/linkp: https://github.com/resendlabs/react-email/tree/main/packages/texth1, h2, h3, h4, h5, h6: https://github.com/resendlabs/react-email/tree/main/packages/headinghr: https://github.com/resendlabs/react-email/tree/main/packages/hrimg: https://github.com/resendlabs/react-email/tree/main/packages/imgcolumncomponent: https://github.com/resendlabs/react-email/tree/main/packages/sectioncolumn-itemcomponent: https://github.com/resendlabs/react-email/tree/main/packages/column
Create a stylesheet that maps to the pathname of the requested path, for example to style a published doc at the path
/X/Y/Z, create a stylesheet at /X/Y/Z.css. If the pathname is the root /, create an index.css file.
We recommend verifying with https://caniemail.com/ which CSS properties are supported across email clients.
Use query parameters to replace variables for example, the GitHub Access Token email content defines a variable named username and a link to https://github.com/{username}/tokens. By setting the query parameter ?username=doc2-site-bot, you can replace the variable with the provided value.
The styles are deployed to GitHub Pages see https://doc2-site-bot.github.io/email-examples/github.css and proxied as defined in https://docs.google.com/spreadsheets/d/1Px85-PSykVc_Z0LIaW7SuM4x5gqi4EV2F_kF6UWIK0w/edit#gid=221884602.
To learn more, take a look at the following resources:
- doc2.email docs - learn about doc2.email features for authors and developers.
- react.email docs - learn about react.email features and components.