Protobuf-like i18n from plain code

Write plain code

Without any need to do anything different:

<p>Hello world!</p>

Extract and translate

Into PO files and optionally live translate using Gemini

English

msgid "Hello world!"
msgstr "Hello world!"

Spanish (translated)

msgid "Hello world!"
msgstr "¡Hola Mundo!"

Compile catalogs

Into arrays. No need for keys.

English

export let c = ["Hello world!"]

Spanish (translated)

export let c = ["¡Hola Mundo!"]

Transform

Update your code to access the translations by index

<p>{_w_runtime_.t(0)}</p>

Render

Load the desired compiled catalog, and hand it to your framework

<p>¡Hola Mundo!</p>

Works with your stack!

React

Preact

SolidJS

Svelte

JavaScript

TypeScript

Python*

Golang*

INPUT

'use client'




export function Greeting({ username }) {

  return (
    <div>
      <p>Hello!</p>
      <p title="Welcome" class="para">
        Welcome {username}!
      </p>
    </div>
  )
}

OUTPUT

'use client'
import _w_to_rt_ from 'wuchale/runtime'
import _w_load_rx_, { get as _w_load_ } from "./loader.js"
import W_tx_ from "@wuchale/jsx/runtime.jsx"

export function Greeting({ username }) {
  const _w_runtime_ = _w_to_rt_(_w_load_rx_('jsx'))
  return (
    <div>
      <p>{_w_runtime_.t(0)}</p>
      <p title={_w_runtime_.t(1)} class="para">
        <W_tx_ x={_w_runtime_.cx(2)} a={[username]} />
      </p>
    </div>
  )
}

INPUT

// comment




export function Greeting({ username }) {

  return (
    <div>
      <p>Hello!</p>
      <p title="Welcome" class="para">
        Welcome {username}!
      </p>
    </div>
  )
}

OUTPUT

// comment
import _w_to_rt_ from 'wuchale/runtime'
import _w_load_rx_, { get as _w_load_ } from "./loader.js"
import W_tx_ from "@wuchale/jsx/runtime.jsx"

export function Greeting({ username }) {
  const _w_runtime_ = _w_to_rt_(_w_load_rx_('jsx'))
  return (
    <div>
      <p>{_w_runtime_.t(0)}</p>
      <p title={_w_runtime_.t(1)} class="para">
        <W_tx_ x={_w_runtime_.cx(2)} a={[username]} />
      </p>
    </div>
  )
}

INPUT

// comment




export function Greeting({ username }) {

  return (
    <div>
      <p>Hello!</p>
      <p title="Welcome" class="para">
        Welcome {username}!
      </p>
    </div>
  )
}

OUTPUT

// comment
import _w_to_rt_ from 'wuchale/runtime'
import _w_load_rx_, { get as _w_load_ } from "./loader.js"
import W_tx_ from "@wuchale/jsx/runtime.solid.jsx"

const _w_runtime_ = () => _w_to_rt_(_w_load_rx_('jsx'))
export function Greeting({ username }) {
  return (
    <div>
      <p>{_w_runtime_().t(0)}</p>
      <p title={_w_runtime_().t(1)} class="para">
        <W_tx_ x={_w_runtime_().cx(2)} a={[username]} />
      </p>
    </div>
  )
}

INPUT

<script>




  const { username } = $props()
</script>

<div>
  <p>Hello!</p>
  <p title="Welcome" class="para">
    Welcome {username}!
  </p>
</div>

OUTPUT

<script>
  import _w_to_rt_ from 'wuchale/runtime'
  import _w_load_rx_, { get as _w_load_ } from "./loader.svelte.js"
  import W_tx_ from "@wuchale/svelte/runtime.svelte"
  const _w_runtime_ = $derived(_w_to_rt_(_w_load_rx_('svelte')))
  const { username } = $props()
</script>

<div>
  <p>{_w_runtime_.t(0)}</p>
  <p title={_w_runtime_.t(1)} class="para">
    <W_tx_ x={_w_runtime_.cx(2)} a={[username]} />
  </p>
</div>

INPUT

// comment



export function Greeting(props) {

  return {
    greeting: `Hello`,
    title: 'Welcome',
    message: `Welcome ${props.username}!`,
  }
}

OUTPUT

import _w_to_rt_ from 'wuchale/runtime'
import _w_load_ from "./loader.js"
// comment

export function Greeting(props) {
  const _w_runtime_ = _w_to_rt_(_w_load_('vanilla'))
  return {
    greeting: _w_runtime_.t(0),
    title: _w_runtime_.t(1),
    message: _w_runtime_.t(2, [props.username]),
  }
}

INPUT

// comment



export function Greeting(props: { username: string }) {

  return {
    greeting: `Hello`,
    title: 'Welcome',
    message: `Welcome ${props.username}!`,
  }
}

OUTPUT

import _w_to_rt_ from 'wuchale/runtime'
import _w_load_ from "./loader.js"
// comment

export function Greeting(props: { username: string }) {
  const _w_runtime_ = _w_to_rt_(_w_load_('vanilla'))
  return {
    greeting: _w_runtime_.t(0),
    title: _w_runtime_.t(1),
    message: _w_runtime_.t(2, [props.username]),
  }
}

INPUT

# COMING SOON!

OUTPUT

# COMING SOON!

INPUT

// COMING SOON!

OUTPUT

// COMING SOON!

English

PO file (for translators)

msgid "Hello!"
msgstr "Hello!"

msgid "Welcome"
msgstr "Welcome"

msgid "Welcome {0}!"
msgstr "Welcome {0}!"

Compiled JS (for runtime)

export let c = [
    'Hello!',


    'Welcome',


    [ 'Welcome ', 0, '!' ],
]

Spanish (translated)

PO file (for translators)

msgid "Hello!"
msgstr "¡Hola!"

msgid "Welcome"
msgstr "Bienvenido"

msgid "Welcome {0}!"
msgstr "¡Bienvenido {0}!"

Compiled JS (for runtime)

export let c = [
    '¡Hola!',


    'Bienvenido',


    [ '¡Bienvenido ', 0, '!' ],
]

Explore more benefits

Used by projects

AlchemillaHQ/SylveLocal AI Tools

Inspiration

This project was inspired by Lingui especially some of its workflow. If you’ve used Lingui before, you’ll find familiar concepts like extraction and compilation.

wuchale takes a different approach: you don’t need to change your code, catalogs compile smaller than any other tool (including Lingui’s), and it integrates with a wider range of frameworks.

Do you also use it in your project? Let us know!