Show navigationHide navigation
Diff view
When you're editing an entry on a feature branch, the entry editor has an Edit / Diff segmented control in the top bar. Switching to Diff replaces the form with a read-only, per-field view of everything this branch would contribute to the base branch if it were merged right now.
It answers one question: "what's different about this entry compared to what's live?"
Opening the diff#
- Create or switch to a feature branch via the branch menu in the header (see Editorial workflow).
- Open any entry in that branch.
- Click Diff in the segmented control next to the breadcrumb.
Click Edit at any time to go back to the form — unsaved form state is preserved.
What's compared#
The diff compares two committed snapshots of the entry's files:
- After — the entry on the active feature branch.
- Before — the same path on the base branch (e.g.
main).
Unsaved form state in the browser is not part of the comparison. Save first if you want a draft change to appear in the diff.
If the entry doesn't exist on one side, the diff shows a one-sided result: every field is either added (new entry on the branch) or removed (entry deleted on the branch).
What each field format looks like#
Every field in the collection schema is rendered as its own row, in schema order. A small amber dot next to the field label marks which rows contain a change.
| Field format | Rendering |
|---|---|
string, slug, url, color, number, datetime, boolean | Unified +/− hunk, no line numbers. |
text, json | Unified +/− hunk with line numbers. |
markdown, richtext | Unified +/− hunk with line numbers, generated from the companion .md / .mdx file, not the JSON entry. |
image | Side-by-side Was / Now thumbnails. UUIDs are resolved to /media/<uuid>.<ext> using the media entry on each side. |
reference, select | Stringified JSON in a unified hunk (keys / values differ → the row is marked changed). |
Unchanged fields render a muted No changes row so you can scan down the list and confirm nothing unexpected slipped in.
Color conventions#
- Green (
emerald-50/emerald-900, dark:emerald-950/40/emerald-200) — added content. - Red (
red-50/red-900, dark:red-950/40/red-200) — removed content. - Muted gray — context lines (unchanged surroundings).
All combinations meet WCAG AA contrast in both light and dark mode.
Empty states#
- No unmerged changes for this entry — the entry's files are byte-identical on the feature branch and the base branch.
- Could not load diff. — the server action failed (for example, GitHub API was unreachable). The diff is best-effort and never throws into the editor.
- No Edit/Diff toggle shown — you're either on the base branch directly (nothing to diff against), the entry's status is
archived, or, in production, no feature-branch cookie is set yet.
How it works#
- Development: the working-tree file is the "after";
git show <baseBranch>:<path>provides the "before". - Production: both sides are read via the GitHub API from the feature branch and base branch tips.
Both paths use the same presentation, so what you see locally matches what reviewers see on a Vercel preview.
Related#
- Editorial workflow — creating branches, publishing, merging.
- Content model —
sys.statusstates (draft,changed,published,merged,archived). - Media library — how image UUIDs become
/media/<uuid>.<ext>URLs.