your code, not beside it.
Powered by Claude, GPT-5, Gemini, DeepL, and more. Wrap strings in ct() and ship to 93 languages with context-aware AI, global CDN, and live updates.
import { useCt, Trans } from "ciao-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>
);
}Welcome to our store
Browse our curated collection
$49.99
Works with your stack
Frameworks & Runtimes
AI Coding Tools
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 — not word-by-word, but meaning-by-meaning.
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 on the fly — 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.
Translate
The best model for the language pair is selected on the fly. Context-aware, meaning-by-meaning — not word-by-word.
Evaluate quality
Scores each translation and selects the highest quality result. You never choose a model.
Context changes everything
The same word means different things in different places. The AI reads surrounding strings to understand intent — no manual context needed.
<div>
<img src={product.image} />
<h3>{product.name}</h3>
<span>${product.price}</span>
<button onClick={saveToWishlist}>
❤️ {ct("Save")}
</button>
</div><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>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>
);
}Welcome back, Sarah!
You have 3 items
Total: $129.99
The difference
Your workflow, simplified
Traditional i18n
Ciao Tools
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.
import { CiaoProvider } from "ciao-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>// 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 — everything you need, nothing you don't.
Automatic extraction
OXC and Babel plugins scan your codebase and find every ct() call and <Trans> component. Your source code is the catalog.
AI-powered 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.
Multi-provider AI
Claude, GPT-4, Gemini, and DeepL compete on every translation. The best result for each language pair is selected automatically.
Translation memory
Every translation is cached server-side. Re-syncs only translate new or changed strings — saving cost and time at scale.
Content fingerprinting
Each string is fingerprinted by text and context. A string is never sent for translation twice, even across syncs.
Auto language headers
The fetch interceptor patches global fetch to inject language headers on every same-origin request. Your API always knows the locale.
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
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.99Artisan-made with natural glazes. Perfect for your morning ritual.
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.