Tutorial — your first diff

Install, compare snapshots, check dirty state, and apply a patch.

Previous: Core concepts · Next: Diffing

Playground

Diff explorer — same workflow with interactive JSON editors.

Prerequisites: Node 20+, ESM or TypeScript project.

---

Step 1 — Install

npm install @jayoncode/object-diff

Outcome: Package available for import.

---

Step 2 — Compare two objects

import { diff } from "@jayoncode/object-diff";

const before = { name: "John", tags: ["alpha"] };
const after = { name: "Jane", tags: ["alpha", "beta"] };

const result = diff(before, after);
console.log(result.changes);

Outcome: Structured change list with path, type, and values per mutation.

Render the change list (optional UI)

Object Diff is data-only — map result.changes into whatever list you prefer:

<ul>
  {result.changes.map((change) => (
    <li key={change.path}>
      <code>{change.path}</code> — {change.type}
      {change.type === "changed" ? (
        <span>
          {JSON.stringify(change.previous)} → {JSON.stringify(change.current)}
        </span>
      ) : null}
    </li>
  ))}
</ul>

<ul id="changes"></ul>
<script type="module">
  const list = document.querySelector("#changes");
  for (const change of result.changes) {
    const li = document.createElement("li");
    li.textContent = `${change.path}: ${change.type}`;
    list.append(li);
  }
</script>

---

Step 3 — Dirty check

import { hasChanges } from "@jayoncode/object-diff";

if (hasChanges(before, after)) {
  // skip render, trigger autosave, etc.
}

Outcome: Boolean guard without building full change records.

---

Step 4 — Patch round-trip

import { diff, patch, applyPatch } from "@jayoncode/object-diff";

const result = diff(before, after);
const operations = patch(result);
const updated = applyPatch({ ...before }, operations);

Outcome: updated reflects after for tracked paths.

---

Recap

Step	API	Result
1	npm install	Dependency installed
2	diff(a, b)	Change records
3	hasChanges(a, b)	Dirty flag
4	patch + applyPatch	Minimal update ops

Continue

Topic	Guide	Playground
Options & filtering	Diffing	Diff
Revert & edge cases	Patching	Patch
Export formats	Serialization	JSON

Examples · Benchmarks