Internationalization (i18n)

LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings.

You can easily switch between supported UI languages using the i18n menu, allowing you to explore and use LiveCodes in your preferred language!

If you are interested in contributing to the translation of LiveCodes, please refer to the i18n Contribution Guide.

Demo: (Embedded playground with appLanguage: 'zh-CN')

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "javascript",
  "config": {
    "appLanguage": "zh-CN"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "javascript",
  "config": {
    "appLanguage": "zh-CN"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "javascript",
  "config": {
    "appLanguage": "zh-CN"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "javascript",
  "config": {
    "appLanguage": "zh-CN"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "template": "javascript",
  "config": {
    "appLanguage": "zh-CN"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Using SDK

Set the configuration object property appLanguage to a supported language code.

import { createPlayground } from 'livecodes';

createPlayground('#container', { template: 'javascript', config: { appLanguage: 'auto' } });

Using query params

Add the query parameter appLanguage with your preferred language code.

https://livecodes.io?template=javascript&appLanguage=fr

Related

• User Settings
• Editor Settings
• Query params
• i18n Contribution Guide