glosa
Esc

Write plain text. Ship every language.

Write your components in plain text, with no t() and no keys. One Vite plugin turns every run of text into a message, and keeps the catalogs as flat JSON that x18n checks and translates.

Get startedGitHub

You write this:

Vue
<h1>Welcome back, {{ user.name }}</h1>
<p>Read the <a href="/guide">guide</a> before you <strong>deploy</strong>.</p>
<input placeholder="Search messages" />
vue
React
<h1>Welcome back, {user.name}</h1>
<p>
  Read the <a href="/guide">guide</a> before you <strong>deploy</strong>.
</p>
<input placeholder="Search messages" />
tsx
Svelte
<h1>Welcome back, {user.name}</h1>
<p>Read the <a href="/guide">guide</a> before you <strong>deploy</strong>.</p>
<input placeholder="Search messages" />
svelte

The build writes this, the same for all three:

{
  "112b1022f9": "Welcome back, {name}",
  "2edbea9ab7": "Read the <0>guide</0> before you <1>deploy</1>.",
  "ddf0602b21": "Search messages"
}
locales/en.json

Add locales/es.json with the same IDs, and the page speaks Spanish.

What you get

Section titled "What you get"
  • Plain text is the source. Text and the attributes people read are messages. translate="no" opts an element out.
  • IDs from the text. An ID is a hash of the source text, so the same sentence anywhere is one message, and moving a link or a class keeps its ID.
  • Translations survive edits. Rename a variable and every translation follows. Reword a sentence and the old translation stays next to it, to update.
  • Built on x18n. Its CLI, editor extension, devtools and AI translation read and edit the catalogs through glosa/x18n.
  • Live. Edit a catalog and the page updates without a reload. setLocale switches language in place, and server rendering gets one store per request.

Questions

Section titled "Questions"
Does it change how I write components?No. You write the text you'd write anyway. The plugin rewrites each component before Vue, React or Svelte compiles it, so the source stays plain.
What about strings in scripts?They aren't extracted. Most strings in code are keys, event names and URLs, so translating them by default would need an opt-out on nearly every one.
Can I use it today?Not yet. glosa is in private preview: the repository is private and the package isn't on npm.