✍️ How to convert Rich Text into HTML in Airtable for Products descriptions?
Need help with Airtable? We’ve launched SyncBase Studio to assist you! Feel free to reach out at theau@syncbase.app 💬
Step-by-Step Setup
1. Add a new field in Airtable
In your Products
table:
- Create a field called
Product Description Rich Text
→ Field type: Long text, enable rich text formatting.
2. Set Up the Automation
Go to Automations > Create new automation.
Trigger:
- Trigger type: When a record is updated
- Table: Products
- Field: Product Description Rich Text
Action:
- Action type: Run a script
In the script editor:
- Click “+ Add input variable”
- Name it:
recordId
- Select value:
- Name it:
👉 Step 1: When record is updated > Record ID
- Paste the following script:
- Use the following script (you can copy and paste it):
// Markdown to HTML converter (improved version with proper <ul><li> handling)
function markdownToHtml(md) {
if (!md) return "";
let lines = md.split('\n');
let htmlLines = [];
let inList = false;
for (let line of lines) {
let trimmed = line.trim();
// List item
if (/^[-+*] /.test(trimmed)) {
if (!inList) {
htmlLines.push('<ul>');
inList = true;
}
htmlLines.push(`<li>${trimmed.slice(2).trim()}</li>`);
} else {
if (inList) {
htmlLines.push('</ul>');
inList = false;
}
// Titles
if (/^###### /.test(trimmed)) htmlLines.push(`<h6>${trimmed.slice(7).trim()}</h6>`);
else if (/^##### /.test(trimmed)) htmlLines.push(`<h5>${trimmed.slice(6).trim()}</h5>`);
else if (/^#### /.test(trimmed)) htmlLines.push(`<h4>${trimmed.slice(5).trim()}</h4>`);
else if (/^### /.test(trimmed)) htmlLines.push(`<h3>${trimmed.slice(4).trim()}</h3>`);
else if (/^## /.test(trimmed)) htmlLines.push(`<h2>${trimmed.slice(3).trim()}</h2>`);
else if (/^# /.test(trimmed)) htmlLines.push(`<h1>${trimmed.slice(2).trim()}</h1>`);
else {
// Inline formatting
let processed = trimmed
.replace(/\*\*\*(.*?)\*\*\*/gim, '<strong><em>$1</em></strong>')
.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
.replace(/\*(.*?)\*/gim, '<em>$1</em>')
.replace(/\[(.?)\]\((.?)\)/gim, "<a href='$2' target='_blank'>$1</a>");
// Line breaks
htmlLines.push(processed === '' ? '<br><br>' : `${processed}<br>)`;
}
}
}
if (inList) htmlLines.push('</ul>');
return htmlLines.join('\n');
}
// --- Airtable automation logic ---
let table = base.getTable("Products");
let inputConfig = input.config();
let recordId = inputConfig.recordId;
let record = await table.selectRecordAsync(recordId);
let markdown = record.getCellValue("Product Description Rich Text");
if (markdown) {
let html = markdownToHtml(markdown);
await table.updateRecordAsync(recordId, {
"Product description in HTML": html
});
}
Test the Setup
- Fill in a product description using rich formatting in the
Product Description Rich Text
field. - Wait a moment (or manually run the automation).
- Check that the
Product description in HTML
field now contains the HTML version, ready for Shopify!
Bonus Tips
- You can reuse this setup for any field where rich text → HTML is needed, not just product descriptions.
- You can do this the other way around so HTML is converted to → rich text in the new added column.
- If you need image support or more advanced markdown (like tables or code blocks), consider using Make.com or a custom webhook with
marked.js
.
Updated on: 17/06/2025
Thank you!