Skip to content
Localive

Svelte

Install

Section titled “Install”
Terminal window
npm install @localive/svelte @localive/adapter-svelte-i18n @localive/vite svelte-i18n svelte

The Svelte client uses Svelte 5 runes ($state, $derived, $effect) internally and requires Svelte 5 or later.

Initialize Localive Inside a Component

Section titled “Initialize Localive Inside a Component”

Svelte’s context API requires setContext to run during component initialization. Do not call initLocalive from main.ts outside a component — do it inside your root component’s <script> block. initLocalive takes the I18nAdapter as its first argument and the locale options as the second:

App.svelte
<script lang="ts">
  import { initLocalive, LiveEditorOverlay } from '@localive/svelte';
  import { withSvelteI18n } from '@localive/adapter-svelte-i18n';
  import { _, locale } from 'svelte-i18n';


  initLocalive(withSvelteI18n({ _, locale }), {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  });
</script>


<h1 data-i18n-key="app.title">{$_('app.title')}</h1>
<LiveEditorOverlay />

Use the State in Your Component

Section titled “Use the State in Your Component”

initLocalive returns a SvelteLocaliveState with { instance, isActive, currentLocale }. The two writables (isActive and currentLocale) stay in sync with the Localive store and are convenient for reactive bindings. You can also use getLocaliveState() from a descendant component to retrieve the state:

ChildComponent.svelte
<script lang="ts">
  import { getLocaliveState } from '@localive/svelte';


  const { isActive, currentLocale, instance } = getLocaliveState();
</script>


<button onclick={() => instance.activate()}>
  Open editor (currently {isActive ? 'on' : 'off'})
</button>

Tap into the State (Optional Hook)

Section titled “Tap into the State (Optional Hook)”

useLocaliveEditor(instance) returns a rune-backed object with isActive, currentLocale, activate, deactivate, toggle, getTranslation, getTranslations, resolveKey, and saveTranslation. Pass it the instance from getLocaliveState():

<script lang="ts">
  import { getLocaliveState, useLocaliveEditor } from '@localive/svelte';


  const { instance } = getLocaliveState();
  const editor = useLocaliveEditor(instance);
</script>

useLocaliveEditor uses Svelte 5 runes internally and can only be called during a component’s initialization phase (the rune compiler runs inside .svelte files).

Tag Elements with data-i18n-key

Section titled “Tag Elements with data-i18n-key”

Tag any element whose text should be editable with a data-i18n-key attribute matching the translation key:

<span data-i18n-key="nav.home">{$_('nav.home')}</span>
<span data-i18n-key="nav.about">{$_('nav.about')}</span>

Overlay UI Note

Section titled “Overlay UI Note”

The Svelte LiveEditorOverlay currently renders a single floating toggle button (a pencil icon) that activates/de-activates the inspector. The hover-highlight, editor panel, and Save UI present in the React and Vue overlays are not yet ported — track the issue on GitHub.

Next Steps

Section titled “Next Steps”