Product Compare Library

Product Compare is a library for product features, and product plans comparison. It supports multiple CSS frameworks and can be implemented in any HTML layout using data attributes. The library contains an embedded touch-enabled gallery, supports local and session storage, and can compare by text, HTML, or numbers.

View Examples Documentation

Example Pages

Below there are various example pages of product comparison in multiple layouts and with different CSS frameworks.


Product Compare is a library for making product features comparisons quickly and easily. It is written in modern ES6 JavaScript + TypeScript and doesn't have any external dependencies. Any CSS framework can be used for styling.

Data Types

The library supports the following data types:

  • Text. The default comparison type is text. The comparison can be case-sensitive or non-sensitive. Also, it's possible to use regex to ignore some special characters.
  • HTML. HTML comparison is also supported. The library can compare any HTML elements like images, icons, or complex HTML structures.
  • Numbers. The library can compare numeric data. In this case, all other content except numbers will be ignored.


The library supports storage to save the current state and restore it after page refresh or when the back button is pressed.


The library comparison table is fully customizable and mobile-ready.