Fixing rich-text issues with bulleted lists in Webflow CMS

When transferring content to Webflow CMS using the API, you might encounter a frustrating issue: your bulleted lists don’t format correctly. Instead of displaying the clean, organized look of properly indented bullet points, Webflow might show the list items as plain text or, in some cases, display simple dashes (-) instead of the more appealing bullet points you expect. This can make your content look unpolished and harder to read, disrupting the overall design of your page.

What causes the problem?

The problem arises when there’s no blank line between the title of the list and the actual bulleted list in your rich-text field. Webflow’s formatting engine struggles to recognize the structure correctly in such cases - for reasons unknown to us.

Let’s have a look at an example:

Without a blank line:

**Steps to Prepare:**

In Webflow, this may render as:

‍Steps to Prepare:

- Gather your ingredients.

- Preheat the oven.

- Mix the batter.

...meaning you lose your nice bullet points.

How to fix this issue

Manual solution

Before importing your content into Webflow, ensure there’s a blank line between any title and the associated bulleted list. This simple adjustment resolves the formatting problem.

In Webflow, this would then render the bullet points correctly:

Steps to Prepare:

• Gather your ingredients.
• Preheat the oven.
• Mix the batter.

Programmatic solution

If you’re working with a large amount of content, manually editing each instance can be time-consuming. Instead, you can use a script to automate the process. Here’s an example of a Python script that  scans your content for any text immediately followed by a bulleted list and inserts a blank line where needed.

import re

def add_blank_lines_to_lists(content):

   """

   Adds a blank line before bulleted lists if there isn't one already.

   """

   # Regex to find a line with text followed immediately by a bulleted list

   pattern = r"([^\n]+)\n(- |\* |\d+\.)"

   # Add a blank line between the title and the list

   updated_content = re.sub(pattern, r"\1\n\n\2", content)

   return updated_content

# Example usage

content = """**Steps to Prepare:**

- Gather your ingredients.

- Preheat the oven.

- Mix the batter."""

fixed_content = add_blank_lines_to_lists(content)

print(fixed_content)

The output would be:

‍
**Steps to Prepare:**
‍

- Gather your ingredients.

- Preheat the oven.

- Mix the batter.

Conclusion

By ensuring a blank line separates list titles and bulleted lists, you can maintain your original formatting in Webflow.
Whether you make edits manually or use a script for bulk updates, this small adjustment can save you a lot of frustration!