Bind content on the canvas
Put a collection on any page with a Collection List, then choose which field each heading, image or link shows. The canvas shows the real items as you work, and editing bound text changes the item, not your code.
On this page
The Add elements panel beside the canvas: a heading is selected, After is chosen, and the site's own components sit above blocks for structure, text and media.
Binding works on React sites with React Router, such as the Xodia template, once the site has a Xodia collection. Adding and changing lists comes with Xodia CMS, on every plan. Every plan
Add a Collection ListLink to this section
Select where it goes
Select an element on the canvas. The list goes before, after or inside it, as with every block.
Open Add elements and choose CMS
The CMS category has a Collection List for each of your collections.
Pick the collection
Xodia adds the list with a starter layout already bound to the first fields, such as the title, an image and a date, with each card linking to the item's page. It sorts the way the collection does.
With a Collection List selected, the same category adds an Empty state, the message shown when no item matches, and Pagination, which splits the list into pages with Previous and Next.
A Collection List of journal posts selected on the Xodia canvas: the design panel sets its collection, a filter on category, the sort by published date, a limit of three and the empty state message.
Collection List settingsLink to this section
Select the list and open Settings in the design panel:
- Collection: which collection the list shows.
- Filters: show only items whose fields match, such as Featured is on or Category is News. Every filter must match. Without filters every item shows.
- Sort: sort by a field, then by another, ascending (A to Z, oldest or smallest first) or descending, or keep the collection's own order.
- Limit and Offset: show the first few items, or skip some, such as the latest three posts on the home page.
- Pages: split the list into pages, with how many items each page shows.
- Show drafts in the preview: see draft items on the canvas while you design. Drafts never show on the published site.
- Empty state: on or off, with its message.
If a list's items, filter or sort come from code Xodia can't edit, such as a list written by hand, the panel says so and your AI changes it.
Content from: bind an element to a fieldLink to this section
Inside a list item, or anywhere on a collection page, select a heading, text, image or link and open Settings. Content from chooses where it gets its content:
- Static (typed here): the text you typed, the same for every item.
- A field: each item's own value. Text can show plain text, numbers, dates, options, emails and phone numbers; a rich text block shows rich text; an image takes its picture and alt text from an image field; a link can go to a link, an email, a phone number or the item's own page.
In a list, the element shows each item's value. On a collection page, it shows the item you are previewing.
Add elements also has item field tiles for this: Heading, Text, Rich text, Image, Link, Date, Number and Option badge. With something inside a list item or on a collection page selected, they add an element that is already bound.
VisibilityLink to this section
Below Content from, Visibility shows an element only for some items: when a switch is on or off, when a field is set or empty, or when a text, number or option field is or isn't a value. Use it for a Featured badge or a Sold out label. The item's outer element always shows; hide something inside it instead.
References and nested listsLink to this section
A reference field links an item to items in another collection, such as a post's author. Inside a list item or on a collection page, Add elements offers a list for each reference field, which shows the referenced items inside the item, such as the author's name and photo on every post, or a post's related posts.
To show related items, add a filter whose value is Same as the current item: a list of posts on a post page can show the other posts in the same category.
Edit bound content on the canvasLink to this section
Bound elements carry a small field chip with the field's name when you hover or select them, so you can tell content from design at a glance.
- Double-click bound text and type over it: the change goes into that item's field in its content file, not into your page's code.
- The pencil on the chip opens the item's value in a small editor. Rich text and some other fields are edited in the Content tab, and Open in Content takes you to that item and field.
- On a collection page, the item switcher in the address bar picks which item you see and edit.
A post title inside a Collection List selected on the Xodia canvas, with its field chip: the design panel's Content from picker shows each item's title, summary, category, dates or slug, or static text typed here.
What it looks like in your codeLink to this section
Lists and bindings are plain JSX in your own files. A list is a CollectionList component from the CMS kit, and a bound element reads the item and carries a data-field attribute with the field's id, so you, your AI and Xodia can all read it. Renaming a field's id in the Fields tab updates these bindings too.