Translation editor

A React block (a whole screen) in Beamline's CMS & media app.

Content in two languages side by side, and the interface strings. Content: the record and the language to translate into, how many fields are translated (one-hue progress); each field's source text beside its translation, edited in the target language's direction (right to left for Arabic), with its state: missing on danger, source changed on warning (what the source said when it was translated shown, with Still right), translated on success; Copy from source per field; saving saves that language only, others untouched. Interface strings: searched by key or text, each language's missing count (warning, or none missing on success), each key with every language's value (missing marked) and how many places use it; a string opens in a sheet with its key (renaming one in use says those places show the bare key until updated; a bad or taken key refused) and a value per language in its direction; delete in the sheet's menu says where it's used.

Use it for

Translating records field by field beside the source, including right-to-left languages.
Keeping the interface's reusable strings in every language.

Not for

Choosing which fields are translatable (schema-fields).
Machine translation suggestions.

Anatomy

header: the tool's mark, Translations or Interface strings, the view switch
content: record, translate into, progress; each field's source and its translation with state, Copy from source, what the source said then; Undo and Save
strings: search, missing per language, New string; each key with its values and uses; the sheet with key, values, menu, Cancel and Save

States

field missing, outdated, translated; unsaved changes; saved; refused
strings filtered, none matching, a key renamed while in use, a bad or taken key, deleting one in use or unused
nothing to translate, no strings
phone: one column, source above its translation
right to left: the translation side follows its language; the screen mirrors in a right-to-left interface
reduced motion: through the tokens

Keyboard

Tab through the record and language pickers, each field's Copy and translation, Undo and Save; the strings search, rows and sheet

Motion

The sheet slides in through the tokens; nothing runs at rest.

Props

Prop	Type	Default	Description
`records`	`TRecord[]`	—
`defaultRecords`	`TRecord[]`	—
`onRecordsChange`	`((r: TRecord[]) => void)`	—
`fields` (required)	`TField[]`	—
`titleField` (required)	`string`	—	The field whose source value names a record.
`languages` (required)	`TLanguage[]`	—
`source` (required)	`string`	—	The language translated from.
`onSaveTranslation` (required)	`(req: { recordId: string; language: string; values: Record<string, TValue>; }) => Promi…`	—
`strings`	`UiString[]`	—
`defaultStrings`	`UiString[]`	—
`onStringsChange`	`((s: UiString[]) => void)`	—
`onSaveString` (required)	`(req: { oldKey: string \| null; string: UiString; }) => Promise<{ ok: true; } \| { refuse…`	—
`onDeleteString` (required)	`(key: string) => Promise<{ ok: true; } \| { refused: string; }>`	—
`defaultView`	`"content" \| "strings"`	—
`defaultRecord`	`string`	—
`defaultTarget`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { TranslationEditor } from "@beamline/translation-editor";

Get it

Translation editor is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent