---
title: i18n | Kener
description: Kener supports multiple languages. You can add translations to your site.
---

You can add translations to your site. By default it is set to `en`. Available translations are present in `src/lib/locales/` folders in the root directory. You can add more translations by adding a new file in the `src/lib/locales` folder.

## How to enable a translation {#how-to-enable-a-translation}

Kener has made it simple to add new translations.

### Step 1 {#step-1}

Copy and update the translation file in the `locales` folder. The translation file should be a json file with the locale code as the name of the file. For example, `en.json`, `fr.json`, `de.json`.

<label for="exp2" class="accm">

<input type="checkbox" class="absolute opacity-0" id="exp2" />

<p class=" font-medium p-1 accmt rounded-md showaccm">
	<span>↓ Show File</span>
	<span>↑ Hide File</span>
</p>

<div class="border rounded-md p-1">

```json
{
    "%status for %duration": "%status for %duration",
    "120 Days": "120 Days",
    "14 Days": "14 Days",
    "150 Days": "150 Days",
    "180 Days": "180 Days",
    "30 Days": "30 Days",
    "60 Days": "60 Days",
    "7 Days": "7 Days",
    "90 Days": "90 Days",
    "Availability per Component": "Availability per Component",
    "All Systems are Degraded": "All Systems are Degraded",
    "All Systems are Down": "All Systems are Down",
    "All Systems are Operational": "All Systems are Operational",
    "All Systems are in Maintenance": "All Systems are in Maintenance",
    "Back": "Back",
    "Badge Copied": "Badge Copied",
    "Badge": "Badge",
    "Browse Events": "Browse Events",
    "Change Email": "Change Email",
    "Code Copied": "Code Copied",
    "Confirm Login": "Confirm Login",
    "Copy Code": "Copy Code",
    "Copy Link": "Copy Link",
    "DEGRADED": "DEGRADED",
    "DOWN": "DOWN",
    "Dark": "Dark",
    "Days": "Days",
    "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Embed this monitor using <script> or <iframe> in your app.",
    "Embed": "Embed",
    "Enter the code": "Enter the code",
    "Enter your email": "Enter your email",
    "Enter your email to log in. If you are not subscribed, you will be prompted to subscribe.": "Enter your email to log in. If you are not subscribed, you will be prompted to subscribe.",
    "Get SVG badge for this monitor": "Get SVG badge for this monitor",
    "Get a LIVE Status for this monitor": "Get a LIVE Status for this monitor",
    "IDENTIFIED": "IDENTIFIED",
    "INVESTIGATING": "INVESTIGATING",
    "Incident Updates": "Incident Updates",
    "LIVE Status": "LIVE Status",
    "Lasted for about %lastedFor": "Lasted for about %lastedFor",
    "Light": "Light",
    "Link Copied": "Link Copied",
    "Login": "Login",
    "MAINTENANCE": "MAINTENANCE",
    "MONITORING": "MONITORING",
    "Maintenance Completed": "Maintenance Completed",
    "Maintenance in Progress": "Maintenance in Progress",
    "Manage Subscription": "Manage Subscription",
    "Mode": "Mode",
    "No Data": "No Data",
    "No Incident in %date": "No Incident in %date",
    "No Incidents": "No Incidents",
    "No Monitor Found": "No Monitor Found",
    "No Updates Yet": "No Updates Yet",
    "Ongoing Incidents": "Ongoing Incidents",
    "Pinging": "Pinging",
    "Please select specific monitors to receive updates from.": "Please select specific monitors to receive updates from.",
    "RESOLVED": "RESOLVED",
    "Recent Incidents": "Recent Incidents",
    "Recent Maintenances": "Recent Maintenances",
    "Share this monitor using a link with others": "Share this monitor using a link with others",
    "Share": "Share",
    "Some Systems are not working as expected": "Some Systems are not working as expected",
    "Some Systems Degraded": "Some Systems Degraded",
    "Some Systems Down": "Some Systems Down",
    "Some Systems in Maintenance": "Some Systems in Maintenance",
    "Standard": "Standard",
    "Started %startedAt, lasted for %lastedFor": "Started %startedAt, lasted for %lastedFor",
    "Started %startedAt, still ongoing": "Started %startedAt, still ongoing",
    "Started %startedAt, will last for %lastedFor more": "Started %startedAt, will last for %lastedFor more",
    "Starts %startedAt, will last for %lastedFor": "Starts %startedAt, will last for %lastedFor",
    "Starts %startedAt": "Starts %startedAt",
    "Status OK": "Status OK",
    "Status": "Status",
    "Subscribe": "Subscribe",
    "Subscribe to Updates": "Subscribe to Updates",
    "Subscribe to all monitors": "Subscribe to all monitors",
    "Switch to your timezone": "Switch to your timezone",
    "Theme": "Theme",
    "There are no upcoming maintenances": "There are no upcoming maintenances",
    "Timezone set to %tz": "Timezone set to %tz",
    "Today": "Today",
    "UP": "UP",
    "Update Subscription": "Update Subscription",
    "Upcoming Maintenance": "Upcoming Maintenance",
    "Upcoming Maintenances": "Upcoming Maintenances",
    "Updates": "Updates",
    "Uptime": "Uptime",
    "View in detail": "View in detail",
    "We have sent a code to your email. Please enter it below to confirm your login": "We have sent a code to your email. Please enter it below to confirm your login",
    "You are logged in as %email": "You are logged in as %email"
}
```

</div>

</label>

### Step 2 {#step-2}

Open `src/lib/locales/locales.json` and add the locale code and the name of the language.

```json
[
    {
        "code": "en",
        "name": "English"
    },
    {
        "code": "hi",
        "name": "हिन्दी"
    },
    {
        "code": "zh-CN",
        "name": "中文"
    },
    {
        "code": "ja",
        "name": "日本語"
    },
    {
        "code": "vi",
        "name": "Tiếng Việt"
    },
    {
        "code": "fr",
        "name": "Français"
    }
]
```

### Step 3 {#step-3}

Open `src/lib/i18n/client.js` and add the locale code to the `locales` array.

```js
import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko } from "date-fns/locale"
```

This should be valid for the date-fns library. You can find the list of locales [here](https://github.com/date-fns/date-fns/blob/9bb51691f201c3ec05ab832acbc5d478f2e5c47a/docs/i18nLocales.md).

Next add a mapping in the `locales` object.

```js
const locales = { ru, en: enUS, hi, dk: de, "zh-CN": zhCN, vi, ja, nl, dk: da, fr, ko }
```

### Step 4 {#step-4}

Restart the server and you will see a dropdown in the navbar to select the language.

<div class="note info">
DO NOT forget to raise a PR with the new translation file so that others can use it too.
</div>

## Variables in translations {#variables-in-translations}

There are few variables that you you should not change,

- %status : This will be replaced by the status
- %lastedFor : This will be replaced by the duration the incident lasted
- %startedAt : This will be replaced by the time the incident started
- %date : This will be replaced by the date
- %duration : This will be replaced by the duration

## Dates {#dates}

The localization for dates are still not there. We are working on it and will be available soon.
