Animated Code Diff Viewer

Pro

Show additions and removals together, or flip to a before/after view.

Loading preview...

Props

PropTypeDefaultDescription
beforestring-Before snapshot — full source string.
afterstring-After snapshot — full source string.
languageDiffLanguage"tsx"Prism language for highlighting.
filenamestring-Filename shown in the header.
autoplayMsnumber0Auto-replay interval in ms. Pass 0 to disable.
initial"before" | "after""before"Initial state when using toggle view mode.
viewMode"inline" | "before" | "after" | "toggle""inline"Initial display mode. Toggle starts from initial.