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("Willkommen in unserem Shop")}</h1>
      <Trans>
        Durchsuche unsere <b>kuratierte</b> Kollektion
      </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

So geht's

Drei Befehle zur globalen Reichweite

Natürlich schreiben

Dein Komponenten-Text ist die Quelle der Wahrheit. Keine Keys erfinden, kein JSON syncen. Einfach Strings in ct() oder <Trans> packen und weiterbauen.

function Hero() {
  const ct = useCt();
  return <h1>{ct("Willkommen zurück")}</h1>;
}

Extrahieren & übersetzen

Führen Sie einen Befehl aus. Jeder übersetzbare String in Ihrer Codebasis wird gefunden, an die Übersetzungsengine gesendet und mit vollem Kontextbezug zurückgegeben. Dasselbe Wort erhält je nach Kontext unterschiedliche Übersetzungen.

Terminal

Sofort deployen

Übersetzungen landen auf einem globalen CDN. Vier Cache-Ebenen halten Ladezeiten unter 50ms. Updates ohne deine Deploy-Pipeline zu berühren.

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

KI Translation Engine

Extrahieren. Übersetzen. Bewerten.

Jeder String durchläuft eine dreistufige Pipeline. Das beste Modell für jedes Sprachpaar wird automatisch ausgewählt. Sie konfigurieren nie einen Provider.

Kontext extrahieren

Liest Ihre Komponentenstruktur und versteht, was jeder String bedeutet: eine Button-Beschriftung, eine Überschrift, ein Rettungsalarm.

Gemini 3 Flash

Claude Haiku 4.5

Übersetzen

Das beste Modell für jedes Sprachpaar übersetzt Ihre Strings. Kontextbezogen, Sinn für Sinn, nicht Wort für Wort.

Claude Sonnet 5

Gemini 3 Flash

GPT-5.2

DeepSeek V3

Kimi K2.5

DeepL

Qualität bewerten

Bewertet jede Übersetzung und wählt das hochwertigste Resultat. Du wählst nie ein Modell.

Gemini 3.1 Pro

Kimi K2.5

Kontext ändert alles

Dasselbe Wort bedeutet an verschiedenen Orten unterschiedliche Dinge. Die KI liest umgebende Strings, um die Absicht zu verstehen. Keine manuellen Kontext-Tags erforderlich.

ProductCard.tsx

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

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

DuckRescue.tsx

<div>
  <span className="text-4xl">🦆</span>
  <p>{ct("Eine Ente ertrinkt!")}</p>
  <p>{ct("Verbleibende Zeit:")} 00:03</p>
  <button onClick={rescue}>
    🛟 {ct("Speichern")}
  </button>
</div>

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

Developer Experience

Dein Code ist dein Übersetzungskatalog

Schluss mit Key-Namen erfinden. Schluss mit greppen nach t('homepage.hero.cta.button') um rauszufinden, welcher Text dahintersteckt. Deine Strings sind lesbares Deutsch genau da, wo sie gerendert werden.

Die <Trans> Komponente bewahrt verschachteltes JSX (Links, Fett, Spans, jedes Element), während der Text übersetzt wird.

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

  return (
    <div>
      <h1>{ct("Willkommen zurück, {name}!", { name: user.name })}</h1>
      <p>{ct("Du hast {count} {count:plural:Artikel:Artikel}", { count: items.length })}</p>
      <p>{ct("Gesamt: {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.

Schrittweise Einführung

Hast du schon Übersetzungen? Start wo du bist.

Ciao Tools verlangt kein Rewrite. Bring deine Übersetzungen mit, führe schrittweise ein, migriere in deinem Tempo.

Inline translations

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

// Already have translations? Pass them directly
const translations = {
  es: { "Hallo": "Hola", "Anmelden": "Registrarse" },
  fr: { "Hallo": "Bonjour", "Anmelden": "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("Willkommen auf der neuen Seite")}</h1>; // start here
}

Behalte deine Übersetzungen

Gib deine Translation Maps direkt an CiaoProvider. Keine Migration nötig.

Komponente für Komponente migrieren

Alte Pages nutzen deine Library. Neuer Code nutzt ct() und <Trans>. Beide laufen parallel.

Altes System später entfernen

Sobald alles Ciao Tools nutzt, wirf das alte Setup weg. Deine Keys sind jetzt 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

Schnell by default, nicht by accident

< 50ms

Aus Cache laden

Sprachen

JSON Key Files

~5 min

Setup Zeit

Zustand + localStorage— Sprachpräferenz über Sessions hinweg gespeichert

IndexedDB— Vollständige Translation Maps offline gecacht

In-memory LRU— Heiße Intl-Formatierer, keine Zuordnung bei Wiederholaufrufen

CDN Edge— Übersetzungen vom nächsten globalen Knoten geliefert

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

Sei als Erste*r dabei

Wir öffnen Ciao Tools für eine kleine Gruppe früher Nutzer. Join die Waitlist und wir melden uns, wenn dein Platz bereit ist.

Diese Site ist durch reCAPTCHA und Google Datenschutz und Nutzungsbedingungen geschützt.