# Localisation

{% hint style="info" %}
Refer to the [server-side localization](/gravity-server/localization.md) section to learn how to translate the server-side code.
{% endhint %}

## Locale Files

Locale files are stored inside the `/locales` folder, and each language has its own folder of `.json` files. The locales are split to match the same structure as the views.

All `.json` files inside each locale folder are imported and combined inside the index.js file inside each locale folder. You need to import all of your individual locale files into the index file.

```javascript
/locales
  /en
    en_dashboard.json
    en_nav.json
  /es
    es_dashboard.json
    es_nav.json
```

The locale files are simple JSON files containing the strings. The keys are always the same (in English) as these are referenced in the code. The string changes depending on the language.

```json
{
  "title": "Dashboard",
  "message": {
      "title": "Welcome to Gravity!",
      "text": "This is a sample dashboard to get you started. Please read the documentation to learn how to build your own features."
},
{
  "title": "Tablero de Control",
  "message": {
    "title": "¡Bienvenido a Gravity!",
    "text": "Este es un tablero de muestra para comenzar. Por favor, lea la documentación para aprender a construir sus propias características."
},
```

### Adding More Locales

{% hint style="info" %}
Pro tip – ask [ChatGPT](https://chat.openai.com/) to translate the JSON files to new languages.
{% endhint %}

1. Create a new folder inside the `/locales` file with the local name eg. `/fr` and add your JSON files.
2. Import the new locale file into the `index.js` file
3. Import the locale to `app.js` and add it to I18n config object.

```javascript
// locales
import en from '~/locales/en/index';
import es from '~/locales/es/index';
export const i18n = new I18n({ en, es });
```

## Performing Translations

Translations can be performed by importing the `i18n` package and using the t function.

```javascript
import { i18n } from 'components/lib'
import Style from './style.js';

export function Card(props){

return (  
  <div>
  
    <div className={ Style.title }>
     { i18n.t('account.card.title') }
    </div>
    
 </div>
}
```

## Switching Languages

There is a language switcher component in the drawer nav for changing the language. You can add more languages to the dropdown in `/components/locale`.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-native/localisation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.