Code Diff Viewer

A unified or side-by-side text/code diff of two local strings (before/after of redacted, translated, or transformed text). Additions/deletions highlighted, computed client-side via a dependency-free LCS line diff. The text analog of BeforeA.

Library

LocalMode

Framework

React

Type

component

License

MIT

Install

npx shadcn add @localmode/ui/ui/artifacts/code-diff-viewer

Files

• apps/ui/registry/localmode/artifacts/code-diff-viewer/code-diff-viewer.tsx
• apps/ui/registry/localmode/lib/utils.ts

Source

https://github.com/LocalMode-AI/LocalMode

Categories

• Dev Tool Components
• React Dev Tool Components
• Tailwind CSS Dev Tool Components
• Diff Viewer Components
• React Diff Viewer Components
• Tailwind CSS Diff Viewer Components

More from LocalMode

• Artifact
• Chart Artifact
• Data Table Artifact
• Audio Scrub Player
• Mic Selector
• Streaming Speech Panel
• Synced Transcript Viewer
• Transcribed Note Card
• Voice Button
• Voice Comparison Panel
• Voice Orb
• Voice Picker