Transifex now Available as a Plugin for Sanity

Sanity is well-known for being one of the world’s best content platforms – and now you can use it with Transifex!

Here is all you need to know about the Transifex plugin for Sanity, how to use it, and how to install it!

What is Sanity

Sanity is the platform for structured content that lets you build better digital experiences They treat content as data, which means you can use their APIs to build optimal workflows and share content between systems to increase velocity.

Sanity comes with an open-source editing environment called Sanity Studio, and a real-time database called Content Lake. You can use their platform to power eCommerce sites, marketing sites, products, mobile apps, and more. And since they are built on structured content, you can easily publish and reuse your content across apps, devices, and channels.

If you are interested in learning more about it, feel free to check out Sanity’s website.

So, Sanity specializes in content management while Transifex specializes in localization. Using both of these tools may be a match in heaven, which is where Sanity’s plugin comes in!

The Transifex Plugin for Sanity

This plugin allows you to send documents to Transifex and then get them back when they are completed, or even when they are not if you want to – all with the press of a button.

Thanks to that, you won’t have to spend extra time downloading and uploading files between the two platforms.

Everything happens from within the Sanity Studio. And to make the process easier, you get a dedicated tab for your “to be translated” documents.

Furthermore, you also get customizable HTML and document patching tooling along with a customizable adapter for the Transifex API.

How to Install

To install the Transifex Plugin:

1. Go to your Sanity Studio folder
2. Run “sanity install sanity-plugin-transifex”
3. Create a document that includes your Transifex’s organization name, project name, and an API token with the appropriate level of access (That’s for giving Sanity access to your Transifex account)
4. Back in the Studio, create “populateTransifexSecrets.js”

Now you want to open that file and insert your values in this way: Once that’s done:

import sanityClient from 'part:@sanity/base/client'

const client = sanityClient.withConfig({ apiVersion: '2021-03-25' })

client.createOrReplace({
_id: 'transifex.secrets',
_type: 'transifexSettings',
organization: 'YOUR_ORG_HERE',
project: 'YOUR_PROJECT_HERE',
token: 'YOUR_TOKEN_HERE',
})

Open the command line and run “sanity exec populateTransifexSecrets.js –with-user-token”. You can verify that it works by using Vision to query *[_id == ‘transifex.secrets’]. And you’ll have to do this across all databases, if you have multiple ones.

Once you verify that everything is okay, go ahead and delete the “populateTransifexSecrets.js”  file. The document’s _id won’t be exposed to the outside world. But if that’s worrying you, you can go ahead and control access to this path with Sanity’s role-based access control.

Last, but not least, use desk structure to get the Transifex tab on your document type. A typical example would look like:

import S from '@sanity/desk-tool/structure-builder'
//...your other desk structure imports...
import { TranslationTab, defaultDocumentLevelConfig, defaultFieldLevelConfig } from 'sanity-plugin-transifex'


export const getDefaultDocumentNode = (props) => {
  if (props.schemaType === 'myTranslatableDocumentType') {
    return S.document().views([
      S.view.form(),
      //...my other views -- for example, live preview, the i18n plugin, etc.,
      S.view.component(TranslationTab).title('Transifex').options(
        defaultDocumentLevelConfig  
      )
    ])
  }
  return S.document();
};

And that’s about it. If you have any questions or you want to know more details, feel free to refer to the guide or the GitHub repo.