# The only Sanity page-builder guide you'll ever need

> Wake up, it's 2025 and we need to build the best page builder we possibly can, where do we start, what is the code. Can I just copy your code?

**TL;DR:** Page builders suck, but Sanity's don't. Organize blocks, see previews, collaborate in real-time, and use flexible APIs. Use ?? for null checks. Try array groups and views. Seriously, read the docs next time. Or just let someone else handle it if you're too lazy.

**Published:** 2024-07-09 | **Updated:** 2026-07-23 | **Categories:** Sanity, How To
---

I'm going to start this article by placing a bet that you've ***absolutely*** used a page-builder of some kind before. Let me fire off some quick opinions and tell me if they resonate.

- They're hard to maintain
- I can never find the block I want
- Surely this can be more efficient

**_Yeah_**, I know, that's basically most of the experiences we've heard from clients. We want to change that by putting together this [blog](https://robotostudio.com/blog) so I can scream at developers the next time I see a disorganised mess for a page builder.

## Why Sanity page builders don't suck
## The best opinion (my opinion)
I'm going to take a leaf out of [Simeon's book](https://www.sanity.io/docs/developer-guides/an-opinionated-guide-to-sanity-studio), and give you my opinions on page builders, and don't worry, they're unquestionably right and not to be disputed.

Here's how you should structure your previews in page builders

![Setting up previews with Sanity Studio](https://qxvqs298ldvynvwd.public.blob.vercel-storage.com/the-only-sanity-page-builder-guide-youll-ever-need-blog-setting-up-previews-with-sanity-studio.jpg)

### How does this look in code?
Well, assuming you've called the title: `title` and your image field `image`This is the exact way I would set up a preview inside the code.

```typescript
  preview: {
    select: {
      title: 'title',
      media: 'image',
    },
    prepare(selection) {
      const {title, media} = selection
      return {
        title: title ?? 'Currently no title, set one inside this block',
        subtitle: 'Split Image',
        media: media ?? ImageIcon,
      }
    },
  },
```

### What are those `??` about?
If you haven't seen those before, or you have seen them and you don't know what the difference is between those and `||` I'll let you in on a little secret *that's definitely not generated from ChatGPT*...

- `||` is the logical OR operator, returning the right operand if the left operand is falsy.
- `??` is the nullish coalescing operator, returning the right operand only if the left operand is null or undefined.

Use `??` to specifically check for null or undefined values, ensuring that other falsy values like `0` or `''` are not considered as missing values.

Or, in other words, because this asshole told me to use them.

![Some developer we let live in our head rent free from LinkedIn called Joey Clover](https://qxvqs298ldvynvwd.public.blob.vercel-storage.com/the-only-sanity-page-builder-guide-youll-ever-need-blog-some-developer-we-let-live-in-our-head-rent-free-f.png)

> Joey if you're reading this, I hope you're happy
## Let's start with the new stuff
Before going further, let's talk about some of the new stuff that [Sanity](/services/sanity) released that makes your page builder a bit better.

### Array groups
[Read the docs](https://www.sanity.io/docs/studio/array-type#4fb380bc3722)

This lets you split your page builder blocks (`arrays of blocks`) into groups. It means if you want to split out `Forms` and `Heros.` You can easily do it with some basic code.

Here's how it looks in the Sanity Studio:

![Showing the array groupings on light mode. Honestly who even uses light mode in this day and age](https://qxvqs298ldvynvwd.public.blob.vercel-storage.com/the-only-sanity-page-builder-guide-youll-ever-need-blog-showing-the-array-groupings-on-light-mode-honestly.png)

And here's the code to do that:

```typescript
{
  insertMenu: {
    groups: [
      {
        name: 'intro',
        title: 'Intro',
        // Here's where your blocks go to filter by intro
        of: ['hero'],
      },
      {
        name: 'storytelling',
        title: 'Storytelling',
        // Here's where your blocks go to filter by storytelling
        of: ['byTheNumbers']
      },
      {
        name: 'upsell',
        title: 'Upsell',
        // Here's where your blocks go to filter by upsell
        of: ['testimonials', 'hero'],
      },
    ],
  },
}
```

Fun fact: you can have a block in more than one grouping. It's pretty cool, for example, when you want a `form` block in both `Forms` and `Engagement`.

### Array views
[Read the docs](https://www.sanity.io/docs/studio/array-type#efb1fe03459d)

I know what you're thinking. Yeah, the above is pretty cool, but I still don't know what the ***hell*** my page builder block looks like, and it doesn't look like a 24px by 24px icon.

*Well, first of all*, you'd be right. Second of all, you now have something called `array views`. ***Yes***, they're everything you're asking for.

They allow you to see a whole bunch of blocks at once with thumbnails. Here's the visuals that ***aren't ripped straight from the docs***

Here's how it looks in the Sanity Studio

![Array thumbnails looking pretty darn slick - you can see what you're going to drop into the page because of the chunky thumbnail](https://qxvqs298ldvynvwd.public.blob.vercel-storage.com/the-only-sanity-page-builder-guide-youll-ever-need-blog-array-thumbnails-looking-pretty-darn-slick-you-can.png)

And here's the code to do that

```typescript
{
  insertMenu: {
    // You don't have to use groups, just left them in
    groups: [
      {
        name: 'intro',
        title: 'Intro',
        of: ['hero'],
      },
      {
        name: 'storytelling',
        title: 'Storytelling',
      },
      {
        name: 'upsell',
        title: 'Upsell',
        of: ['testimonials', 'hero'],
      },
    ],
    views: [
      {name: 'list'},
      // This is the important bit
      {name: 'grid', previewImageUrl: (schemaTypeName) => `/static/preview-${schemaTypeName}.png`},
      // Remember you can create a folder called 'static'
      // In the root of your Sanity folder
    ],
  },
}
```

> **Sanity CMS development**: Page builders, schema architecture, and editorial workflows your content team will actually enjoy. [Learn more](/services/sanity)

#### Pro tip: Use the same size canvas
Before you set this up, do everybody a favour and use the same size canvas for every screenshot, or else you're going to have a monstrosity of a visual representation of a block.

A nice, simple, and free way to handle this is to create a frame inside Figma and paste the screenshot into it, ensuring they are all the same height and width.

## See it in action
It's not recycling content if nobody watched the video the first time round... So here it is again, packaged into a [blog](https://robotostudio.com/blog). Please watch it.

## Closing thoughts
I don't want to take you away from actually trying this yourself, so I implore you to stop reading this content and actually spin up Sanity and do this for your clients today. You will not believe the UX improvement from just integrating these changes above. If you want to go deeper on schema organization, check out our [tips for building Sanity schema efficiently](/blog/tips-and-tricks-for-building-sanity-schema-efficiently), and if your GROQ queries are getting out of hand, we have a guide on [how to clean up your GROQ](/blog/clean-your-groq).

*If, on the other hand,* you can't be arsed and want somebody to "*just sort it out for you,"* you can get in touch with the form below and we'll get you looking ship-shape in no time.

## Related posts

- [Automate Sanity page builder thumbnails with Claude Code](/blog/automate-sanity-thumbnails)
- [Tips and tricks for building Sanity schema efficiently](/blog/tips-and-tricks-for-building-sanity-schema-efficiently)
- [Page-builders and spacing](/blog/spacing-in-page-builders)