Machines process JSON; people process visuals. To build automations that truly provide value to a business, you must be able to present your data in a clean, professional, and actionable format.
1The Templating Engine
Data transformation is more than just swapping brackets for tags. It's about building a Templating Engine within your workflow. By initializing an HTML skeleton and looping through your JSON items, you create a dynamic document that expands or contracts based on your data.
Whether you have 5 leads or 500, your report always maintains structural integrity. In n8n, use a Code node with a simple JavaScript reduce or map function to iterate through the $input.all() array, generating a long string of HTML table rows.
// Converting JSON array to HTML table rows
const items = $input.all();
let htmlRows = items.map(item => {
const data = item.json;
return `
<tr>
<td>${data.name}</td>
<td>${data.email}</td>
<td>${data.score}</td>
</tr>
`;
}).join('');
return [{ json: { htmlRows } }];2Email Client Resilience
The biggest challenge in automated reporting is Email Client Compatibility. Unlike modern web browsers, email clients like Outlook or Gmail mobile have notoriously limited CSS support. External stylesheets and <style> blocks in the head are frequently stripped out.
To ensure your reports don't break, you must use Inline Styles directly on the HTML tags (e.g., <td style='border: 1px solid #ddd;'>). This 'defensive coding' strategy guarantees that your automation delivers value to stakeholders, looking just as good in their inbox as it does in your test environment.
// Defensive coding with inline styles
// Bad: Relies on <style> block (will break in Outlook)
const bad = `<td class="data-cell">${value}</td>`;
// Good: Inline styles guarantee rendering
const good = `
<td style="
padding: 12px;
border-bottom: 1px solid #eeeeee;
font-family: sans-serif;
color: #333333;
">
${value}
</td>
`;3Conditional Highlighting
Raw data is hard to parse at a glance. To make your automated reports actionable, introduce Conditional Logic during the HTML generation phase. If a lead score is above 90, render the text green; if below 40, render it red.
This technique shifts the cognitive load from the reader to the machine. You're no longer just sending data; you're sending insights. By embedding simple ternary operators in your template literal, you can dynamically adjust inline styles based on the specific values of the current JSON item.
// Applying conditional styles
const score = data.score;
// Ternary logic for color
const color = score >= 90 ? '#28a745' :
score < 40 ? '#d73a49' :
'#333333';
const cell = `
<td style="color: ${color}; font-weight: bold;">
${score}
</td>
`;