Loops and lists

Loops let you repeat a component for each item in a list. Set the special __data state to a list expression, and Silex clones the component once per item, populating it with each item's data.

This is how you display a list of blog posts, a product catalog, or team member cards — one component pattern, repeated for every item.

Understanding the __data state

The __data state is special — it controls looping.

When you set __data to a list expression (e.g., posts), Silex:

1. Evaluates the expression to get a list of items
2. Clones the component once per item
3. For each clone, sets the item as "current"
4. Other states on the component can reference the current item

Example: posts evaluates to a list of 5 posts. Set __data to posts, and the component appears 5 times on the canvas, one for each post.

Setting up a loop

Step 1: Create the component — Add a component to your page (a div, card section, or any container). This is your loop template.

Step 2: Design the template — Add children inside (text for the title, image for featured image, link, etc.). This is what repeats.

Step 3: Create the __data state 1. Select the component 2. Open the Data panel 3. Click Add State 4. For the state name, enter __data (case-sensitive, with two underscores) 5. Build an expression that returns a list: posts 6. Save

The component now repeats once per post. On the canvas, you see multiple clones stacked vertically (or arranged according to your CSS).

Accessing the current item in a loop

Inside a loop, "current item" is the data for that specific clone.

To display the title of each post in the loop:

1. Inside your template component, add a heading
2. Create a state innerHTML on the heading
3. Build the expression — but how do you reference "the current item"?

The current item is accessed through a state reference. If your parent component (the loop) has a public state, you reference it. Silex calls this the items state or loop context.

Simplified approach: In the expression editor, after selecting your first token (posts), the next step automatically gives you access to individual post fields. You build: just like first post → title, you can build current post → title.

In practice, if your loop is set to posts, child components see each post individually. So a state like posts → title inside a loop automatically refers to the title of the current post being rendered.

Practical example: blog post list

Scenario: you want to display a list of 5 blog posts with title, excerpt, and featured image.

1. Add a Div (the loop container)

2. Style it with Flexbox: Display Flex, Flex-wrap wrap, Column-gap 20px (optional — just for visual layout)

3. Inside the Div, add a Card Div (one post card) with:

4. A heading for the post title
5. A paragraph for the excerpt

6. An image for the featured image

7. Select the Card Div and create the __data state:

8. Expression: posts

9. The card now repeats 5 times on the canvas

10. For the heading inside the card, create a state:

11. Name: innerHTML
12. Expression: posts → title

13. Wait — inside a loop, this automatically refers to the current post's title

14. For the paragraph (excerpt):

15. Name: innerHTML

16. Expression: posts → excerpt

17. For the image:

18. Name: src
19. Expression: posts → featured_image → url
20. Name: alt

21. Expression: posts → featured_image → alt

22. Enable preview — you now see 5 blog post cards on the canvas, each populated with different data.

Nested loops

You can nest loops inside loops. For example, show each post with a list of comments inside.

Setup: 1. Outer component (loop 1): __data = posts 2. Inside it, add a component for comments (loop 2): __data = current_post → comments 3. Each comment has access to its parent post

Nesting works because the inner loop sets its own context.

Limiting loop results with filters

Instead of repeating all posts, you might want only the first 3, or only posts with a certain category.

Modify your __data expression:

• posts → slice → (0, 3) — only the first 3 posts
• posts → where (category = "news") — only posts in the news category
• posts → reverse — posts in reverse order

The filters are applied before the loop renders, so you only repeat items that match.

Loop index and position

Inside a loop, you might want to show the position (1st, 2nd, 3rd post).

Silex provides a special __index state on each clone. You can reference it to display or conditionally style items:

• Use __index to apply different styles to the first item
• Display __index + 1 to show "1 of 5" (since index starts at 0)

Preview behavior in loops

When previewing, Silex fetches live data and shows clones on the canvas. You can see:

• How the layout looks with actual content
• Whether text wraps or overflows
• Whether images display correctly

If you have 100 items in the loop, Silex might show only the first 10 or so on the canvas for performance. The full list renders when you publish.

Common mistakes

• Forgetting to set __data. A regular component doesn't loop unless you set the special __data state.
• Using a scalar instead of a list. __data must be a list expression. Setting it to posts → first (a single post) won't create a loop.
• Trying to display the entire object. If __data = posts, and you then try to display posts in a child, it shows "[object Object]". Instead, navigate to a scalar field: posts → title.
• Forgetting to design the template. Add children to the loop component before setting __data. If you set __data on an empty div, it repeats an empty div.

Learn more

• Binding data — creating states in general
• Expressions — understanding how to chain tokens
• Conditions — hiding/showing items in a loop based on data
• Filters — transforming lists (slice, where, reverse, sort, etc.)

---

Quiz

Q1: You want to repeat a component for each post in your blog. What special state do you create?

• A) loop
• B) __data
• C) items

Answer

B) __data — The special state __data (with two underscores) controls looping. When you set it to a list expression, the component repeats once per item.

Q2: Inside a loop, you want to display the title of each post. What expression do you use?

• A) posts → title (every post's title)
• B) title (the current post's title, implicitly)
• C) current → title (the current item)

Answer

A) posts → title — Even inside a loop, you build the full expression. Inside a loop, this expression is evaluated for each item, so it refers to the current post's title.

Q3: Your loop has __data = posts, but it's not repeating. What's the most likely issue?

• A) posts is empty (no posts in your API)
• B) You set __data to a single item instead of a list
• C) The preview is disabled

Answer

A) posts is empty (no posts in your API) — If the expression evaluates to a list with items, the loop repeats. Check your API to confirm posts exist. If the expression returns a single item (B), that would be wrong and cause an error.

Q4: You want only the first 3 posts to repeat in the loop. What do you set __data to?

• A) posts → first → slice(0,3)
• B) posts → slice(0,3)
• C) first posts → 3

Answer

B) posts → slice(0,3) — The slice filter narrows down a list to a range. It takes a start and end index (start at 0, end at 3 = first 3 items).

Q5: You have a loop of blog posts, and inside each post, you want to show comments. How do you set up nested looping?

• A) Create a __data state on the post component with comments
• B) Create a __data state on the post component with posts → comments
• C) You can't nest loops in Silex

Answer

A) Create a __data state on the post component with comments — The inner loop accesses the current post's comments field. Since the outer loop sets the post context, the inner loop can directly reference comments (the current post's comments).