Rich Text Repeater ✅

Transforms Webflow Rich Text content into structured layouts.

Overview

The Rich Text Repeater component transforms Webflow Rich Text content into repeated template elements. It parses rich text by headings, creating one instance of your template for each heading section found.

This is ideal for building dynamic FAQs, accordion lists, feature grids, or any repeating content structure from CMS rich text fields.

Examples

The purpose of this component is to take easily-managed, simply-structured rich text like this;

And turn it into diagrams and layouts like this;

This is done by parsing the rich-text content into structured data, and then integrating it into a Webflow-designer set of element, through custom attributes.

This involves a few simple processes, all handled by the code component automatically.

1. Parse - The component reads your Rich Text content and splits it into "items" at each heading

2. Clone - For each item, it clones your template element

3. Populate - It injects the heading text and rich text content into marked locations in the clone

4. Render - The populated clones are output to your render container

In the designer, here's what the component looks like- it's bound to a rich text datasource or CMS field, and defined three templates for the render;

1. Item Template represents an individual item. In the richtext, this is generally a heading, and then the content following it up until the next heading.

2. Spacer Template ( optional ) represents anything you wnat rendered between items, like the vertical line in the diagram example above.

3. Layout Template ( optional ) governs the overall layout, allowing you to wrap, or insert pre-content and post-content in the layout, like the heading above.

Component Properties

Content Group

Property	Type	Description
Rich Text	Rich Text	The source rich text content containing headings to parse into items. Typically bound to a CMS rich text field.

Layout Group

Property	Type	Description
Item Template	Slot	The template element that will be cloned for each parsed item. Must contain elements with template attributes (see below).
Layout Template	Slot	( optional ) The output container where generated elements appear. Elements render in the light DOM so Webflow styles apply correctly.
Spacer Template	Slot	( optional ) a tempate for spacer elements you want between the rendered items.

Parsing

The base concept of using Rich Text as a datasource is to utilize inherent structure in a way that make it easy for users to manage.

Currently the only parsing mode is to separate the richtext at headings into items. Each item is then defined as;

• Item

  • Heading ( plain-text )

  • Rich Text ( rich-text )

Property	Type	Default	Description
Parse Mode	Variant	"Headings + Rich Text"	How to parse the rich text into items. Currently supports headings-based parsing.

Advanced Group

Property	Type	Default	Description
Debug	Boolean	false	Shows a debug overlay with parsing information (item count, parse mode, template status, render mode).
Reset IX2	Boolean	true	Reinitializes Webflow IX2 interactions after rendering. Required for interactions (like accordions) to work on generated elements.

Template Attributes

Use these custom attributes on elements within your template to mark where content should be injected:

Attribute	Value	Behavior
template	heading	The element's innerText is replaced with the heading text (plain text).
template	richtext	The element's innerHTML is replaced with the content following the heading (HTML preserved).
template	plaintext	The element's innerText is replaced with the content following the heading.
template	render	Marks the target container for output. Its contents are replaced with generated items. If omitted, items are appended to the Render slot container.
template	pre-richtext	The element's innerHTML is replaced with the content at the top of the document, before the first item heading (HTML preserved).
template	pre-plaintext	The element's innerText is replaced with the content at the top of the document, before the first item heading.

Render Modes

The component supports two render modes:

Replace Mode

When your Layout Template slot contains an element with template="render":

• The contents of that element are cleared

• Generated items are placed inside it

• Use this when you want full control over the output container

Append Mode

When no template="render" element exists:

• Generated items are appended to the Layout Template slot container

• Existing content in the container is preserved

• Use this when you want to add items alongside other content

Rich Text Format

Your rich text source should be structured with headings as item delimiters:

# First Item Title
Content for first item goes here.
Paragraphs, lists, links, etc.

# Second Item Title  
Content for second item.

# Third Item Title
More content here.

Important notes:

• Any heading level (H1-H6) starts a new item

• Content before the first heading is ignored

• The heading text becomes the title (plain text)

• All content after a heading until the next heading becomes richtext (HTML)

Example Setup

Template Structure

<div class="accordion-item">
  <div class="accordion-trigger">
    <h3 template="heading">Placeholder Title</h3>
    <div class="icon">+</div>
  </div>
  <div class="accordion-content">
    <div template="richtext" class="w-richtext">
      Placeholder content
    </div>
  </div>
</div>

Render Container

<div class="accordion-wrapper">
  <div template="render"></div>
</div>

Webflow Interactions (IX2)

The component automatically supports class-triggered Webflow interactions on generated elements within the repeater:

IX2 Reset - After rendering, the component calls ix2.destroy() and ix2.init() to rebind interactions

Element-triggered interactions do not work, because there is no way for the designer to know about these elements in advance ID them and bind them properly to the associated interactions.

We haven't explored IX3 support yet, what the impacts are and what it needs for binding.

Tip: If interactions aren't working, ensure:

• The Reset IX2 property is enabled (default: true)

• Your interaction is set up on the template element's class ( not element )

Styling

Generated elements render in the light DOM, meaning:

• All Webflow classes and styles apply correctly

• No shadow DOM style isolation issues

• Responsive styles work as expected

• Combo classes and states work normally

Debugging

Enable the Debug property to see:

• Items parsed - Number of items found in the rich text

• Parse mode - Current parsing mode

• Template found - Whether a valid template was detected

• Render mode - Whether using replace or append mode

Check the browser console for detailed logging when debug is enabled.

Common Use Cases

• FAQ Accordions - Parse Q&A content from CMS into interactive accordions

• Feature Lists - Turn rich text features into styled cards

• Timeline Items - Generate timeline entries from structured content

• Tab Content - Create tabbed interfaces from rich text sections

• Pricing Tiers - Build pricing tables from CMS content

article-level FAQs.