supastarter also includes responsive and customizable mail templates for all supabase mails like invite, password reset and so on.
These templates are built using mjml to make the mail look great on all devices and to make the customization as easy as possible. You can find the mail templates in the /mail-templates folder.
To learn more about mjml, check out the mjml documentation (opens in a new tab).
1. Customize mail templates
You can customize the mail templates by editing the .mjml files. After you have made your changes, you can generate the new mail templates html code. We suggest using mjml extension for VSCode (opens in a new tab).
While editing the mail template it gives you live preview of the output:
To export the mail template as html you can use the command palette with
CMD + Shift + P and
MJML: Export HTML.
The generated html code can then be added in your supabase admin panel.
2. Setup mail templates in supabase
To setup the mail templates in supabase, navigate to Authentiation > Email templates and for every mail copy and paste the html code from the generated files.