Displaying Localized String Titles in Sanity Studio with Field-Level Translations

I can see you're working with field-level translations and running into the common challenge of displaying localized titles in Studio's preview. The issue is that when you have a localized string object (like {en: "English Title", no: "Norwegian Title"}), the preview shows the entire object rather than the specific language you want.

The solution is to use the preview configuration's select and prepare functions to extract and display the correct language from your localeString object. Here's how to set it up:

// page.js
import localeString from './localeString'

export default {
  name: 'page',
  type: 'document',
  fields: [
    {
      name: 'title',
      type: 'localeString'
    },
    // ... other fields
  ],
  preview: {
    select: {
      title: 'title' // This selects the entire localeString object
    },
    prepare({title}) {
      return {
        title: title?.en || title?.no || 'Untitled', // Pick your default language
        subtitle: 'Page'
      }
    }
  }
}

However, if you want to make it more dynamic and show the current language the editor is working in, you can select multiple language fields using dot notation to access nested fields:

preview: {
  select: {
    titleEn: 'title.en',
    titleNo: 'title.no'
  },
  prepare({titleEn, titleNo}) {
    // Choose which language to display as primary
    return {
      title: titleEn || titleNo || 'Untitled',
      subtitle: titleNo ? `NO: ${titleNo}` : undefined
    }
  }
}

Note on the Language Filter Plugin: If you want a more sophisticated solution where the preview automatically shows the language you're currently editing, consider using the Language Filter plugin. It provides a language selector in Studio and can help manage which language is displayed throughout the interface.

For field-level translations, be aware that while this approach works well for simple strings, the Sanity documentation recommends document-level localization over field-level for Portable Text and complex content to avoid hitting attribute limits.

The key insight here is that you don't need to "pass down" the title from your localeString schema to your page schema. Instead, you configure the preview directly in your page schema to extract the specific language field you want to display. The select object can access nested properties using dot notation ('title.en'), which pulls out just the English version from your localeString object.