Messagevisor

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:

  1. build target-specific datafiles with npx messagevisor build
  2. publish or bundle those datafiles
  3. load the right datafile or datafiles for the current target
  4. create a @messagevisor/sdk instance with modules such as ICU
  5. pass locale and user/request context at evaluation time on servers
  6. 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.