How to create a page builder with repeater functionality in Sanity.io
9 repliesLast updated: Jan 5, 2023
Hi, I am testing out Sanity after coming from WP and im looking to be able to build a page builder that is just as good as the ones I create using Advanced Custom Fields for WordPress. So far Sanity has been super easy to work with and it looks like most of the functionality im looking for is here except for the ability to add a "repeater" inside a "repeater". I believe the closest element to this on Sanity is the "array" field, but I can't seem to put another inside of it. Is there anyway to get this functionality?
You can’t put an array inside of an array, unfortunately. You can, however, wrap the array inside of an object, then put that object in an array!
I don't think I understand what you mean. Any chance you could show me an example? Let's say I want to build in a way that clients would be able to create as many lists as they want, select a title for each list, add as many list items as they want
You can read more about the limitations of arrays here , as well as see examples of how to handle it.
I have done just that. The project is called Ruhrpott and it provides structured content for a Metalsmith website. My studio is on Github. Look at the schema for the page content type: https://github.com/wernerglinka/ruhrpott-studio/blob/main/schemas/contentTypes/page.js
Specifically, it looks like this:
defineField({
name: 'lists',
type: 'array',
of: [
{
name: 'list',
type: 'object',
fields: [
{
name: 'title',
type: 'string',
},
{
name: 'items',
type: 'array',
of: [
{
name: 'item',
type: 'string',
},
],
},
]
},
],
}),Thank you! I'll take a look at this
In essence, you place sections on the page, and sectionBlocks into the section. The rest is done with templating.
This is exactly what I was looking for, thanks!
You are welcome 👍
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
