Custom preview component not working for object field in Sanity array

I can see the issue! According to the Form Components documentation, the preview component is specifically designed to customize "how an object, image, or reference value is displayed in list views" - particularly for arrays of objects.

The problem with your code is that you've placed the preview component on the url string field itself. Preview components on primitive types like strings don't render in the same way as object-level previews. They're meant to customize how objects appear in array list views, not individual primitive fields.

Your VideoInput component works perfectly because input components replace the actual form input widget for that field. However, the preview component needs to be at the object type level (the video object), not on the individual url string field inside it.

Here's the corrected schema:

defineField({
  name: 'productVideos',
  type: 'array',
  of: [
    defineArrayMember(
      defineType({
        name: 'video',
        type: 'object',
        components: {
          preview: VideoPreview, // Move preview here to the object level
        },
        fields: [
          defineField({
            type: 'string',
            name: 'url',
            validation: (rule) => rule.required(),
            components: {
              input: VideoInput, // Input stays on the field
            },
          }),
        ],
      }),
    ),
  ],
}),

Now your VideoPreview component will render when viewing the array list items. You'll also want to add a preview configuration block to tell Sanity what data to pass to your preview component:

defineType({
  name: 'video',
  type: 'object',
  components: {
    preview: VideoPreview,
  },
  preview: {
    select: {
      url: 'url',
    },
    prepare({url}) {
      return {
        title: url || 'No URL provided',
      };
    },
  },
  fields: [
    defineField({
      type: 'string',
      name: 'url',
      validation: (rule) => rule.required(),
      components: {
        input: VideoInput,
      },
    }),
  ],
})

Your VideoPreview component looks good as-is:

import {PreviewProps} from 'sanity'

export function VideoPreview(props: PreviewProps) {
  return <div style={{border: '1px solid green'}}>{props.renderDefault(props)}</div>
}

The key distinction is: input components control how you edit a field in the form, while preview components control how objects are displayed in list views (like your array of video objects). Preview components work at the object/document level to customize the list item appearance, not on individual primitive fields within those objects.