[GH-ISSUE #760] Feature request: word-level (intraline) diff highlighting in <diff> component #979

New issue

Open

opened 2026-03-14 09:11:26 +03:00 by kerem · 1 comment

kerem commented

2026-03-14 09:11:26 +03:00

Owner

Originally created by @rsbmk on GitHub (Mar 1, 2026).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/760

Summary

The <diff> component currently highlights changes at the line level only — entire lines are colored as added/removed. Many diff viewers (VS Code, GitHub, lazygit) also highlight the specific words/characters that changed within a line pair, making it much easier to spot small changes in long lines.

Use Case

I'm building guit, a terminal git client using OpenTUI + Solid.js. Users expect word-level diff highlighting similar to lazygit or GitHub's diff view.

I initially tried passing git diff --word-diff to the <diff> component, but --word-diff changes the output format from standard unified diff — breaking the parser with:

Error parsing diff: Hunk at line 5 contained invalid line

The <diff> component (which uses parsePatch internally) only accepts standard unified diff format, so there's no way to achieve word-level highlighting with the current API.

Proposed Behavior

When enabled (e.g. via a wordDiff?: boolean prop), the <diff> component would:

Parse the standard unified diff (no changes to input format)
For matched add/delete line pairs within a hunk, compute the character-level difference
Highlight only the changed characters/words with a distinct background color (e.g. slightly brighter than the line-level addedBg/removedBg)

Potential new props

interface DiffRenderableOptions {
  // ... existing props ...
  wordDiff?: boolean                    // Enable word-level highlighting (default: false)
  addedWordBg?: string | RGBA           // Background for added words (default: brighter green)
  removedWordBg?: string | RGBA         // Background for removed words (default: brighter red)
}

Visual Reference

GitHub's diff view is a good reference — full lines are lightly colored, and the specific changed words have a more saturated background:

Added line: light green background, changed words: darker green
Removed line: light red background, changed words: darker red

Environment

OpenTUI version: latest (via @opentui/core + @opentui/solid)
Runtime: Bun
Framework binding: Solid.js

Originally created by @rsbmk on GitHub (Mar 1, 2026). Original GitHub issue: https://github.com/anomalyco/opentui/issues/760 ## Summary The `<diff>` component currently highlights changes at the **line level** only — entire lines are colored as added/removed. Many diff viewers (VS Code, GitHub, lazygit) also highlight the **specific words/characters** that changed within a line pair, making it much easier to spot small changes in long lines. ## Use Case I'm building [guit](https://github.com/rsbmk/git-ui), a terminal git client using OpenTUI + Solid.js. Users expect word-level diff highlighting similar to lazygit or GitHub's diff view. I initially tried passing `git diff --word-diff` to the `<diff>` component, but `--word-diff` changes the output format from standard unified diff — breaking the parser with: > Error parsing diff: Hunk at line 5 contained invalid line The `<diff>` component (which uses `parsePatch` internally) only accepts standard unified diff format, so there's no way to achieve word-level highlighting with the current API. ## Proposed Behavior When enabled (e.g. via a `wordDiff?: boolean` prop), the `<diff>` component would: 1. Parse the **standard unified diff** (no changes to input format) 2. For matched add/delete line pairs within a hunk, compute the character-level difference 3. Highlight only the changed characters/words with a distinct background color (e.g. slightly brighter than the line-level `addedBg`/`removedBg`) ### Potential new props ```typescript interface DiffRenderableOptions { // ... existing props ... wordDiff?: boolean // Enable word-level highlighting (default: false) addedWordBg?: string | RGBA // Background for added words (default: brighter green) removedWordBg?: string | RGBA // Background for removed words (default: brighter red) } ``` ## Visual Reference GitHub's diff view is a good reference — full lines are lightly colored, and the specific changed words have a more saturated background: - Added line: light green background, changed words: darker green - Removed line: light red background, changed words: darker red ## Environment - OpenTUI version: latest (via `@opentui/core` + `@opentui/solid`) - Runtime: Bun - Framework binding: Solid.js