@sanity/document-internationalization

There are two popular methods of internationalization in Sanity Studio:

Usage no npm install needed!

<script type="module">
  import sanityDocumentInternationalization from 'https://cdn.skypack.dev/@sanity/document-internationalization';
</script>

README

Document Internationalization Plugin for Sanity.io

npm version

Document Level Internationalization UI

What this plugin solves

There are two popular methods of internationalization in Sanity Studio:

  • Document-level translation
    • A unique document version for every language
    • Joined together by references and/or a predictable _id
    • Best for documents that have unique, language-specific fields and no common content across languages
    • Best for translating content using Portable Text
  • Field-level translation
    • A single document with many languages of content
    • Achieved by mapping over languages on each field, to create an object
    • Best for documents that have a mix of language-specific and common fields
    • Not recommended for Portable Text

This plugin adds features to the Studio to improve handling document-level translations.

  • A View Pane to create language versions of each Document
  • Document Actions to update base and translated documents to ensure references stay in tact
  • Document Badges to highlight the language version of a document

For field-level translations you should use the @sanity/language-filter plugin.

Many projects use both!

An example of document-level translation could be a lesson schema, the title, slug and content fields would be unique in every language.

A good use of field-level translation could be a person schema. It could have the same name and image in every language, but only the biography would need translating.

Installation

With the Sanity CLI installed, from the same directory as the Studio run:

sanity install @sanity/document-internationalization

Ensure that @sanity/document-internationalization is listed in plugins inside sanity.json.

The plugin is now installed, but you will need to complete the following steps to see the Document Translation UI:

Setup next steps

  1. Customise Desk Structure
    To setup the 'Translations' View Pane on Documents
  2. Configuration options
    To declare available Languages and other settings
  3. Activating internationalization on schema
    To enable all the above features on schema

Other documentation

  1. Known Caveats
  2. Data structure
  3. Translation Maintenance
  4. GraphQL support
  5. Advanced languages
  6. Usage with custom publish action
  7. GROQ query examples

Migrating from sanity-plugin-intl-input

While most of the UI is the same in the official version of this plugin there are some breaking changes you should be aware of before migrating:

Coming from sanity-plugin-intl-input