> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/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 use the Array mapper CMS element

**The array mapper is a helper element used in conjunction with CMS items and lists in order to display arrays of items from the content management system.**

|    |    |
| --- | --- |
| [1. Adding an Array mapper to a project](#2-adding-an-array-mapper-to-a-project) | [2. Adding elements to an Array mapper](#2-adding-elements-to-an-array-mapper) |

## Adding an Array mapper to a project

||| Array mapper elements ONLY work when used inside of a CMS Item or List.

To add an Array mapper to a project:

* Go to the **Left panel -> Elements tab -> CMS section**
* Drag the **Array mapper** element the **Success Layer** in a **CMS element** with a source set up
* Go to the **Right panel -> Array Mapper Settings**
* Select an Array-type **Source** from the available collections

![How to add an Array mapper to a CMS project](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-array-mapper_1b1rbmo.gif)

## Adding elements to an Array mapper

Once the Array mapper is added and the Source is set up, to customize the content simply:

* Go to the **Left panel -> Elements tab**
* Drag any element to the **Array Mapper -> Items layer**
* **Select the element**
* Go to the Right panel and bind a property to the element using the [Dynamic properties panel](/en/article/how-to-bind-dynamic-data-to-elements-1ojkk98/)

![How to add basic elements to an array mapper CMS element](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-array-mapper_160pmom.gif)