Translation workbench

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

Translating a file segment by segment. Source and target sit side by side, segments grouped by their content unit; the source is read only (it changes by uploading a new file), the target is edited and saved as is or saved and approved, a refused save keeps the edit and says why, and a language the person can only read says so. A unit's shared character limit per language counts every segment in it, says when it's close or over (soft: saving still works) and offers a shorter translation with what it saves before it's used, still over after it said. Selection names its scope (these shown, all matching, approved, not approved), a bar counts it, shows only it and approves or unapproves; a partial failure says how many couldn't change and why.

Use it for

Translating and approving an app's strings language by language.
Any side-by-side text editor where groups share a length budget and many rows are approved at once.

Not for

One segment's tags, memory and glossary (segment-editor).
A key's definition (translation-key).

Anatomy

header: the product's mark, the title and file, the language
toolbar: filter (everything, not approved, approved, not translated, over the limit), selection by scope, read-only note
bulk bar: count and scope, show only these, unapprove, approve, clear; the result
units: name and shared budget with a meter; near or over; rows of select, source with lock, target, status, save or save and approve, refusal, a shorter translation

States

row: not translated (amber), saved not approved (blue), approved (green), edited (save actions), save refused (red)
unit: within, near (amber), over (red, soft), shorter offered, still over after it
selection: by hand, by scope (named), only selected shown, all changed (green), partial failure (amber, why)
language read only (said, no editing)
nothing matches the filter
phone: source above target
right to left: the page mirrors; each text keeps its own direction

Keyboard

Tab through filter, selection, row checkboxes, targets and their actions; Space ticks a row

Motion

Nothing moves; changes appear on input.

Props

Prop	Type	Default	Description
`file` (required)	`string`	—
`sourceLanguage` (required)	`string`	—
`languages` (required)	`Language[]`	—
`units` (required)	`ContentUnit[]`	—
`segments` (required)	`Segment[]`	—
`defaultLanguage`	`string`	—
`defaultFilter`	`"all" \| "approved" \| "empty" \| "over" \| "unapproved"`	—
`onSave`	`((segment: string, language: string, text: string, approve: boolean) => Promise<void>)`	—	Saves one segment; a rejection keeps the edit and says why.
`onBulk`	`((ids: string[], language: string, approve: boolean) => Promise<{ failed: string[]; why…`	—	Approves or unapproves many; returns the ids that couldn't change and why.
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { TranslationWorkbench } from "@beamline/translation-workbench";

Get it

Translation workbench 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