curl -X POST "https://api.cullx.com/v1/email-render" \
-H "x-api-key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"template": "<div style='"'"'color: blue'"'"'>
<h1>Welcome {{name}}!</h1>
<p>Your order #{{orderId}} is ready.</p>
</div>",
"data": {
"name": "John Doe",
"orderId": "12345"
},
"inlineCSS": true
}'const renderEmail = async (template, data) => {
const response = await fetch(
'https://api.cullx.com/v1/email-render',
{
method: 'POST',
headers: {
'x-api-key': API_KEY,
'Content-Type': 'application/json'
},
body: JSON.stringify({
template,
data,
inlineCSS: true
})
}
);
const { data: result } = await response.json();
return {
html: result.html, // CSS-inlined HTML
text: result.text // Plain text version
};
};Converts <style> blocks to inline styles. Works in all email clients including Outlook.
Use {{variable}} syntax for dynamic content. Simple templating without complex engines.
Automatically extracts plain text version. Required for spam filtering and accessibility.
Keeps @media queries for responsive emails. Mobile-optimized rendering.
Preserves @font-face declarations. Use custom web fonts in supported clients.
Average render time: 50ms. Perfect for transactional emails sent at scale.
Order confirmations, shipping updates, password resets. Render beautiful emails that work everywhere.
Users: E-commerce platforms, SaaS apps, notification systems
Marketing campaigns, weekly digests, announcements. Professional HTML emails without design headaches.
Users: Marketing teams, content creators, publishers
Alerts, reports, automated summaries. Dynamic content with template variables.
Users: Monitoring tools, analytics platforms, CRMs
Build your own Mailchimp alternative. Let users design HTML templates, render them via API.
Users: Marketing automation tools, campaign managers
<!DOCTYPE html>
<html>
<head>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f4f4f4;
}
.header {
background: #4F46E5;
color: white;
padding: 30px;
text-align: center;
}
.content {
background: white;
padding: 30px;
margin-top: 20px;
}
.button {
display: inline-block;
padding: 12px 30px;
background: #4F46E5;
color: white;
text-decoration: none;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to {{appName}}!</h1>
</div>
<div class="content">
<p>Hi {{name}},</p>
<p>Thanks for signing up! Your account is ready.</p>
<a href="{{loginUrl}}" class="button">
Get Started
</a>
</div>
</div>
</body>
</html><div style="max-width: 600px; margin: 0 auto;
padding: 20px; background: #f4f4f4;">
<div style="background: #4F46E5; color: white;
padding: 30px; text-align: center;">
<h1 style="color: white;">Welcome to Acme!</h1>
</div>
<div style="background: white; padding: 30px;
margin-top: 20px;">
<p>Hi John Doe,</p>
<p>Thanks for signing up!
Your account is ready.</p>
<a href="https://app.acme.com/login"
style="display: inline-block; padding: 12px 30px;
background: #4F46E5; color: white;
text-decoration: none; border-radius: 6px;">
Get Started
</a>
</div>
</div>
Plain Text Output:
Welcome to Acme!
Hi John Doe,
Thanks for signing up! Your account is ready.
Get Started: https://app.acme.com/login