Auto-Tagging

What Is Auto-Tagging?

Auto-tagging adds invisible markers to your translatable elements so the editor overlay can identify which key belongs to which text. When you click a tagged element, the overlay knows exactly which translation key to edit.

How It Works

Each framework adapter can provide a getKeyFromElement(element) method that inspects a DOM element and returns its translation key. For frameworks where this isn’t possible (or convenient), you tag elements explicitly:

Framework	Tagging Method
React	useLocaliveTag() hook — spread getTagProps('key') onto the element
Vue	v-localive-tag="'key'" directive
Angular	[attr.data-i18n-key]="'key'" attribute binding
Svelte	data-i18n-key="key" attribute

Manual Tagging Example (React)

import { useLocaliveTag } from '@localive/react';

const { getTagProps } = useLocaliveTag();
return <a {...getTagProps('nav.home')}>{t('nav.home')}</a>;

useLocaliveTag() takes no arguments and returns { getTagProps, resolveKey }. Spread getTagProps('nav.home') onto the element you want to tag.

This renders as:

<a data-i18n-key="nav.home">Home</a>

The LiveEditorOverlay reads data-i18n-key and highlights matching elements when the editor is active.