`<wa-comparison>`

Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use them for before/after images, design revisions, or side-by-side previews.

Category: Effects
Built with: Lit
Library: Web Awesome
Author: Web Awesome
Package: @awesome.me/webawesome
Component size: 22.1 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 8.2 kB JS (shared by every Web Awesome component, loaded once per page)
Popular: 5 out of 5
Downloads: 364,100/week · jsDelivr 33,855,650 hits/month (whole @awesome.me/webawesome package)
GitHub stars: 1,348
Latest stable version: 3.14.0
Last published: Sep 24, 2026
Component last changed: Feb 4, 2026 (in 3.2.0)
License: MIT
Status: stable

Documentation
Demo
Source code

Attributes

position
dir
lang
did-ssr

Slots

before
after
handle

Events

change

CSS Parts

base
comparison
before
after
divider
handle