About Aligner

Aligner is a free, browser-based tool for drawing word-to-word and morpheme-to-morpheme links between stacked lines of text — for bilingual glosses, interlinear annotations, classroom handouts, and social posts. The same project is also referred to as Bitext Align in URLs and branding. Everything runs in your browser; your sentences are not stored on our servers unless you choose to share them.

Line editor

You can add several lines (for example source, IPA, glosses, and a free translation). Each line has its own font (Google Fonts or an uploaded file), text size, horizontal spacing between words, and optional right-to-left layout for scripts such as Hebrew or Arabic. Lines can be reordered so that only adjacent rows are linkable — Aligner always links the line above to the line directly below it. Open a line’s popover for quick typography controls, or the full Edit line dialog to change text and see a live preview of how it splits into word boxes.

Aligner line editor: summary of how words are split (whitespace, extra characters, join marker, punctuation) above stacked lines of text, with a gear control to open word-splitting settings.
Main editor: stacked lines and a short recap of how text is split into clickable words (gear opens the Tokens tab in Settings).
Popover for editing line 3: typography controls for font family, text size, word spacing, line reorder arrows, and delete, above a Turkish token row.
Popover on a line: font, size, spacing, reorder, and whether to draw connectors to the row below.
Edit line modal for line 3: Turkish text with pipe characters as morpheme boundaries, a summary of split and join rules, optional right-to-left row toggle, color-coded token preview chips, and Done.
Edit line dialog: change the sentence and see how it splits into highlighted word boxes.

Preview and alignment

Click tokens to create colored alignment links. Many-to-many groupings share one color so you can see which tokens belong to the same correspondence. For each pair of adjacent lines you can adjust the vertical gap and optionally hide the connector curves while keeping the links in the data model — useful when a gloss row sits tight under a sentence. The preview supports a clean “hide chrome” mode and fullscreen for screenshots.

Preview of the Turkish interlinear example: four stacked rows (glosses, IPA, Turkish, English) with curved colored connectors linking aligned tokens across adjacent lines.
Live preview with connectors across a multi-line Turkish interlinear.

Settings

The settings panel uses icons for four areas. What each one does in plain language:

  • Style — light or dark UI, background of the preview background (light or dark), whether connectors are curved or straight, how thick and faint they are, default vertical space between lines, and optional per-pair spacing overrides. You can also hide preview controls for a clean screenshot and open fullscreen from the preview toolbar.
  • Colors — color palettes for links, and whether matching words are highlighted by coloring the text or the word background (including in exports when that option is on).
  • Tokens — in the UI this tab is labeled “Tokens”; internally we talk about tokenization, meaning “how your text is cut into clickable word boxes.” Here you can show line numbers; choose extra characters that force a new word (for example | or - when you need morpheme boundaries); set a join character so two written words still count as one box for linking (shown with a space in the preview); and optionally split punctuation into its own boxes or limit which punctuation splits.
  • Fonts — upload font files for custom scripts and pick them per line, or add families from Google Fonts by name.

The short summary next to the line editor (“Whitespace splits words…”) mirrors the same rules as the Tokens tab; use the gear button there to jump straight to those controls.

Settings Style tab: UI theme, background mode, connector curve style, line thickness and opacity, default and per-pair line gaps, and options to hide preview chrome.
Style — background, connectors, spacing, preview chrome.
Settings Colors tab: toggle to match token colors to links, choice between coloring token text or backgrounds, and pastel, vivid, and academic palette buttons with swatches.
Colors — palettes and how link colors apply to tokens.
Settings Tokens tab: show line numbers, extra token split characters, single-character merge marker, and punctuation tokenization with optional custom punctuation list.
Tokens — how text becomes word boxes: splits, join marker, punctuation.
Settings Fonts tab: library of uploaded custom fonts with remove actions, plus controls to add fonts from Google Fonts by family name.
Fonts — custom uploads and Google Fonts lookup.

Export and share

Download the visualization as PNG, SVG, PDF, or a self-contained HTML file. You can also build a share link: the full project and visual settings are encoded in the ?data= URL parameter so anyone who opens the link sees the same alignment. The Share dialog adds a QR code, social targets, and a Data object action for JSON shaped like a curated preset (useful for authors and debugging).

Export card with buttons to download the alignment as PNG, SVG, PDF, or self-contained HTML, plus options related to QR and sharing.
Export — PNG, SVG, PDF, and HTML.
Share card with Copy share link, More options for QR and advanced sharing, and icons to share on X, Facebook, and Reddit.
Share — link, QR, social targets, and developer JSON copy from the dialog.

Examples and motion demos

Use Load example on the main page to open curated projects (simple bilingual pair, Turkish interlinear with IPA and glosses, Hebrew and Arabic with English, Tagalog compounds, Japanese–Chinese–English, and more). They illustrate RTL, multi-line stacks, and tricky word-splitting cases. The clips below are the same motion demos as on the home page: linking in the editor, and a conlang layout with a custom font and glosses.

Animated demo in Aligner: creating word links between “Hello world” and its French translation
Linking words between two sentences
Conlang alignment example in Aligner: custom script font on the source line, interlinear glosses, and English translation with connectors
Conlang with a custom font and interlinear glosses

Partner links

Aligner stays free and without aggressive ads. Hosting and ongoing upkeep still have a cost, so we add a few optional partner links - use them if you were already considering the service. It will help us keep the site running. The referral bonuses come from the provider. Here I recommend the services that I happily use myself.

Preply — language tutors

Personally, I use Preply for language learning. If you want to try an online tutor, our link includes 70% off the trial lesson. We earn a small bonus if you go on to paid lessons - it helps to keep the site running.

Open Preply

Railway - easy deployment

This project is deployed on Railway. For me it works like a charm: I just add my repo and Railway builds and deploys it by itself. This link gives $20 in credits. No pressure - use if it fits your stack.

Open Railway

Cursor — AI code editor

Cursor is my main AI coding tool. If you were going to try it anyway, this referral gives new accounts 50% off the first month of Pro, Pro+, or Ultra (per Cursor’s current offer).

Open Cursor

Wise — international transfers

Sometimes I have trouble with money transfers in my country. Wise worked for me without too much hassle. With this invite, new sign-ups get a fee-free first transfer up to roughly US$600 equivalent.

Open Wise

Contact

Questions or feedback about Aligner: dani@tinygods.dev ·

Privacy

We do not run accounts or store your text on our infrastructure. Details on analytics, feedback, and fonts are in the privacy policy.