Get help on Discord

How to define an empty or placeholder object within a schema array in Sanity.io using a custom input component.

6 replies
Last updated: May 21, 2021
Hi all 👋
I wonder if it’s possible to define an empty or placeholder object within schema array? Something that could just act as an identifier within content blocks.
AI Update

Yes, you can definitely create an empty or placeholder object within a schema array! This is useful for identifiers, dividers, or markers within content blocks.

Here's how you can define a minimal object type in your array:

{
  name: 'contentBlocks',
  type: 'array',
  of: [
    {
      type: 'block' // regular content
    },
    {
      name: 'placeholder',
      type: 'object',
      fields: [
        {
          name: 'identifier',
          type: 'string',
          title: 'Identifier',
          initialValue: 'marker'
        }
      ],
      preview: {
        select: {
          identifier: 'identifier'
        },
        prepare({identifier}) {
          return {
            title: `--- ${identifier || 'Placeholder'} ---`
          }
        }
      }
    }
  ]
}

If you want an even more minimal placeholder that's truly "empty" (no fields at all), you can do:

{
  name: 'divider',
  type: 'object',
  fields: [
    {
      name: 'hidden',
      type: 'string',
      hidden: true,
      initialValue: 'divider'
    }
  ],
  preview: {
    prepare() {
      return {
        title: '--- Divider ---',
        subtitle: 'Visual separator'
      }
    }
  }
}

The key points:

  • You need at least one field (even if hidden) for the object to be valid
  • Use the preview property to make it visually identifiable in the array
  • The _key property is automatically added to track each array item

This approach works great for creating visual separators, section markers, or any kind of structural identifier in your content blocks. The array fields documentation explains how arrays support multiple member types and how each item gets tracked with unique keys.

Show original thread
6 replies
Found a workaround myself if anyone needs it in the future, as custom input component :
import React from 'react'

import { Stack, Heading } from '@sanity/ui'

const Placeholder = React.forwardRef((props, _ref) => {
    return (
      <Stack space={2}>
        <Heading as='h3' size={0}>{props.type.title}</Heading>
      </Stack>
    )
  }
)

export default Placeholder;
I then used it in document schema like so:

    {
      name: 'contentBlocks',
      title: 'Content Columns',
      type: 'array',
      of: [
        {
          name: 'test',
          title: 'Test',
          type: 'string',
          inputComponent: Placeholder,
        },
      ],
    },
Appreciate you sharing this back with us,
user H
, thanks! Props for having used Sanity UI as well 🙌
(You may want to add this to the Exchange
as a snippet so it doesn't get lost in Slack's history)
Found a workaround myself if anyone needs it in the future, as custom input component :
import React from 'react'

import { Stack, Heading } from '@sanity/ui'

const Placeholder = React.forwardRef((props, _ref) => {
    return (
      <Stack space={2}>
        <Heading as='h3' size={0}>{props.type.title}</Heading>
      </Stack>
    )
  }
)

export default Placeholder;
I then used it in document schema like so:

    {
      name: 'contentBlocks',
      title: 'Content Columns',
      type: 'array',
      of: [
        {
          name: 'test',
          title: 'Test',
          type: 'string',
          inputComponent: Placeholder,
        },
      ],
    },
Sounds good
user M
, will add 👍
Awesome! Thanks Arnas 🙂

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.

Get started for freeExplore the demo

Was this answer helpful?