Sanity items displaying in wrong order on website

I understand your frustration! The good news is this is a common issue with a straightforward solution. When Sanity documents appear scrambled on your website, it's because you need to explicitly sort them in your GROQ query - Sanity doesn't automatically preserve the order you see in the Studio.

By default, Sanity returns documents in an unpredictable order (usually by internal ID or creation time), which is why they appear scrambled. Here's how to fix it:

The Solution: Use order() in Your Query

You need to add the order() function to your GROQ query. Here's the basic syntax:

*[_type == "yourType"] | order(fieldName asc)

Common Ordering Scenarios:

By date (newest first):

*[_type == "post"] | order(publishedAt desc)

By title (alphabetically):

*[_type == "product"] | order(title asc)

By custom order field: If you want manual control over order, add an orderRank field to your schema (type: number), then:

*[_type == "section"] | order(orderRank asc)

By multiple fields:

*[_type == "movie"] | order(releaseYear desc, title asc)

If You Want Drag-and-Drop Ordering

If you want to manually arrange items in the Studio and have that order reflected on your site, you should use the orderable document list plugin. This adds a special orderRank field that preserves your manual ordering.

The key takeaway: Sanity doesn't remember the order you see in Studio unless you explicitly query for a specific order. Add | order(yourField desc) to your query and your scrambled items will line up perfectly!

What field do you want to sort by? If you share your query, I can help you add the right ordering syntax.