ProxyLang SDK - Instant website translation for JavaScript frameworks. Works standalone or with ProxyLang server-side proxy.
npm install @proxylang/sdkProxyLang is an instant website translation service. It translates your website content in real-time and delivers it to users in their preferred language.
ProxyLang offers two translation approaches:
The proxy intercepts requests to your website, translates the content server-side, and delivers fully translated pages to users. Zero flicker, instant load times, perfect SEO.
URL patterns supported:
- /ko-kr/about — Full locale code
- /kr/about — Country code (auto-detected)
- /ko/about — Language code (auto-detected)
With server-side proxy, users receive pre-translated HTML. No JavaScript required.
For dynamic content rendered by JavaScript frameworks (React, Vue, Next.js, Nuxt, etc.), the SDK translates content in the browser after it renders.
Use the SDK when:
- Your app has client-side routing (SPAs)
- Content is loaded dynamically via AJAX
- You're using the proxy and need to translate JavaScript-rendered content
---
``bash`
npm install @proxylang/sdkor
pnpm add @proxylang/sdkor
yarn add @proxylang/sdk
Or include via CDN:
`html`
---
If you're using ProxyLang's server-side proxy, the SDK only needs to handle new content added by JavaScript:
`javascript
import { ProxyLang } from '@proxylang/sdk'
ProxyLang.init({
apiKey: 'pk_live_xxx',
targetLang: 'ko-KR',
mode: 'dynamic', // Only translate new DOM content
})
`
For client-side only translation:
`javascript
import { ProxyLang } from '@proxylang/sdk'
ProxyLang.init({
apiKey: 'pk_live_xxx',
targetLang: 'es-MX',
mode: 'full', // Translate entire page (default)
})
`
---
`javascript`
ProxyLang.init({
// Required
apiKey: 'pk_live_xxx',
targetLang: 'es-MX',
// Mode
mode: 'full', // 'full' (default) or 'dynamic'
// Optional
sourceLang: 'en', // Default source language
selectors: ['body'], // CSS selectors to translate
exclude: ['.no-translate', 'code'], // Exclude these selectors
autoTranslate: true, // Translate on page load
observeMutations: true, // Watch for DOM changes
debug: false, // Enable console logging
// Callbacks
onStart: () => {},
onComplete: (stats) => console.log('Done:', stats),
onError: (error) => console.error(error),
onQuotaExceeded: (info) => {
window.location.href = info.upgradeUrl
},
})
| Mode | Description | Use Case |
|------|-------------|----------|
| full | Translates entire page on load | Client-side only apps |dynamic
| | Only translates new DOM content | With server-side proxy |
---
Initialize the SDK. Call once on app startup.
Manually trigger translation. Returns stats.
`javascript`
const stats = await ProxyLang.translate()
// { stringsTranslated: 42, cacheHits: 30, cacheMisses: 12, timeMs: 150 }
Change language and re-translate.
`javascript`
await ProxyLang.setLanguage('fr-CA')
Get current target language.
`javascript`
ProxyLang.getLanguage() // 'es-MX'
Clear all cached translations.
`javascript`
ProxyLang.clearCache()
Clean up the SDK instance.
---
When using the proxy, switching languages is a simple URL redirect:
`javascript/${langCode.toLowerCase()}${path}
function switchLanguage(langCode) {
// Remove existing language prefix
const path = window.location.pathname.replace(/^\/[a-z]{2}(-[a-z]{2})?\//i, '/')
// Redirect to new language
window.location.href = `
}
`html`
`javascript`
const changeLanguage = async (lang) => {
await ProxyLang.setLanguage(lang)
}
---
Check if the current page was served by ProxyLang proxy:
`javascript
import { isProxyTranslated } from '@proxylang/sdk'
if (isProxyTranslated()) {
// Page is pre-translated, use dynamic mode
ProxyLang.init({ mode: 'dynamic', ... })
} else {
// Full client-side translation
ProxyLang.init({ mode: 'full', ... })
}
`
Extract language code from URL path:
`javascript
import { getLanguageFromPath } from '@proxylang/sdk'
const lang = getLanguageFromPath() // 'ko-kr' from /ko-kr/about
`
---
`jsx
import { useEffect, useState } from 'react'
import { ProxyLang, isProxyTranslated } from '@proxylang/sdk'
function App() {
useEffect(() => {
ProxyLang.init({
apiKey: 'pk_live_xxx',
targetLang: 'es-MX',
mode: isProxyTranslated() ? 'dynamic' : 'full',
})
return () => ProxyLang.destroy()
}, [])
return
$3
`vue
`---
Excluding Content
$3
`html
Don't translate this
Or this
`$3
For larger sections:
`html
This entire section stays in the original language
- 日本語
- 한êµì–´
`$3
`javascript
ProxyLang.init({
exclude: ['.brand-name', 'code', 'pre', '[data-no-translate]'],
})
``---
ProxyLang supports 50+ languages including:
- 🇺🇸 English, 🇪🇸 Spanish, 🇫🇷 French, 🇩🇪 German
- 🇯🇵 Japanese, 🇰🇷 Korean, 🇨🇳 Chinese (Simplified & Traditional)
- 🇸🇦 Arabic, 🇮🇱 Hebrew, 🇮🇳 Hindi
- And many more...
Full list at proxylang.dev/languages
---
- Edge-cached — Translations cached at edge for instant delivery
- Deduplication — Identical strings translated once
- Batching — All strings sent in a single request
- Persistent cache — LocalStorage caching for return visitors
---
| Tier | Included | Price |
|------|----------|-------|
| Free | 10,000 tokens | $0 |
| Starter | 100,000 tokens | $9/mo |
| Pro | 1M tokens | $49/mo |
| Business | 10M tokens | $199/mo |
Only cache misses count toward usage. Cached translations are free.
---
1. Sign up at proxylang.dev
2. Create an API key
3. Install the SDK or configure the proxy
4. Start translating!
---
MIT © ProxyLang