> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-layout/rich-text-repeater.md).

# 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. 

{% embed url="<https://www.loom.com/share/32e32f3bd5c84083ae7c16eb548d8c72>" %}

## Examples

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

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FxqgqD2QwRSuoAX5nkwip%2Fimage.png?alt=media&amp;token=bfd9ef3c-51f4-449a-a4ff-4db546e56133" alt=""><figcaption></figcaption></figure>

And turn it into diagrams and layouts like this;&#x20;

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FSSxk1o6K5w2Sj6zBmGFn%2Fimage.png?alt=media&amp;token=2a0db3e8-4c6b-42c7-b672-13e35bf31488" alt=""><figcaption></figcaption></figure>

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.&#x20;

This involves a few simple processes, all handled by the code component automatically.&#x20;

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

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FisuCZFaOfViDkTKcIBxw%2Fimage.png?alt=media&amp;token=b1d24172-c516-404d-96ec-9aa27b058141" alt=""><figcaption></figcaption></figure>

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.&#x20;
2. **Spacer Template** ( optional ) represents anything you wnat rendered between items, like the vertical line in the diagram example above.&#x20;
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.&#x20;

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2Fkg1riiXU3dexQTqnVqd7%2Fimage.png?alt=media&amp;token=18cab76c-7f9d-41de-beab-a71e72d1bd95" alt=""><figcaption></figcaption></figure>

## 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&#x20;

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.&#x20;

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

* Item
  * Heading ( plain-text )&#x20;
  * Rich Text ( rich-text )&#x20;

| 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&#x20;
* Use this when you want to add items alongside other content&#x20;

### 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

```html
<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

```html
<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:&#x20;

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

{% hint style="danger" %}
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.&#x20;
{% endhint %}

{% hint style="warning" %}
We haven't explored **IX3 support** yet, what the impacts are and what it needs for binding.&#x20;
{% endhint %}

**Tip:** If interactions aren't working, ensure:&#x20;

* The **Reset IX2** property is enabled (default: `true`)
* Your interaction is set up on the template element's class ( not element )&#x20;

### 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.&#x20;

<br>