Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

How to create a page builder with repeater functionality in Sanity.io

9 replies
Last 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?
Jan 5, 2023, 1:57 AM
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!
Jan 5, 2023, 2:08 AM
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
Jan 5, 2023, 2:35 AM
You can read more about the limitations of arrays here , as well as see examples of how to handle it.
Jan 5, 2023, 2:38 AM
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
Jan 5, 2023, 2:41 AM
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',
                },
              ],
            },
          ]
        },
      ],
    }),
Jan 5, 2023, 2:41 AM
Thank you! I'll take a look at this
Jan 5, 2023, 2:41 AM
In essence, you place sections on the page, and sectionBlocks into the section. The rest is done with templating.
Jan 5, 2023, 2:46 AM
This is exactly what I was looking for, thanks!
Jan 5, 2023, 3:29 AM
You are welcome 👍
Jan 5, 2023, 2:53 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?