Translate the studio UI

[djhi]

Is your feature request related to a problem? Please describe. I build websites for people who needs to manage its content themselves but many of them don't understand English.

Describe the solution you'd like It would be great if the studio UI itself was localized.

Describe alternatives you've considered Forking the default layout and other packages using parts to translate it myself. It would be a pain to maintain though.

Have you considered internationalizing the studio app ? If yes, can I help ? If no, are you open to the idea and would you accept PR for it ?

[evenwestvang]

We're very much open to discussing it, but haven't had the time to think about it properly yet – and do not know if we're quite ready to do it yet. I think we could consider having English as the supported language and have community maintenance of others for the time being. We don't have that many strings.

Is there a localisation framework for JavaScript that's uncontroversially better than the others so it's a trivial choice?

[djhi]

Is there a localisation framework for JavaScript that's uncontroversially better than the others so it's a trivial choice?

This is a dangerous question to ask :laughing:

I had good experiences with react-intl and react-i18n-next

[jsardev]

I just came here planning to create the same issue. I'd love to see this feature in Sanity Studio 😄

[evenwestvang]

Thank you for chiming in @sarneeh and the suggestions @djhi. We have a lot going on right now and definitely want to get this right – especially before involving someone else's time. So we need some time to consider the best APIs and see when this fits into our schedules.

[jsardev]

Thank you for chiming in @sarneeh and the suggestions @djhi. We have a lot going on right now and definitely want to get this right – especially before involving someone else's time. So we need some time to consider the best APIs and see when this fits into our schedules.

Sure thing! As you already mentioned: you don't have that many strings in the app, so I could definitely provide translations to my language (Polish). Unfortunately won't have time to create the whole solution.

Btw. I very much appreciate your interest in providing a good and readable API, for now, it's a great experience using Sanity 😃

[evenwestvang]

Thank you! We also want to extend our localisation to plugins so we need to be careful about the API design for localisation as well. 🙇

[debitan]

I've been looking into this as well. I'm creating studios for Japanese speakers and can localise the name of fields and descriptions. However, it would be best if I could also show 'Publish', 'Duplicate' etc in Japanese too. I'd be more than happy to provide the translation but would appreciate the help on how to implement it.

[debitan]

It would also be nice if the slug generator was able to provide Roman characters based on Japanese fields. Currently it doesn't work and I have to manually type out a Roman character based string.

[evenwestvang]

We will not be prioritising an API for this in the current quarter, but will be tracking this issue. Comments like the above on slug generation are very much appreciated!

[paolodina]

I'd be available to provide/maintain italian strings.

[evenwestvang]

Thank you @paolodina – we so want to make this happen! 😃 && 🙇

[billymoon]

@evenwestvang do you think this feature might be considered for the next quarter?

[clementoriol]

I'd be happy to provide french translations when the feature is ready. Looking forward to this 👍

[gabros20]

I would be happy to contribute with Hungarian translation later on.

[cinza]

I would be happy to help with Spanish translation

[thedevdavid]

Hey @evenwestvang . What do you think, what's the state of this? I think it should be a great idea for Hacktoberfest

[RonaldDijks]

I could help with a Dutch translation if this is still on the roadmap. Do we have an ETA?

[arggh]

Depending on the amount of strings to translate (seems not too many), I'd be up for helping with the Finnish translation.

Currently, it feels a bit confusing to have Finnish titles and descriptions for fields while the UI is in English (I can manage and tolerate, but for the people who actually update content and use the studio...)

[Ragura]

This is also the one issue preventing me from using sanity as my CMS of choice for commercial projects (just using it for hobby projects now), because my clients will not accept an English ui. I hope you’ll consider prioritizing this feature in the near future, considering it’s been in limbo for so long.

[danielmoessner]

Sanity has the best UI of all the headless CMS options I've tested so far. However I can't use it for client projects, because there is no simple method of translating everything to German.

[ghost]

Any progress?

[snorrees]

A workaround we are using, that works if you are self hosting Content Studio. Search-replace strings in app.bundle.js 🙈 after building. Has to be done with care, to not breaking code-related strings, but we have managed to translate about 95% of the studio to norwegian now.

This is not a recommendation though, just a tip if you are desperate.

We do the same to replace dataset name, studio title & theme color for different environments runtime as well.

[ghost]

@snorrees nice workaround! @evenwestvang right?

🤣

[valse]

I'd be available to provide/maintain italian strings.

Me too

[cno-dev]

Any updates on this? @evenwestvang Would you look into PRs if i would try to implement this or would that be a waste of my time?

[alexbchr]

Any update on this would be very appreciated! As a first step, it would be great if there is an official and not hacky way to translate the Studio UI.

Maybe later on the Sanity Studio could come with officially supported languages, but seeing how strong the Sanity Community is, I easily see the Translations being provided through Community maintained plugins.

We have a lot of French-speaking clients and from looking at this issue, it seems to be quite a pain to translate the Studio UI. Having a confirmation that this is on the Sanity Roadmap would make it a whole lot easier to recommend Sanity to our clients, as some of them don't speak English at all.

[s-rd]

I'm also using the Studio for a project where quite non-technical Norwegian volunteers will use it, so a translation would be awesome.

Would be happy to contribute the Norwegian translation :)

[aaadotpm]

This would be amazing. I would also be able to help with Norwegian bokmål and nynorsk translations. For now I will use the semi-localized approach with just field names and descriptions in Norwegian, but I already know the client will cringe when they see "publish" and "duplicate" instead of their translations.

[paul-vd]

Would love to see this, as the studio can also be client-based where they will not always be expected to speak English.

Any updates?

[evenwestvang]

