Layouts · Content display

Side-by-Side Comparison

Also called: Split view, Diff view, Side-by-side view, Compare view

Puts two pieces of content with the same structure side by side on one screen, with matching parts aligned line by line and differences highlighted, so it's easy to spot what's different.

Grayscale wireframe, structure only

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Use a side-by-side comparison layout to show the differences between two versions. Each side takes 50%, with a 1px divider in the middle. Label the tops of the two sides "Version A · 2026-09-01" and "Version B · 2026-09-03". Align the content line by line and scroll both sides together. Mark deleted content with a light red background and added content with a light green background. At the top, add a "Show changes only" toggle and buttons to jump to the previous and next change.

Send to

Component library

01Decide

Does your content look like this?

Check both columns to confirm Side-by-Side Comparison is what you need.

Use Side-by-Side Comparison when

Users need to compare two pieces of content with the same structure item by item to find the differences
Comparing old and new versions of the same content, like documents, code or config
Both pieces need to be visible at the same time, instead of being compared from memory by switching pages

Pick something else when

You're comparing more than three objects (use a Data Table, with one row or column per object)
Use insteadData Table
The left is a list and the right is the selected item's details, so the two sides hold different kinds of content
Use insteadMaster-Detail Layout
Users only need to view one piece of content and have nothing to compare
Mostly viewed on phones, where the screen isn't wide enough for two pieces of content

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

01
The two sides aren't aligned line by line and don't scroll together, so users have to find the matching spots themselves
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
02
Differences aren't highlighted at all, so users have to compare word by word
03
The two sides aren't labeled with which version or object they show

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

The screen is split evenly into two panels with the same structure, each with a title bar. Content on both sides lines up row by row and scrolls together, and differences are marked with a background color.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A side-by-side comparison splits the screen down the middle and puts one piece of content on each side, like two versions of a document, code before and after a change, the specs of two products, or a source text and its translation. Matching parts on both sides line up and scroll together, and differences are highlighted with a background color.

It solves "spot the difference". Users don't have to switch between two pages and compare from memory; a quick glance left and right shows what changed. The diff view in code review, document version comparison and the before/after slider in photo editing all use this layout.

The difference from a Master-Detail Layout: in master-detail, the left is a list and the right is details, so the two sides hold different kinds of content; in a side-by-side comparison, both sides are two versions or two objects of the same kind with the same structure. When you're comparing more than three objects, a Data Table works better, with each object as a row or a column.

Developer infoTerm ID, DOM cues, match priority

Term ID: layout-split-compare
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v2 · updated Sep 29, 2026