Closed Alpha — Join the waitlist

i18n that lives in
your code, not beside it.

Ship your entire stack in 93 languages. No translation files. Wrap strings in ct() and a single command extracts, translates, and deploys.

ProductPage.tsx

import { useCt, Trans } from "@ciao-tools/react";

function ProductPage() {
  const ct = useCt();

  return (
    <div>
      <h1>{ct("Welcome to our store")}</h1>
      <Trans>
        Browse our <b>curated</b> collection
      </Trans>
      <p>{ct("{amount:currency:USD}", { amount: 49.99 })}</p>
    </div>
  );
}

localhost:3000

Welcome to our store

Browse our curated collection

$49.99

Works with your stack

How it works

Three commands to global reach

Write naturally

Your component text is the source of truth. No keys to invent, no JSON to sync. Just wrap strings in ct() or <Trans> and keep building.

function Hero() {
  const ct = useCt();
  return <h1>{ct("Welcome back")}</h1>;
}

Extract & translate

Run one command. Every translatable string in your codebase is found, sent to the translation engine, and returned with full context awareness. The same word gets different translations depending on where it appears.

Terminal

Ship instantly

Translations land on a global CDN. Four layers of caching keep load times under 50ms. Update translations without touching your deploy pipeline.

// Generated manifest — fully typed
export const ciaoManifest = {
  languages: ["en", "es", "fr", "de"] as const,
  cdnUrls: { es: "https://cdn...", fr: "https://cdn..." },
} as const;

AI Translation Engine

Extract. Translate. Evaluate.

Every string flows through a three-stage pipeline. The best model for each language pair is selected automatically. You never configure a provider.

Extract context

Reads your component tree and understands what each string means: a button label, a heading, a rescue alert.

Gemini 3 Flash

Claude Haiku 4.5

Translate

The best model for each language pair translates your strings. Context-aware, meaning-by-meaning, not word-by-word.

Claude Sonnet 5

Gemini 3 Flash

GPT-5.2

DeepSeek V3

Kimi K2.5

DeepL

Evaluate quality

Scores each translation and selects the highest quality result. You never choose a model.

Gemini 3.1 Pro

Kimi K2.5

Context changes everything

The same word means different things in different places. The AI reads surrounding strings to understand intent. No manual context tags needed.

ProductCard.tsx

<div>
  <img src={product.image} />
  <h3>{product.name}</h3>
  <span>${product.price}</span>
  <button onClick={saveToWishlist}>
    ❤️ {ct("Save")}
  </button>
</div>

ct("Save")→"Guardar"(es) — to store, to keep

DuckRescue.tsx

<div>
  <span className="text-4xl">🦆</span>
  <p>{ct("A duck is drowning!")}</p>
  <p>{ct("Time remaining:")} 00:03</p>
  <button onClick={rescue}>
    🛟 {ct("Save")}
  </button>
</div>

ct("Save")→"Rescatar"(es) — to rescue, to save a life

Developer Experience

Your source code is your translation catalog

No more inventing key names. No more grepping for t('homepage.hero.cta.button') to figure out what text it maps to. Your strings are readable English right where they're rendered.

The <Trans> component preserves nested JSX (links, bold, spans, any element) while translating the text around them.

function CheckoutSummary({ user, items }) {
  const ct = useCt();

  return (
    <div>
      <h1>{ct("Welcome back, {name}!", { name: user.name })}</h1>
      <p>{ct("You have {count} {count:plural:item:items}", { count: items.length })}</p>
      <p>{ct("Total: {amount:currency:USD}", { amount: 129.99 })}</p>
    </div>
  );
}

Output

Welcome back, Sarah!

You have 3 items

Total: $129.99

The difference

Your workflow, simplified

Traditional i18n

Write code

Create keys

Map strings

Send to translators

Wait

Receive files

Wire up

Deploy

Write code

Create keys

Map strings

Send to translators

Wait

Receive files

Wire up

Deploy

Ciao Tools

Write code

Build

Ship

Write code

Build

Ship

Never think about translations again.

Incremental adoption

Already have translations? Start where you are.

Ciao Tools doesn't demand a rewrite. Bring your existing translations, adopt incrementally, and migrate at your own pace.

Inline translations

import { CiaoProvider } from "@ciao-tools/react";

// Already have translations? Pass them directly
const translations = {
  es: { "Hello": "Hola", "Sign up": "Registrarse" },
  fr: { "Hello": "Bonjour", "Sign up": "S'inscrire" },
};

<CiaoProvider translations={translations}>
  <App />
</CiaoProvider>

Side-by-side migration

// Migrate one component at a time
function OldPage() {
  return <h1>{t("pages.old.title")}</h1>; // keep this
}

function NewPage() {
  const ct = useCt();
  return <h1>{ct("Welcome to the new page")}</h1>; // start here
}

Keep your existing translations

Pass your current translation maps directly to CiaoProvider. No migration required.

Migrate component by component

Old pages keep using your existing library. New code uses ct() and <Trans>. Both run side by side.

Remove the old system when ready

Once everything uses Ciao Tools, drop your old setup. Your translation keys are now plain English.

Features

The complete translation platform

From string extraction to CDN delivery and live updates.

Automatic extraction

OXC and Babel plugins scan your codebase and find every ct() call and <Trans> component. Your source code is the catalog.

Context-aware translation

AI translates with full component context. "Save" in a button vs. "Save" as rescue — it gets the difference.

Global CDN hosting

Translations are hosted on a global edge network and served from the nearest node. You never manage translation files.

Live hot updates

Fix a translation and it's live in seconds. No redeploy, no cache bust, no waiting for a release cycle.

Glossary & consistency

Define key terms once and enforce them across every language. Brand names and domain vocabulary stay consistent.

Full-stack, every framework

ct() works in React, React Native, Next.js server components, and Express. One API from mobile to server.

Prompt translation

ctPrompt() translates LLM system prompts while preserving template variables, JSON schemas, code blocks, and regex. Your AI agents speak every language.

Translation memory

Every translation is cached server-side. Re-syncs only translate new or changed strings, saving time and cost.

Multilingual SEO

Hreflang links, canonical URLs, og:locale tags, and XML sitemaps. CiaoHead handles it at runtime, or generate a sitemap from the CLI.

App store translations

Translate App Store and Play Store metadata with character limit validation. Names, descriptions, keywords, and release notes.

ICU MessageFormat

Plurals, ordinals, currency, dates, numbers, and percentages. Full locale-aware formatting via the ICU standard.

Fallback chains

es-MX falls back to es, then to en. Four caching layers ensure translations are always available, even offline.

Performance

Fast by default, not by accident

< 50ms

Load from cache

Languages

JSON key files

~5 min

Setup time

Zustand + localStorage— Language preference persisted across sessions

IndexedDB— Full translation maps cached offline

In-memory LRU— Hot Intl formatter instances, zero allocation on repeat calls

CDN edge— Translations served from the nearest global node

Live demo

One codebase, every language

Click a language. Text, prices, dates, and plurals all update, formatted correctly for each locale.

☕

Handcrafted Ceramic Mug

$34.99

Artisan-made with natural glazes. Perfect for your morning ritual.

In stock · February 3, 2026

3 items

Early access

Be first in line

We're opening Ciao Tools to a small group of early users. Join the waitlist and we'll reach out when your spot is ready.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.