Diff Editor

Component

About

A side-by-side editable text diff viewer that highlights lines added, removed or changed between two versions of code or text.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Diff Editor to your project and fits it to your theme.

Code

How Diff Editor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { DiffEditor } from "@/components/ui/diff-editor";

export default function DiffEditorDemo() {
  const [before, setBefore] = React.useState("const prev = 1;");
  const [after, setAfter] = React.useState("const next = 2;");

  return (
    <div className="flex w-full items-center justify-center bg-background p-8">
      <DiffEditor
        before={before}
        after={after}
        onBeforeChange={setBefore}
        onAfterChange={setAfter}
        className="max-w-xl"
      />
    </div>
  );
}