Quickstart

1. Install Tyndale

   npm install tyndale-react
   npm install -D tyndale

2. Initialize your project

   npx tyndale init

   This creates tyndale.config.json with default settings, including .astro in extensions.

3. Authenticate with your AI provider

   npx tyndale auth

   Follow the prompts to configure your API key (Anthropic, OpenAI, etc.).

4. Wrap translatable content

   import { T, useTranslation } from 'tyndale-react';
   
   export function Welcome() {
     const t = useTranslation();
     return (
       <div>
         <T>Welcome to our app!</T>
         <p>{t('You have {count} items', { count: 3 })}</p>
       </div>
     );
   }

5. Extract and translate

   npx tyndale translate

   Tyndale scans your source files, extracts translatable strings, and generates translations for all configured locales.

Supported frameworks

App translation

• React
• Vite + React
• Next.js
• Astro components (.astro)

Documentation translation

• Starlight
• Docusaurus
• VitePress
• MkDocs
• Nextra

Using Astro instead of React

If you are translating .astro pages/components, add Astro’s React integration first if your project does not already render React components:

npx astro add react

Then follow the dedicated Astro setup guide. Use Translating Documentation for Starlight and other docs sites.

What just happened?

Tyndale scanned your JSX or .astro templates for <T> components and useTranslation() calls, extracted the English source text, sent it to your AI provider for translation, and wrote locale files to your output directory.

No key files. No manual JSON editing. Your translations are ready.

Next steps

• Configure your project — locales, AI model, output directory
• Set up Astro — .astro files and React integration
• Set up Next.js — middleware, providers, static generation
• Translate docs — Starlight, Docusaurus, VitePress, MkDocs, Nextra
• Learn the React API — all components and hooks