> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fimo.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Labels, locales & i18n

> Wrap static UI copy in t(), set values from the CLI, and serve your site in multiple locales.

Static UI copy — headings, buttons, nav items, placeholders, alt text, SEO strings — is wrapped in `t('key')` in code, while its **value lives in the database** so editors can reword it in Studio without a code change. That same mechanism powers multi-locale sites.

## The rule

Every user-facing static string goes through `t('key')`. A raw literal in JSX (`<h1>Welcome</h1>`) skips the entire i18n and inline-editing pipeline and becomes invisible to the editor. Code declares the key; the database holds the visible value.

```tsx theme={null}
import { useLabels, Text } from 'fimo/ui';

function Hero() {
  const { t } = useLabels();
  return <Text value={t('hero.title')} as="h1" />;
}
```

<Note>
  The first argument to `t()` **must be a string literal** — dynamic keys break source tracking and fail the linter. For HTML attributes (`placeholder`, `alt`), cast with `String(t(...))`. The `t()` helper, `useLabels()`, and key-naming rules are part of the project `fimo` skill — load it before writing code.
</Note>

## Label commands

```bash theme={null}
fimo validate                          # scans code for t() keys; fails if any lack a DB value
fimo labels list                       # inspect labels in the DB
fimo labels set nav.home --value Home  # create/update one label
fimo labels set-many --locale es --data '{"nav.home":"Inicio"}'
fimo labels set-many --locale es --file /tmp/es-labels.json
fimo labels delete nav.home --locale en
```

The typical loop: write JSX with `t('key')` calls → `fimo validate` → add missing values with `fimo labels set` → editors can now change copy in Studio. There is no `fimo translations` command; use `fimo labels`.

## Configure locales

Locales live in `fimo-config.json`. Keep a single locale unless the user asks for multiple languages:

```json theme={null}
{
  "i18n": {
    "defaultLocale": "en",
    "locales": ["en"],
    "routing": { "strategy": "path-prefix", "prefixDefaultLocale": false }
  }
}
```

* `locales` must include `defaultLocale`.
* `path-prefix` is the supported routing strategy — e.g. `/es/about` for Spanish, while the default locale can stay at `/about` when `prefixDefaultLocale` is `false`.
* When multiple locales are configured, set label values (and localized entries) for every one.

`fimo validate` checks for malformed locale tags, a `defaultLocale` missing from `locales`, unsupported strategies, canonical routes that claim reserved locale prefixes, and missing default-locale labels.

## Routes stay canonical

Keep `fimo-config.json#routes` unlocalized (e.g. `/pricing`, not `/es/pricing`) — the route selector localizes them for the active locale. In React Router projects, use the `fimoRoutes()` helper and `<FimoLink>` for locale-aware links.

## What's next

<Columns cols={3}>
  <Card title="Content & CMS" icon="database" href="/docs/cli/content">
    Localize entries alongside labels.
  </Card>

  <Card title="Framework support" icon="layer-group" href="/docs/cli/frameworks">
    `fimoRoutes()`, `FimoLink`, and adapters.
  </Card>

  <Card title="Deploy & publish" icon="cloud-arrow-up" href="/docs/deploy/overview">
    Ship your localized site.
  </Card>
</Columns>