Get help on Discord

Customizing reference field preview in array schema without modal

6 replies
Last updated: Jun 24, 2024
Hi! Small question: I have an object inside an array, which contains only one reference field. I want to style this element, which works fine with a custom preview component. Now, when u click the component, U first get the popover / modal with the reference, and then when clicking the reference, you go to the actual pane of the reference. Is there a way to skip the modal and go straight to the pane with that custom component? Thanks 🙂
AI Update

I understand your situation! Unfortunately, there isn't a documented way to skip the modal and navigate directly to the referenced document's pane from a custom preview component in array items.

The behavior you're experiencing is the standard Studio workflow: clicking an array item opens the editing modal for that item, and then you need to click the reference field within that modal to open the referenced document in a new pane. This is by design in the Form Components API.

What You Can Customize

While you can customize the appearance of array items using custom preview components (via the components.preview or components.item property), these components are primarily for visual presentation. Based on the available documentation, they don't expose navigation APIs that would allow you to programmatically open document panes and bypass the modal.

The custom components you can create for arrays include:

  • Preview components - Control how collapsed array items display
  • Item components - Customize the appearance of array items in the list
  • Input components - Replace the entire editing interface for the array item

However, none of these component types provide documented hooks or utilities to directly manipulate Studio's pane navigation system.

If your object truly contains only a single reference field and nothing else, you might consider restructuring your schema to use an array of references directly instead:

defineField({
  name: 'myArray',
  type: 'array',
  of: [{
    type: 'reference',
    to: [{type: 'yourDocumentType'}]
  }]
})

With this structure, clicking items in the array will immediately open the referenced document in a new pane, skipping the intermediate modal entirely since there's no object wrapper.

If you need to keep the object wrapper for other reasons (like adding metadata fields later, or if you're using it for organizational purposes), you're currently limited to the standard two-click workflow: first click opens the object modal, second click opens the referenced document.

This is a common pain point when working with reference-heavy schemas, and while the custom preview makes the visual experience better, the navigation behavior itself remains unchanged. The simplest solution is to flatten your schema to use direct references if possible.

Not really. I suppose you could add the reference field directly to the array schema, instead of putting it in an object to eliminate the modal step.
Hey
user M
, Thank you for replying! Well, if i do, I cannot customize it by means of a preview component, am i right? For what I see now, only an item component overrides it, other components dont change the field.

        {
            title: 'Endeavor',
            name: 'endeavor',
            type: 'reference',
            to: [{type: 'endeavors'}],
            validation: (Rule) => Rule.required(),
            components: {
                item: EndeavorPreviewComponent,
            },
        }
But then I lose the draghandle, menu, and the ability to click the item. Or am I missing something obvious?
You can still customize the preview of a reference that’s directly inside of an array.
user M
could you show me how?
Ok I found it, I had to edit the preview of the document, not the reference. thanks for the help! 🙂
You can also do the reference field if you don’t want to customize the document preview everywhere:
{
      name: 'someArray',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [
            {
              type: 'person',
              components: {
                preview: () => (
                  <div style={{border: 'dashed red'}}>I AM A PREVIEW COMPONENT</div>
                ),
              },
            },
          ],
        },
      ],
    },

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?