Rental
Evidence Compare
Two photographs of the same thing, side by side, for a decision that rests on the difference — the kitchen at move-in and at move-out, a meter before and after a repair. Zoom and pan move both pictures together, so the same corner of each is always in view.
Each photograph carries what makes it evidence: when it was taken, by whom, and any note left with it.
Zoom with the buttons, with + and -, with a pinch, or with Ctrl and the
wheel; drag or use the arrow keys to look around; 0 resets. A double click
zooms in on the point clicked.
Preview
Section titled “Preview”<nana-evidence-compare
label="Kitchen, Unit 4B"
earlier='{"src":"https://images.pexels.com/photos/8146149/pexels-photo-8146149.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with white walls and clean wooden floor","label":"Move-in","takenAt":"2025-03-01T10:00:00Z","takenBy":"Agent"}'
later='{"src":"https://images.pexels.com/photos/17139803/pexels-photo-17139803.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with damaged walls and debris on the floor","label":"Move-out","takenAt":"2026-09-30T15:20:00Z","takenBy":"Agent"}'
></nana-evidence-compare>Zooming
Section titled “Zooming”Both photographs share one view. Zoom in on the stain in the move-out picture and the move-in picture shows the same patch of wall, at the same size.
| Input | Does |
|---|---|
+ / - buttons, + / - keys | Zoom about the centre |
| Ctrl + wheel, pinch | Zoom about the pointer |
| Double click | Zoom to 2× at the point, or back out |
| Drag, arrow keys | Look around once zoomed |
0, the percentage button | Back to the whole picture |
The wheel alone still scrolls the page; zooming on it would trap a reader scrolling past.
Evidence shape
Section titled “Evidence shape”| Field | Meaning |
|---|---|
src, alt | The photograph |
label | What this side is — “Move-in”, “After repair”; defaults to Before and After |
takenAt | ISO time the photograph was taken |
takenBy | Who took it |
note | What they said about it |
Side by side when there is room, stacked when there is not; layout fixes
either.
Photographs on this page are from Pexels: move-in by Max Vakhtbovych, move-out.
Installation
Section titled “Installation”npm install @nana-tec/ui-componentsOr copy the source in and own it:
npx @nana-tec/ui add evidence-compareimport "@nana-tec/ui-components/evidence-compare";<nana-evidence-compare label="Kitchen, Unit 4B" earlier='{"src":"https://images.pexels.com/photos/8146149/pexels-photo-8146149.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with white walls and clean wooden floor","label":"Move-in","takenAt":"2025-03-01T10:00:00Z","takenBy":"Agent"}' later='{"src":"https://images.pexels.com/photos/17139803/pexels-photo-17139803.jpeg?auto=compress&cs=tinysrgb&w=1200","alt":"Kitchen with damaged walls and debris on the floor","label":"Move-out","takenAt":"2026-09-30T15:20:00Z","takenBy":"Agent"}'></nana-evidence-compare>const el = document.querySelector("nana-evidence-compare");el.addEventListener("nana-view-change", (e) => console.log(e.detail));Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
earlier | earlier | Evidence | null | null | The earlier photograph: src, alt, label, takenAt, takenBy, note |
label | label | string | '' | What is being compared |
later | later | Evidence | null | null | The later photograph, in the same shape as earlier |
layout | layout | EvidenceLayout | 'auto' | auto sits the pair side by side when there is room and stacks it when there is not |
maxZoom | max-zoom | number | 4 | How far in the zoom goes |
Events
| Event | Description |
|---|---|
nana-view-change | The zoom or position changed (detail.zoom, detail.x, detail.y) |
Slots
| Slot | Description |
|---|---|
actions | Controls beside the zoom buttons, such as a dispute or accept button |
CSS parts
| Part | Description |
|---|---|
::part(base) | The container |
::part(toolbar) | The title and zoom controls |
::part(title) | The comparison's name |
::part(zoom) | The zoom control group |
::part(side) | One photograph with its details |
::part(frame) | The window the photograph is seen through |
::part(image) | The photograph |
::part(meta) | The photograph's details |
CSS custom properties
| Property | Description |
|---|---|
--nana-evidence-compare-ratio | Aspect ratio of each frame |
--nana-evidence-compare-bg | Colour behind a photograph that does not fill its frame |