Parse HTML string to tailwind components in email

[paulmbw]

Reposting this issue here incase it's more relevant as a discussion rather than an issue

• Maizzle Version: "@maizzle/framework": "^4.4.6"
• Node.js Version: 19.3.0

Hi there,

To start off, this is not so much an issue but more of a feature request. Perhaps I may need to set this as a discussion rather than an issue? Forgive me!

Moving on, the TL;DR: is there a way to parse HTML using Maizzle? I have a frontend application that allows you to customise a newsletter (change the border, font, flex/grid, add images/ videos) all using tailwind. Once you're done, the app sends the html result (using renderToStaticMarkup) via http to an endpoint in my backend service. The service accepts the content and builds a html file which I intend on sending the newsletter via email.

The only thing is, as expected, the raw HTML is being displayed in the html file that is generated by maizzle as shown below:

Is there a way to parse the above string and render the html with all the styles?

[cossssmin]

Have a look here, you may use the render method:

https://maizzle.com/docs/api

[paulmbw]

Ahh, let me try and elaborate on what I am trying to achieve.

In my email service, I am using maizzle to generate the content of the email. I have the following method that reads a transactional.html file - this is the template for my emails:

  const template: string = await renderTemplate("transactional.html"); // renderTemplate internally calls  await Maizzle.render()

I'm then using the mustache library to replace template variables with real data. In this example, inside my transactional.html, I have a template variable named htmlContent as shown below:

transaction.html:

 <div class="m-0 mb-6 font-unna">@{{ htmlContent }}</div>

emailService.ts:

  const view = {
    htmlContent, // this is read from the body of my post request
  };

  const template: string = await renderTemplate("transactional.html"); // reading the email template

  const emailToSend = Mustache.render(template, view); // replace htmlContent with the body from request

When I render emailToSend, I'm getting the result in the above screenshot.

If I've understood your comment correctly, you are suggesting I called the render method from Maizzle. This definitely achieves what I am looking for, however, I am loosing all of the tailwind styling in the process:

.

This is the result I am looking for (I am sending the below html from my frontend app to the email service:

[paulmbw]

Hey @cossssmin do you have any thoughts or suggestions on the best way to approach this? Would really appreciate it 🙏🏾

[paulmbw]

hey @cossssmin would really appreciate any suggestions on this 🙏🏾

[cossssmin]

Don't really know how to help, Maizzle.render() is tested and works fine; if you're seeing tags output on-page, maybe Mustache.render is escaping your HTML. Sorry that I can't be of more help.

[paulmbw]

Thanks @cossssmin - the solution was to add an ampersand as follows:

@{{& htmlContent }}