Sorting & advanced search for CMS elements

Hello. This has been equally frustrating for me. It’s a bummer that such a basic CMS feature is missing from Figma Sites. However I implemented my own little solution.

So this is the structure of my frame that is being populated by CMS collection:

Frame 1
|___Frame 2
       |___[CMS post 1]
             [CMS post 2]
             ...

So what I did was, I inserted an embed element, and entered a small html inside it:

<div class="cms-anchor" style="display:none;"></div>

I named this embed layer “cms-reverser” inside Figma. Now I placed cms-reverser right inside Frame 1 before Frame 2. Set its position to absolute, and set its dimensions to height: 0px, width: 0px.

Now inside your site settings, insert this code at the end of head:

<script>
(function() {
    console.log("CMS Reverser: Watching for hydration...");

    const reverseCMS = () => {
        const anchor = document.querySelector('.cms-anchor');
        if (!anchor) return;

        // Climb to the wrapper, then find the sibling list
        const anchorWrapper = anchor.parentElement?.parentElement;
        const postsContainer = anchorWrapper?.nextElementSibling;

        // Check if posts have actually rendered inside the container yet
        if (postsContainer && postsContainer.children.length > 0 && !postsContainer.dataset.reversed) {
            postsContainer.dataset.reversed = "true"; // Prevent infinite loop

            const posts = Array.from(postsContainer.children);
            const fragment = document.createDocumentFragment();

            posts.reverse().forEach(post => fragment.appendChild(post));

            postsContainer.innerHTML = '';
            postsContainer.appendChild(fragment);

            console.log("Success: Posts reversed.");
            observer.disconnect(); // Task complete
        }
    };

    const observer = new MutationObserver(reverseCMS);

    // document.body is safe to use here because we are at the end of the body
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    reverseCMS(); // Run once immediately in case it's already rendered
})();
</script>

Publish the site, ​​​​​​ and your CMS list will be reversed. Thank you.