11 JavaScript List Examples
Make your lists smarter with JavaScript list examples. This collection features interactive UIs with live filtering, sorting, search, pagination, animations, and even drag-and-drop functionality — perfect for dashboards, task managers, and any content-driven web app.
Last updated:
Little Details
A stylized nested to-do list employing advanced CSS pseudo-elements for custom markers and hover-based reveal logic for sub-tasks. JavaScript handles basic DOM manipulation for adding/removing items, while the dark UI features gradient borders and tooltip interactions.
To-Do List
A stylized paper notepad To-Do list featuring a skew transformation and stack-effect shadows. Clicking checkboxes toggles a strikethrough style on handwritten list items via JavaScript class manipulation.
Live User Filter
A responsive and fast contact search interface that loads dynamically and operates without page reloads during filtering.
To-Do List App with ES6
A full-featured single-page application (SPA) with a responsive interface, filtering, and micro-interactions that runs fast and looks professional.
Transaction List with View Transitions
A seamless master-detail interface leveraging the native View Transitions API to animate structural DOM changes without external libraries.
Literally Linked Lists
An engaging data comparison tool that transforms static lists into a dynamic relationship map, clearly visualizing taste overlaps via connecting lines.
Sliding List with Scroll-Driven Animations
This demo uses a single scroll event listener to calculate the individual progress of each list item as it enters the viewport. The progress value is then passed to a CSS Custom Property, which drives a staggered transform: scale() and opacity animation for a fluid, app-like reveal effect.
