Revolutionize React i18n – Edit Translations Live on Your Site with SejHey

#webdev #i18n #react #nextjs

Let’s be honest: Localizing a React app is NOT hard — there are tons of tools to help you. But(!)... once you start actually doing it, you quickly realize it is a hassle. You dig through JSON files, make changes, get pinged a thousand times by contributors, guess where text shows up, and pray the context makes sense when translated.

But what if you and your team could just… click the text on your site and edit the translation right there?

That’s exactly what SejHey does. No Chrome plugins or complex setup, it "just works", and handles everything for you.

The Old Way of React i18n

JSON hell (thousands of keys, no idea where they appear)
Config headaches (react-i18next, namespaces, fallbacks…)
Context switching (app in one tab, translations in another, or worse, in a JSON file)
Slow iteration (change → save → deploy → refresh → check → repeat)

Sound familiar? 😅

The SejHey Way

With SejHey, your React app becomes the translation editor:

See a string in your app? 👉 Click it
Edit the translation inline, or create a new one.
Save, and it updates instantly.

Translations are saved through the SejHey API, which automatically refreshes CDN caches and delivers the updates to all your end users. Prefer more control over when updates go live? With SejHey, you can manage releases across different environments—such as test, staging, and production. This way, you only publish to production once your updates have been reviewed and approved.

Quick Start in React

Install the SDK:

npm install @sejhey/react-i18n

Initialize i18n and wrap your app:

import { SejheyI18n, SejHeyProvider } from '@sejhey/react-i18n'

const i18n = new SejheyI18n({
  defaultLanguage: 'en',
  projectId: 'YOUR_PROJECT_ID' //Replace with your project_id at SejHey
})
.useCdnLoader()
.useInContextEditor()
.useLanguagePicker()

export default function MyApp() {
  return (
    <SejHeyProvider i18n={i18n}>
      <YourComponents />
    </SejHeyProvider>
  )
}

Using Translations in Components

It got everything you need, variables, pluralization, fallback values and much more.

import { T, useTranslate } from '@sejhey/react-i18n'

const MyComponent = () => {
  const { t } = useTranslate()
  return (
    <>
      {t('welcome_message')}
      <T keyName='welcome_message' />
      <T keyName='unread_messages' params={{ count: 3 }} />
      <T keyName='welcome_name' params={{ name: 'John' }} />
    </>
  )
}

Smooth SSR with Next.js

SejHey works seamlessly with server-side rendering:

// pages/_app.tsx
import { SejHeyProvider } from '@sejhey/react-i18n'
import { i18n } from '../i18n'

/* Wrap you app. Usually _app.tsx */
export default function MyApp({ Component, pageProps, serialized }:
 { Component: any, pageProps: any, serialized?: any }) {
  return (
    <SejHeyProvider i18n={i18n} serialized={serialized}>
      <Component {...pageProps} />
    </SejHeyProvider>
  );
}

/* Init the plugin on the server side */
MyApp.getInitialProps = async (appContext: AppContext) => 
getSejHeyInitialProps(App,appContext, i18n);

Blazing-Fast Performance

Translations are cached in your Next.js backend or browser, ensuring lightning-fast load times for your users. SejHey also leverages the advanced stale-while-revalidate (SWR) strategy, so updates appear in your app almost instantly—without sacrificing the benefits of caching.

CDN & Cloudflare Workers

Distribute your translations via CDN for ultra-fast global delivery:

Cloudflare Workers cache translations at the edge locations
Automatically prunes the cache if changes are made
Minimal network requests for end users

Language Detection

SejHey automatically detects and loads each user’s preferred language right out of the box. You can also customize detection with multiple configuration options to fit your needs.

The SejHey Editor

In addition to editing translations directly on your website, you can also take advantage of the powerful SejHey Editor. It comes packed with advanced tools to make managing and refining your translations easier than ever. It features so many additional features:

Glossaries
Contributors
Quality assurance, spelling, variables, dots etc.
AI Translations
History
Comments
Tasks
Gitbhub integration

How is in-conext mode activated?

Enable the in-context editor in your app by enabling .useInContextEditor() when initializing the SejHey plugin.

Once enabled, the editor is activated by include the query param ?in_context=true to your URL. The user is then prompted to authenticate their access through SejHey. Contributors can click directly on texts in your app to edit translations directly on your web page.

Does in-context editing bloat my bundle size?

No. When in-context editing is enabled, the necessary script is lazy-loaded into your frontend. It’s only loaded when needed, keeping your bundle lean.

Does my production app depend on SejHey servers?

No. Translations are always cached on edge servers powered by Cloudflare—the world’s most reliable CDN. They’re also stored locally in your Next.js backend for extra reliability.

Can I use static files as a fallback?

Yes. SejHey fully supports static translation files, just like popular plugins such as i18next.

But isn’t this expensive?

No! SejHey was born out of frustration with i18n services that charged far too much for simple functionality. From the start, the goal has been to build a powerful, advanced tool that startups and growing teams can actually afford. Plus, SejHey offers a generous free version that already covers most use cases.