CMS Counter

What it does

It counts how many items are in a CMS collection and prints the number on your page.

That sounds like it should be trivial, and it isn't — Framer code components can't read your collections directly. So this one works differently, and understanding how is the whole video.

Controls

8 controls, 6 of which only appear when they are relevant.

Working through the panel

How it works

It comes in two modes, and you need both.

Marker goes inside your collection list, once per item. It renders nothing visible — it just leaves a trace on the page for each item.

Counter goes wherever you want the number, and counts those traces.

The two find each other by sharing a Collection name, so give both the same name. If you have several collections on one page, that name is what keeps them apart.

Formatting the number

The remaining controls only appear in Counter mode, because in Marker mode there is nothing to style.

Prefix and Suffix are the words around the number — projects, articles, items in stock.

Thousands adds separators for large counts. Min Digits pads shorter numbers with leading zeros, which is how you get an odometer look.

Then font and colour.

Performance and limits

• Static rendering is handled, so canvas thumbnails and exports show a settled frame rather than a blank box.