> 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 ✅ ### 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="" %} ## 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 ```html

Placeholder Title

+
Placeholder content
``` #### Render Container ```html
``` ### 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 {% 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. {% endhint %} {% hint style="warning" %} We haven't explored **IX3 support** yet, what the impacts are and what it needs for binding. {% endhint %} **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.
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-layout/rich-text-repeater.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.