> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.syncbase.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ✍️ How to convert Rich Text into HTML in Airtable for Products and Collections 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:
1. Click **“+ Add input variable”**
    * Name it: `recordId`
    * Select value:
👉 `Step 1: When record is updated > Record ID`
2. Paste the following script:
* Use the following script (you can copy and paste it):

```javascript
// 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

1. Fill in a product description using rich formatting in the `Product Description Rich Text` field.
2. Wait a moment (or manually run the automation).
3. 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](https://make.com/) or a custom webhook with `marked.js`.