Feature request | Kitchn translation system

[jerembdn]

❓ What’s the feature request?

I’d like to propose a built-in translation system for Kitchn, inspired by the approach used in Toglee.

This would allow for internationalized UIs without extra boilerplate and help keep the developer experience clean and intuitive. Before jumping into a PR, I’d love to get your thoughts on the idea and design.

---

💡 Proposed features

1. useTranslation Hook
   A React hook that provides translation utilities:

   const { t } = useTranslation("name/space");
   t('common.hello'); // => "Hello"

2. Smart Text component integration
   Enhance the existing component to support inline translation keys without breaking existing functionality.

   Example usage:

   <Text size="large">__t__.home.welcome</Text>

   If the children string starts with the t. prefix (or another cleaner prefix if preferred), Kitchn will automatically resolve it via the t() function.

   • Keeps current usage unchanged for normal strings.

   • Enables direct translations inline for simple labels.

   • Example output: "Welcome to Kitchn!"

3. KitchnProvider context enhanced
   The KitchnProvider will be enhanced to set up the translation system.

   • translations would be an object similar to Toglee's nested JSON structure.
   • Optional support for fallback languages and dynamic language switching.

🤔 Why?

• Reduces the friction of writing UI in multiple languages.
• Keeps translations colocated with UI components.
• Provides both declarative () and functional (t()) options.

📎 Extra thoughts

• The __t__. prefix is simple, but open to other options like t: or @t: if they’re cleaner.
• This would bring Kitchn closer to being fully app-ready for international markets.

💻 (Future) Opensourced translation management platform (with paying plans / selfhosting)

Look at Toglee and alternatives

Looking forward to hearing your feedback! Would love to help implement this if we agree on the direction.