Neonatal Penguin March

    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published


    Actions Actions deno Travis npm version

    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.

    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 want to manage your translation files manually or are simply looking for a better management solution, take a look at i18next-locize-backend.

    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'

      load: 'languageOnly',
      // other options

    Getting started

    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.

    # npm package
    $ npm install i18next-http-backend

    Wiring up:

    import i18next from 'i18next';
    import HttpApi from 'i18next-http-backend';

    for Deno:

    import i18next from ''
    import Backend from ''

    for plain browser:

    <script src=""></script>
    <!-- an example can be found in example/jquery/index.html -->
    • As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
    • If you don't use a module loader it will be added to window.i18nextHttpBackend

    Backend Options

      // path where resources get loaded from, or a function
      // returning a path:
      // function(lngs, namespaces) { return customPath; }
      // the returned path will interpolate lng, ns if provided like giving a static path
      // the function might return a promise
      // returning falsy will abort the download
      // If allowMultiLoading is false, lngs and namespaces will have only one element each,
      // If allowMultiLoading is true, lngs and namespaces can have multiple elements
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      // path to post missing resources, or a function
      // function(lng, namespace) { return customPath; }
      // the returned path will interpolate lng, ns if provided like giving a static path
      addPath: '/locales/add/{{lng}}/{{ns}}',
      // your backend server supports multiloading
      // /locales/resources.json?lng=de+en&ns=ns1+ns2
      // Adapter is needed to enable MultiLoading
      // Returned JSON structure in this case is
      // {
      //  lang : {
      //   namespaceA: {},
      //   namespaceB: {},
      //   ...etc
      //  }
      // }
      allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
      // parse data after it has been fetched
      // in example use
      // here it removes the letter a from the json (bad idea)
      parse: function(data) { return data.replace(/a/g, ''); },
      //parse data before it has been sent by addPath
      parsePayload: function(namespace, key, fallbackValue) { return { key } },
      // allow cross domain requests
      crossDomain: false,
      // allow credentials on cross domain requests
      withCredentials: false,
      // overrideMimeType sets request.overrideMimeType("application/json")
      overrideMimeType: false,
      // custom request headers sets request.setRequestHeader(key, value)
      customHeaders: {
        authorization: 'foo',
        // ...
      // can also be a function, that returns the headers
      customHeaders: () => ({
        authorization: 'foo',
        // ...
      requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })
        mode: 'cors',
        credentials: 'same-origin',
        cache: 'default'
      // define a custom request function
      // can be used to support XDomainRequest in IE 8 and 9
      // 'options' will be this entire options object
      // 'url' will be passed the value of 'loadPath'
      // 'payload' will be a key:value object used when saving missing translations
      // 'callback' is a function that takes two parameters, 'err' and 'res'.
      //            'err' should be an error
      //            '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
      //            requested language and namespace, or null in case of an error.
      request: function (options, url, payload, callback) {},
      // adds parameters to resource URL. '' -> ''
      queryStringParams: { v: '1.3.5' },
      reloadInterval: false // can be used to reload resources in a specific interval (useful in server environments)

    Options can be passed in:

    preferred - by setting options.backend in i18next.init:

    import i18next from 'i18next';
    import HttpApi from 'i18next-http-backend';
      backend: options,

    on construction:

    import HttpApi from 'i18next-http-backend';
    const HttpApi = new HttpApi(null, options);

    via calling init:

    import HttpApi from 'i18next-http-backend';
    const HttpApi = new HttpApi();
    HttpApi.init(null, options);

    Gold Sponsors

    From the creators of i18next: localization as a service -

    A translation management system built around the i18next ecosystem -


    With using locize you directly support the future of i18next.


    npm i i18next-http-backend

    DownloadsWeekly Downloads






    Unpacked Size

    82 kB

    Total Files


    Last publish


    • adrai
    • jamuhl