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("Selamat datang ke kedai kami")}</h1>
      <Trans>
        Semak imbas koleksi <b>susun atur</b> kami
      </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

Cara ia berfungsi

Tiga perintah untuk jangkauan global

Tulis secara semula jadi

Teks komponen anda ialah sumber kebenaran. Tiada kunci untuk dicipta, tiada JSON untuk disegerak. Balut rentetan dalam ct() atau <Trans>.

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

Ekstrak & terjemah

Jalankan satu arahan. Setiap rentetan yang boleh diterjemahkan dalam dasar kod anda ditemui, dihantar ke enjin terjemahan, dan dikembalikan dengan kesedaran konteks penuh. Perkataan yang sama mendapat terjemahan yang berbeza bergantung pada tempat ia muncul.

Terminal

Hantar serta-merta

Terjemahan mendarat di CDN global. Empat lapisan caching memastikan masa muat bawah 50ms. Kemas kini terjemahan tanpa sentuh saluran.

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

Enjin Terjemahan AI

Ekstrak. Terjemah. Nilaikan.

Setiap rentetan mengalir melalui saluran tiga peringkat. Model terbaik untuk setiap pasangan bahasa dipilih secara automatik. Anda tidak pernah mengkonfigurasi pembekal.

Ekstrak konteks

Membaca pohon komponen anda dan memahami maksud setiap rentetan: label butang, tajuk, amaran penyelamat.

Gemini 3 Flash

Claude Haiku 4.5

Terjemah

Model terbaik untuk setiap pasangan bahasa menterjemah rentetan anda. Sedar konteks, makna demi makna, bukan perkataan demi perkataan.

Claude Sonnet 5

Gemini 3 Flash

GPT-5.2

DeepSeek V3

Kimi K2.5

DeepL

Nilaikan kualiti

Skor setiap terjemahan dan pilih hasil berkualiti tertinggi. Anda tak pernah pilih model.

Gemini 3.1 Pro

Kimi K2.5

Konteks mengubah segalanya

Perkataan yang sama bermaksud perkara yang berbeza di tempat yang berbeza. AI membaca rentetan di sekeliling untuk memahami niat. Tiada tag konteks manual diperlukan.

ProductCard.tsx

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

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

DuckRescue.tsx

<div>
  <span className="text-4xl">🦆</span>
  <p>{ct("Itik sedang lemas!")}</p>
  <p>{ct("Masa tinggal:")} 00:03</p>
  <button onClick={rescue}>
    🛟 {ct("Simpan")}
  </button>
</div>

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

Pengalaman Pembangun

Kod sumber anda ialah katalog terjemahan anda

Tiada lagi mencipta nama kunci. Tiada lagi "grepping" untuk t('homepage.hero.cta.button') untuk mengetahui teks yang dipetakannya. Rentetan anda ialah Bahasa Inggeris yang boleh dibaca tepat di tempat ia dipaparkan.

Komponen <Trans> Komponen mengekalkan JSX bersarang (pautan, tebal, rentang, sebarang elemen) sambil menterjemah teks di sekelilingnya.

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

  return (
    <div>
      <h1>{ct("Selamat kembali, {name}!", { name: user.name })}</h1>
      <p>{ct("Anda ada {count} {count:plural:item:items}", { count: items.length })}</p>
      <p>{ct("Jumlah: {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.

Pengambilan berperingkat

Sudah ada terjemahan? Mula di mana anda berada.

Ciao Tools tidak memerlukan penulisan semula. Bawa terjemahan sedia ada anda, ambil secara berperingkat, dan berhijrah mengikut kadar anda sendiri.

Inline translations

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

// Already have translations? Pass them directly
const translations = {
  es: { "Hello": "Hola", "Daftar": "Registrarse" },
  fr: { "Hello": "Bonjour", "Daftar": "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("Selamat datang ke halaman baharu")}</h1>; // start here
}

Kekalkan terjemahan sedia ada

Serahkan peta terjemahan semasa terus ke CiaoProvider. Tiada migrasi diperlukan.

Migrasi komponen demi komponen

Laman lama kekal menggunakan pustaka sedia ada anda. Kod baharu guna ct() dan <Trans>. Kedua-duanya jalan seiring.

Buang sistem lama bila sedia

Sebaik sahaja semua guna Ciao Tools, gugurkan persediaan lama. Kunci terjemahan anda kini bahasa Inggeris biasa.

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.

Prestasi

Laju sentiasa, bukan kebetulan

< 50ms

Muat dari cache

Bahasa

Fail kunci JSON

~5 min

Masa persediaan

Zustand + localStorage— Pilihan bahasa dikekalkan merentas sesi

IndexedDB— Peta terjemahan penuh dicache luar talian

LRU dalam memori— Instans pemformat Intl pantas, sifar peruntukan pada panggilan berulang

Pinggir CDN— Terjemahan disaji dari nod global terdekat

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

Akses awal

Jadi yang pertama

Kami membuka Ciao Tools kepada sekumpulan kecil pengguna awal. Sertai senarai menunggu dan kami akan menghubungi anda apabila tempat anda sudah sedia.

Laman ini dilindungi oleh reCAPTCHA dan Google Dasar Privasi dan Syarat Perkhidmatan terpakai.