npm i better-translation

Local-first translation for Vite apps.

Mark copy where you author it. The Vite plugin discovers Messages, generates flat Locale value JSON, and keeps React and Svelte apps in sync. Edit ordinary JSON or bring your own AI translator, with no account required.

Open source. No account, API key, or hosted runtime required.

Checkout.tsx
export function Checkout() {
  return (
    <button>
      <T>Pay now</T>  // Pagar ahora
    </button>
  )
}

See it in action

The local workflow, end to end

Mark UI copy, let the Vite plugin discover it, then edit a flat Locale JSON file and see the translated app update during development. Add AI translation only when it helps.

Built for modern Vite apps

ViteReactTanStack StartSvelteSvelteKitTypeScript
Local-first setup

Add the plugin. Keep ordinary JSON.

List your Locales and the plugin generates flat Runtime bundles in your app. Commit them with your code, fill missing Locale values with your own translator, or edit the JSON directly.

vite.config.ts
import { defineConfig } from "vite"
import { betterTranslation } from "better-translation/vite"

export default defineConfig({
  plugins: [
    betterTranslation({
      locales: ["en", "es", "fr"],
      defaultLocale: "en",
    }),
  ],
})
No account, API key, or hosted runtime required.

End-to-end localization

From source copy to shipped translations

The Vite plugin owns discovery, generation, and runtime loading while your app keeps ordinary flat files.

01

Mark

Wrap copy in a Translation marker where it is authored. No keys to invent or maintain.

02

Discover

The Vite plugin discovers Messages and gives each one a stable lookup id.

03

Fill

Edit flat Locale JSON directly or fill missing Locale values with your own translator.

04

Ship

Consumer apps load flat Runtime bundles by Locale. No editor metadata reaches the browser.

The open-source library

Localization that lives with your codebase

Developer-first primitives that work entirely local, with no account and no platform required.

Vite plugin

Discovers Messages from source code and writes local artifacts on every build.

React, Svelte, and server helpers

Render Messages across your app with the same lookup ids and flat Runtime bundles.

Automatic lookup ids

Wrap copy in a Translation marker. There are no keys to invent or maintain by hand.

Runtime bundles

Serve flat lookup id maps that are ready for the Consumer app, with zero metadata.

Bring your own translator

Fill missing Locale values with any async function, including the optional built-in AI helper.

Local editor

Search Messages and edit local Locale values in the browser during Vite development.

Hosted workflow · Optional

Add a shared dashboard when the team needs it

Everything above works without an account. When developers and translators need a shared workflow, connect the hosted service for branch-aware editing while your Consumer app keeps the same runtime API.

  • Edit shared Locale values without giving everyone code access
  • Keep feature Branch changes isolated from Production
  • Generate missing Locale values with Project translation guidance
  • Serve branch-addressed Runtime bundles to every environment
Better Translation platform showing branch-local Message editing

Translate your Vite app today

Wrap your first Message, run the plugin, and watch translations follow your code.