---
title: "Lists | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/lists/"
---

# Lists

> In the Design Editor, you can organize text into lists and create and edit them right on the canvas. In this topic, you will learn how to create and configure such lists.

## Creating lists

You can create lists in four ways:
1. Import from InDesign templates.
2. Click the **Bulleted list** and **Numbered list** buttons in the Top toolbar.
3. Enter bullets in text elements.
4. Enter numbers followed by a dot in text elements.

### Importing InDesign templates

The Design Editor imports lists from IDML templates as they were created in InDesign. Your users can change the list format and the nesting level through the Top toolbar. To perform this, the `TopToolbar.textListButtonsEnabled` should be `true`.

![List buttons for a list.](images/list-active-buttons.png)

### Using list buttons

In the text editing mode, you can click the **Bulleted list** or **Numbered list** button in the Top toolbar to make the current paragraph a list item. The marker for this item will be taken from the default settings in the editor config.

![List buttons for text.](images/list-buttons.png)

### Entering list markers

When you edit text elements and enter bullets (like `*`, `-`, `•`) or numbers (like `1`, `i`, `I`) followed by a dot, then they start a new list item.

## Configuring lists

In the editor configuration, you can find [`listSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/reference.md#text-lists) – the object defining the format and layout settings of lists in text elements. Here are the default values:

```json
{
    "listSettings": {
        "maxLevel": 3,
        "firstLineIndent": -20,
        "listIndent": 30,
        "levelIndent": 40,
        "tabOffset": 10,
        "bulletChar": "•",
        "numberingFormat": "number"
    }
}
```

Every list has an indent from the left edge of the text element, `listIndent`, and all text strings start from this value. The `levelIndent` creates an indent between list levels, which is limited by the `maxLevel` parameter.

![List indents.](images/list-indents.png)

:::note
On mobile devices, the Design Editor supports only the first list level.
:::

The `firstLineIndent` defines the position of bullets and numbers. When this is a negative value, the bullets will be drawn within the `listIndent`, and text lines on the same list level will line up.

![List indents and bullet position.](images/list-first-line.png)

If `firstLineIndent` is `0` or a positive value, then the bullets in the first line and other lines will line up. To prevent the bullets and the first line text from overlapping each other, the editor will apply a `tabOffset`.

![The tab offset in lists.](images/list-tab-offset.png)

The `bulletChar` allows you to define a marker for bulleted lists. For example, you can pass `"-"`, `"*"`, `"•"`, etc.

The `numberingFormat` specifies the marker type for numbered lists and supports the following values:
- `"number"`: **1.**, **2.**, **3.**, etc.
- `"lowerLetter"`: **a.**, **b.**, **c.**, etc.
- `"upperLetter"`: **A.**, **B.**, **C.**, etc.
- `"lowerRoman"`: **i.**, **ii.**, **iii.**, etc.
- `"upperRoman"`: **I.**, **II.**, **III.**, etc.
- `"none"`: list items represent paragraphs without numbers.

:::note
If `tabOffset` is pretty small, it will be applied several times to create space between the bullet or number and the start of the list item.

![Applying tab offset to list items.](images/list-tab-offset2.png)
:::