Frameworks

Framework guides show how to load Messagevisor datafiles, create SDK instances, pass runtime context, and render translated output in common application environments.

Start with the guide that matches your application:

Shared model#

Every framework integration follows the same shape:

build target-specific datafiles with npx messagevisor build
publish or bundle those datafiles
load the right datafile or datafiles for the current target
create a @messagevisor/sdk instance with modules such as ICU
pass locale and user/request context at evaluation time on servers
render strings through the SDK or React hooks

Framework code should not know how messages are authored. It should only know which datafile to load and what context to pass.

Server-side requests#

Servers usually handle many users at the same time. Keep one shared Messagevisor instance with the locale datafiles your server needs, then pass the request locale and context per evaluation:

JavaScript

const datafiles = await Promise.all(
  ["en-US", "nl-NL"].map((locale) =>
    fetch(`https://cdn.yoursite.com/datafiles/messagevisor-web-${locale}.json`).then(
      (response) => response.json()
    )
  )
);
const m = createMessagevisor({ datafile: datafiles[0] });
datafiles.slice(1).forEach((datafile) => m.setDatafile(datafile));
m.translate(
  "dashboard.welcome",
  { name: user.name },
  {
    locale: requestLocale,
    context: { plan: user.plan, platform: "web" },
  }
);

Do not call setLocale() or setContext() inside request handlers on a shared server instance.

Those methods mutate instance state. Per-call locale and context keep concurrent requests isolated while still reusing loaded datafiles and formatter caches.

Client-side apps#

Client-side apps usually serve one user at a time. Keep that simple: create the SDK for the active datafile/locale, and use setLocale() when the user changes language after loading the new datafile.

JavaScript

const m = createMessagevisor({ datafile });
m.translate("dashboard.welcome", { name: user.name });

You normally do not need to pass locale on every client-side translation call.

Shared model#

Server-side requests#

Client-side apps#

Related#