Gathering detailed insights and metrics for i18next-http-payload-backend
Gathering detailed insights and metrics for i18next-http-payload-backend
Gathering detailed insights and metrics for i18next-http-payload-backend
Gathering detailed insights and metrics for i18next-http-payload-backend
i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno.
npm install i18next-http-payload-backend
Typescript
Module System
Node Version
NPM Version
JavaScript (70.11%)
HTML (14.68%)
TypeScript (9.37%)
Vue (4.31%)
CSS (1.45%)
Less (0.08%)
Total Downloads
6,893
Last Day
6
Last Week
41
Last Month
169
Last Year
2,156
MIT License
488 Stars
282 Commits
71 Forks
6 Watchers
1 Branches
29 Contributors
Updated on Jun 25, 2025
Minified
Minified + Gzipped
Latest Version
1.4.1-rc.0
Package Id
i18next-http-payload-backend@1.4.1-rc.0
Unpacked Size
757.23 kB
Size
169.74 kB
File Count
43
NPM Version
8.19.2
Node Version
14.17.5
Cumulative downloads
Total Downloads
1
20
This is a simple i18next backend to be used in Node.js, in the browser and for Deno. It will load resources from a backend server using the XMLHttpRequest or the fetch API.
Get a first idea on how it is used in this i18next crash course video.
It's based on the deprecated i18next-xhr-backend and can mostly be used as a drop-in replacement.
Why i18next-xhr-backend was deprecated?
If you don't like to manage your translation files manually or are simply looking for a better management solution, take a look at i18next-locize-backend. The i18next backed plugin for 🌐 locize ☁️.
To see i18next-locize-backend in a working app example, check out:
Make sure you set the debug
option of i18next to true
. This will maybe log more information in the developer console.
Seeing failed http requests, like 404?
Are you using a language detector plugin that detects region specific languages you are not providing? i.e. you provide 'en'
translations but you see a 'en-US'
request first?
This is because of the default load
option set to 'all'
.
Try to set the load
option to 'languageOnly'
1i18next.init({ 2 load: 'languageOnly', 3 // other options 4})
Source can be loaded via npm or downloaded from this repo.
There's also the possibility to directly import it via a CDN like jsdelivr or unpkg or similar.
1# npm package 2$ npm install i18next-http-backend
Wiring up:
1import i18next from 'i18next'; 2import HttpApi from 'i18next-http-backend'; 3 4i18next.use(HttpApi).init(i18nextOptions);
for Deno:
1import i18next from 'https://deno.land/x/i18next/index.js' 2import Backend from 'https://deno.land/x/i18next_http_backend/index.js' 3 4i18next.use(Backend).init(i18nextOptions);
for plain browser:
1<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script> 2<!-- an example can be found in example/jquery/index.html -->
window.i18nextHttpBackend
1{ 2 // path where resources get loaded from, or a function 3 // returning a path: 4 // function(lngs, namespaces) { return customPath; } 5 // the returned path will interpolate lng, ns if provided like giving a static path 6 // the function might return a promise 7 // returning falsy will abort the download 8 // 9 // If allowMultiLoading is false, lngs and namespaces will have only one element each, 10 // If allowMultiLoading is true, lngs and namespaces can have multiple elements 11 loadPath: 'http://localhost:3333/locales/{{lng}}/{{ns}}.json', 12 13 // path to post missing resources, or a function 14 // function(lng, namespace) { return customPath; } 15 // the returned path will interpolate lng, ns if provided like giving a static path 16 addPath: '/locales/add/{{lng}}/{{ns}}', 17 18 // path where local filesystem resources get loaded from, or a function 19 // returning a path: 20 // function(lngs, namespaces) { return customPath; } 21 // the returned path will interpolate lng, ns if provided like giving a static path 22 // the function might return a promise 23 localLoadPath: '/locales/en/{{ns}}.json', 24 25 // your backend server supports multiloading 26 // /locales/resources.json?lng=de+en&ns=ns1+ns2 27 // Adapter is needed to enable MultiLoading https://github.com/i18next/i18next-multiload-backend-adapter 28 // Returned JSON structure in this case is 29 // { 30 // lang : { 31 // namespaceA: {}, 32 // namespaceB: {}, 33 // ...etc 34 // } 35 // } 36 allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading 37 38 // parse data after it has been fetched 39 // in example use https://www.npmjs.com/package/json5 40 // here it removes the letter a from the json (bad idea) 41 parse: function(data) { return data.replace(/a/g, ''); }, 42 43 //parse data before it has been sent by addPath 44 parsePayload: function(namespace, key, fallbackValue) { return { key } }, 45 46 // allow cross domain requests 47 crossDomain: false, 48 49 // allow credentials on cross domain requests 50 withCredentials: false, 51 52 // overrideMimeType sets request.overrideMimeType("application/json") 53 overrideMimeType: false, 54 55 // custom request headers sets request.setRequestHeader(key, value) 56 customHeaders: { 57 authorization: 'foo', 58 // ... 59 }, 60 // can also be a function, that returns the headers 61 customHeaders: () => ({ 62 authorization: 'foo', 63 // ... 64 }), 65 66 requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' }) 67 mode: 'cors', 68 credentials: 'same-origin', 69 cache: 'default' 70 } 71 72 // define a custom request function 73 // can be used to support XDomainRequest in IE 8 and 9 74 // 75 // 'options' will be this entire options object 76 // 'url' will be passed the value of 'loadPath' 77 // 'payload' will be a key:value object used when saving missing translations 78 // 'callback' is a function that takes two parameters, 'err' and 'res'. 79 // 'err' should be an error 80 // 'res' should be an object with a 'status' property and a 'data' property containing a stringified object instance beeing the key:value translation pairs for the 81 // requested language and namespace, or null in case of an error. 82 request: function (options, url, payload, callback) {}, 83 84 // adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5' 85 queryStringParams: { v: '1.3.5' }, 86 87 reloadInterval: false // can be used to reload resources in a specific interval (useful in server environments) 88}
Options can be passed in:
preferred - by setting options.backend in i18next.init:
1import i18next from 'i18next'; 2import HttpApi from 'i18next-http-backend'; 3 4i18next.use(HttpApi).init({ 5 backend: options, 6});
on construction:
1import HttpApi from 'i18next-http-backend'; 2const HttpApi = new HttpApi(null, options);
via calling init:
1import HttpApi from 'i18next-http-backend'; 2const HttpApi = new HttpApi(); 3HttpApi.init(null, options);
From the creators of i18next: localization as a service - locize.com
A translation management system built around the i18next ecosystem - locize.com.
With using locize you directly support the future of i18next.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 existing vulnerabilities detected
Reason
4 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 5
Reason
Found 2/24 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
-66.7%
6
Compared to previous day
Last Week
-26.8%
41
Compared to previous week
Last Month
29%
169
Compared to previous month
Last Year
-21.3%
2,156
Compared to previous year