DEV Community

Cover image for # πŸš€ Introducing `listine`: A Custom Virtual Scroll Library for Angular with True Dynamic Height Support
Hrssh Gupta
Hrssh Gupta

Posted on

# πŸš€ Introducing `listine`: A Custom Virtual Scroll Library for Angular with True Dynamic Height Support

Hi Angular devs! πŸ‘‹

I recently faced a problem that many of us have probably struggled with β€” implementing virtual scroll in Angular where the items have dynamic heights and where the project uses standalone components (Angular 14+).

Most solutions out there didn't quite work. So I built my own.


πŸ“¦ What is listine?

listine is a lightweight, high-performance virtual scroll component designed specifically for Angular 14+ standalone architecture. It supports items of varying height and removes the limitations found in existing solutions.

Available now on npm:

πŸ‘‰ https://www.npmjs.com/package/listine
(https://stackblitz.com/edit/stackblitz-starters-5m9sy2lp?embed=1&file=src%2Flistine-virtual-scroll%2Flistine-virtual-scroll.html)


😀 The Problem with Existing Solutions

Most available libraries come with one or more major limitations:

Angular CDK Virtual Scroll
Requires a fixed itemSize. This doesn't work well for dynamic or variable-height content.

ngx-virtual-scroller
It’s no longer actively maintained and doesn't support Angular’s standalone component architecture introduced in Angular 14+.

ag-Grid
While powerful, it is a paid solution and may not be suitable for every project or budget.

πŸ”₯ What listine Offers

βœ… True Dynamic Height Support

Items can be of any height β€” no need to define itemSize.

βœ… Standalone Component Ready

No NgModule dependency. Designed for Angular 14+ standalone components.

βœ… Smart Recycling

Efficient rendering and DOM recycling for high-performance scroll, even in large lists.

βœ… Event Emitters & Hooks

Integrate loading indicators, fetch more data on scroll, or track visible range.

πŸ’‘ Ideal Use Cases

  • Variable-height list items (e.g., chat apps, dynamic cards)
  • Expandable rows or nested templates
  • Infinite scroll
  • Angular dashboards or admin panels

πŸ›  Why I Built It
I’ve worked on multiple Angular projects where performance + flexibility mattered. After getting stuck with existing solutions, I realized the community needs a better virtual scroll that works with the latest Angular features.

So I built listine to fill that gap.
If you're using standalone components, working with dynamic layouts, or just want smooth virtual scroll β€” give it a try.

πŸ™ Feedback Welcome!
This is the initial release β€” feedback and contributions are super welcome πŸ™Œ
If it helps you, please star it ⭐, share it, or suggest features you'd love to see.

πŸ“¦ listine on npm

πŸ’¬ Drop your thoughts in the comments!

angular

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.