If I had a nickel for every time I did re-implement some part of Discord UI, I’d have two nickels. Which isn’t a lot, but it’s weird that it happened twice.

The VirtualScroll and some other features I've been playing with


This project, Skelord, was initiated to replicate the functionality of Discord’s user list within a new context, driven by an interest in understanding and implementing modern UI design principles.

Driven by curiosity, I ventured to explore the mechanics behind Discord on yet another one day rush project.

Understanding the User List Anatomy

Discord’s user list is a fundamental component of its interface. The analysis began with an examination of the scroll-handling methods and architecture of Discord’s React-based structure, with the goal of understanding its underlying mechanics.

I dived into the depths of Discord’s React-based structure, deciphering its scroll-handling methods and intricacies. Armed with insights about both compiled React and classic JS patterns, I embarked on the journey of translating these discoveries into the world of Svelte, my go-to framework.

Implementing VirtualScroller, the Svelte Way

Discord’s scroll mechanics utilize a combination of relative and fixed heights managed by JavaScript. In Skelord, a simplified overflow-based scroller was implemented to achieve smoother interactions, particularly beneficial for devices with limited resources.

This shift not only played harmoniously with hardware acceleration and mouse scrolls but also paved the way for smoother interactions.

The discord way :

The discord way

The skelord way :

The discord way

Notice the small difference ? It plays big when running on low-end devices !

Recreating the Scrollbar Theme

The distinctive scrollbar design of Discord was replicated using webkit scrollbar CSS theming in Skelord, ensuring optimal performance while closely mirroring the original UI.

Thanks to the :hover state, I could make it optionnal to also show/hide the scrollbar when needed, resulting in a almost similar experience from the original UI.

Scrolling fast !

Server-Side Rendering (SSR)

Skelord utilized server-side rendering (SSR) through SvelteKit to preload user data on the server side, resulting in faster initial load times and seamless transitions between components.

Looking at the sourcecode, you’ll see some data-sveltekit-hydrate, that indicate how the JS should hydrate the frontend with the presented backend data.


The project successfully replicated Discord’s user list functionality within the Skelord clone. This demonstrates the ability to analyze, understand, and implement complex UI components, with potential applications in various web development projects.

I do hope to add more to this project, and maybe complete the whole frontend components for later use !

Also Read

  • Reports generator


    Using the JavaFX runtime and some streamed CSV JDBC, the report generator was designed to quickly produce provisional quotes as a branded Excel file using Apache POI.

    • JavaFX
    • Reporting
    • CSV
    • XSLX
    • POI
  • SuperH Emulator


    A simple yet powerful CPU emulator, capable of emulating a subset of SuperH instructions.
    It is built in Python with TKinter Canvas that provide a cool GUI.

    • SuperH Emulator
    • Python
    • TKinter
    • Canvas
    • CPU ISA
  • A better file listing

    Games Center

    Frustrated from the Apache default index page, I decided to write a simple single file web app under constraints

    • Svelte
    • SPA
    • Single File
    • Scraping

Want more ?

I've got a lot of other awesome projects

See them all !