3 ms·
This work looks very promising. "HTML for email" is indeed hard to design and hard to implement. Especially editing on mobile, tablet devices, or asian (two+ by
by adeptima 2y ago
This work looks very promising. "HTML for email" is indeed hard to design and hard to implement. Especially editing on mobile, tablet devices, or asian (two+ bytes japanese, chinese) languages input nightmare.
I do lot of email templating for B2B CRM use cases and decided to opt out for a bit different approach based on slatejs/platejs editor
https://docs.slatejs.org/ https://docs.slatejs.org/
https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate
https://github.com/udecode/plate https://github.com/udecode/plate
The internal representation of email template with variables in slatejs/platejs json format can look like:
{
"type": "h1",
"children": [
{
"text": " Blocks {{template_value}} {{$timenow}}}"
}
],
"id": "1"
}
Can be easily stored in Postgres jsonb. Very easy to add Reacjs base widgets like mentioning, media, diagrams, etc inside of slatejs/platejs editor.
The drawback is that you can't design the exactly the same pixel perfect template.
The better abstraction is probably MJML - https://mjml.io/ https://mjml.io/ ... and yet with slatejs/platejs json format you can copy&paste your editings across various assets in CRM, knowledge base, etc
Storing data in MJML is not a great choise for me
<mj-text align="left" color="#55575d" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding-bottom="0px" padding-top="0px" padding="10px 25px"> ...
Was thinking about using something similar to /SendWithSES/Drag-and-Drop-Email-Designer as the last final step ... but couldn't settle it my brain and most end-users dont care anyway.
Any thoughts on data representations and "Postgres <> Editor > Email HTML > Send button" dataflow is greatly appreciated. Very few people have serious thoughts on the subject.
- shortformblog 2y agoYou can set an <mj-class> at the top of the file for a given design format to simplify your code. So in your example, if you did: <mj-class name="typebox" padding-bottom="0px" padding-top="0px" padding="10px 25px"> <mj-class name="paragraph" color="#55575d" align="left" font-family="Arial, sans-serif" font-size="13px" line-height="22px"> That would allow you to simplify your callbacks to <mj-text mj-class="paragraph typebox"> You can also set CSS classes as well if you need something outside the MJML spec for some reason (which would potentially cover some of your cross-platform concerns). MJML also integrates well with other languages. For example, I use a Craft CMS integration to pull data in via Twig to build complete templates directly from my CMS; there’s also an integration with Eleventy.