Language preview

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

One document in two languages side by side. The panes scroll together; choosing a passage in either lights it in both and offers Find in editor; a passage not translated yet is drawn as a gap in that language. The live preview follows every edit but leaves out headers and footers (one chosen there says it can't be placed); the rendered preview shows the whole page with system fonts, says when it's older than the latest translations and renders again on request. A file type without a live preview says so. Each pane keeps its language's direction.

Use it for

Checking a translated document against its source, passage by passage, as readers will see it.
Any side-by-side comparison of two versions of one text that should scroll together.

Not for

Showing what changed between versions (file-diff, revision-compare).
Reviewing a PDF with comments (document-review).

Anatomy

header: the product's mark, the title and document, live or as rendered
toolbar: left language, right language, compare, scrolling together
notes: live leaves out headers and footers; rendered time or out of date with Render again; file type without live
panes: each language's page, passages to choose, gaps for untranslated ones
bar: the chosen passage, Find in editor, or why it can't be placed

States

one language or two; scrolling together
passage chosen (lit in both), not translated (hatched gap)
live; rendered current; rendered out of date (amber), rendering
can't place a header or footer live (amber)
live not offered for the file type (said)
phone: panes stacked
right to left: each pane follows its language

Keyboard

Tab into a pane to scroll it with the keys; Tab through passages and Enter chooses one; Find in editor follows

Motion

Nothing animates; the panes keep pace with each other while scrolling.

Props

Prop	Type	Default	Description
`document` (required)	`string`	—
`kind` (required)	`string`	—	The file type, e.g. DOCX.
`languages` (required)	`{ code: string; name: string; dir?: "ltr" \| "rtl" \| undefined; }[]`	—
`segments` (required)	`DocSegment[]`	—
`defaultLeft`	`string`	—
`defaultRight`	`string`	—
`defaultCompare`	`boolean`	—
`defaultMode`	`"interactive" \| "static"`	—
`staticOnly`	`boolean`	—	The file type has no live preview.
`renderedAt`	`Date`	—
`stale`	`boolean`	—	Translations changed after the static render.
`onRegenerate`	`(() => Promise<Date>)`	—
`onFind`	`((segment: string, language: string) => void)`	—
`defaultSegment`	`string`	—
`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 { LanguagePreview } from "@beamline/language-preview";

Get it

Language preview 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