Would love to find the time to do this. Also as adding a language is also such a great first PR.

[MatteoGauthier]

Hey any news on translation of the sanity studio, can i help ?

[s-rd]

+1, also still interested in news on this!

[alexmartinfr]

I was considering Sanity for an enterprise project, but our user base will need a French UI.

I can provide localization the day you offer this feature 👍

[alexbchr]

Yeah would be glad to offer help as well for the french translations. We have many clients who speak french and it's kinda sad that Sanity doesn't support extra languages. Seeing how great the community is on Sanity, I think the Sanity team could just provide a way to translate the Studio UI and the community could easily contributes to the different translations.

[simonpeters]

any progress update on this?

[rafael-lua]

It is really sad having to give up on the tool because it doesn't offer translations support. Please, 2 years since the issue started, could you guys give us any update on this? Its REALLY important for many of us.

[MatteoGauthier]

I can contribute if sanity support translation

[s-rd]

Really does feel like the one missing piece at this point!

[opexchanger]

A way to allow me to provide my own translation would already suffice, I think perhaps in most cases as well. No guidelines regarding something like this?

[DaveKeehl]

I would also love to have the Studio UI localized ❤️

[pointout]

I can contribute to German translation. Would really love to see translation support.

[milovangudelj]

I think this could be a feature that significantly expands the adoption of Sanity. Many people avoid it just because their clients don't know English that well and would have a hard time using it. It's definitely a pain point.

I had to use CMSes with English UIs a couple of times, and I had to spend a good chunk of my and my client's time teaching them how to use a tool in a language they didn't know.

I'd be more than happy to help with Italian translations when and if the feature get's introduced. :blush:

[linkurzweg]

I also would love this feature. We're currently looking for a headless CMS in my company for our next project and Sanity looks great! But being unable to translate the studio UI prevents us from using it. I'd be happy to help with translations to German when/if this feature becomes available.

[nimser]

Has work started on this front? I don't see a single feature at this point that is more worthy of attention than this one. Key for true adoption of Sanity in a multilingual world. An english-only localized official version with community translations sounds like a good starting point.

[johannesmutter]

Since this issue is open for 3 years now, can we safely say Sanity is not getting translated? Or is there a plan for Q4 2022 or Q1 2023?

I'm asking because as a developer I love Sanity. But some of my clients, especially in Germany and Korea really struggle with the non translated UI (e.g. "add item", "publish", "review changes", "duplicate", "click to activate", "generate", etc.).

There’re only a few dozen texts in studio that are crucial for daily activities. So I imagine it would be quite easy to search & replace all those strings with a translation function:

The most basic implementation could look like this:

// original string
`Referenced by ${x} items`
// replaced by:
$t("Referenced by $x items",[$x: x])

The translate function $t would import a JSON from the studio folder (e.g. "lang/de-DE.json" for German) with the english key "Referenced by $x items", if there’s no translation it falls back to English. Plugins could also import the $t function and get easily translated. The community seems to be more than happy to provide some default translations, but I think it makes most sense to let developers override them all as well in studio (so there could be a default "de-DE.json" and a "de-DE-overrides.json").

I’m happy to help with translations in German and Korean. 🙌

---

Lastly what's a "recommended" way to hack the UI, a chrome extension? replace strings in app.bundle.js as a post build step?

[choutkamartin]

Because I have seen exactly zero motion regarding this issue, which is sort of a deal breaker to me, I will try to code a working example in the upcoming days or weeks. I will do it via "set the language as a context" in React (because even theme is set that way, no cookies - which kinda sucks when I do F5) and "developer can set the initial language of CMS in configuration" way. If you wish to stop me, because somebody started on this issue already, please do it before it's too late and before I'm deep into a rabbit hole, thanks 🙂

[choutkamartin]

I had a while to spare, so I did this:

https://user-images.githubusercontent.com/45522695/204953674-be88c08e-c77e-4834-9553-c347530f4eea.mp4

I used i18next/react-i18next. The default language can be chosen by the developer, so the editor shouldn't be terrified seeing a new language after logging in. The language can be changed via the select. The language is persisted between page refreshes because it's saved to LocalStorage.

/// sanity.json
"project": {
  "name": "Test studio"
},
"language": "fr", // Default language

I only used the useTranslation() hook, but some "components" need little changes to make the translation work, such as the dashboard tool which exports an object like this:

export default {
  title: 'Dashboard',
  name: 'dashboard',
  icon: DashboardIcon,
  component: Dashboard,
}

Because it 's not a "function component", it can't use hooks. That's why I export key of the translation as follows:

export default {
  title: 'dashboard',
  name: 'dashboard',
  icon: DashboardIcon,
  component: Dashboard,
}

And then, when mapping these navbar tools I use the useTranslation hook as the Navbar/ToolMenu is a component:

const {t} = useTranslation()
...
{tools.map((tool) => {
          const title = t(tool.title) || tool.name

Let me know what you think of this 🙂

[choutkamartin]

I have also been wondering. Developer can setup own structure of the CMS, meaning he can setup for example own Desk structure. The structure takes title as an input, so there's no to little way of providing translations for that. But that doesn't matter too much, right? I'm guessing, as a developer building the CMS for a French client would set title as "Contenu" instead of "Content" and would be okay with it. Or does somebody have any ideas how to provide translations for "user/developer" defined content?

S.list()
    .id('root')
    .title('Content')

[FR073N]

This is exactly what we need on our side too. I'll be more happy to propose a PR if someone guide me on how to do it.

[Karytonn]

Congrats on finding a solution! 👏🏻👏🏻👏🏻

Could you offer us a working example via github repository?

Thanks! 🚀