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.
The library has a flexible HTML layout that supports any CSS framework.
It's possible to compare by different data types: text, HTML, and numbers.
Case-sensitive and case-insensitive comparison is supported.
It's possible to use regex to ignore special characters.
Responsive and touch-enabled gallery with the modern Web Animation API.
There is local storage, session storage, and cookies support.
Great and extensive documentation is included.
It's possible to have any number of library instances on the same page.
The library is written in TypeScript + ES6 JS and uses modern Web Animation API.
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.
Local storage - this is persistent storage that keeps data even if the user closes the browser.
Session storage - it will be cleared when the browser session is over, typically when the user closes the browser.
Cookies - unlike local and session storage, cookie values can be used on the server too. It's also possible to define cookies' expiration date.
The library contains a responsive and touch-enabled gallery with the modern Web Animation API effects.
Mobile ready and touch-enabled. The gallery HTML is fully responsive and customizable via data attributes.
CSS Frameworks. Works in any CSS framework or pure CSS. The library contains examples of five famous CSS frameworks.
Animation. The library uses a modern & efficient Web Animation API.
CSS Classes. Dynamic CSS classes for selected, disabled, and hidden states.
The library comparison table is fully customizable and mobile-ready.
Control Buttons. There are control buttons to hide and show identical rows, reset buttons, and also close table columns buttons.
Fade Animation. There is a fade-in / fade-out animation on adding and removing table columns.
Flexible HTML Layout. The table HTML and styles are highly customizable through data attributes.
Selected Columns Number. It's possible to define the maximal number of columns that can be selected.