The Exadel Smart Library

Exadel Smart Library (ESL) is our open-source framework-agnostic web components library that can be applied to any project. All ESL components can be easily customized to create a wide range of interactive content that works like a charm across a large variety of devices.

The ESL Reusable Web Components

Exadel Smart Library contains a number of ultra-light reusable UI components, each with multiple varieties along with utilities for additional development customization.


Take the headache out of showing images, and reduce data transfer with our automatic image displaying features including auto-formatting and device-friendly display; ESLImage also supports the lazy loading image technique


Gain control of how video and audio content is played and displayed with our UI component library! ESLMedia, one of its core components, gives you the same API for different providers and includes helpers like lazy loading, active query, and cropping


Display any large block of content in vertical or horizontal format with our scrollbar component. To create a custom scrollbar, you only need to customize this component with CSS, and it will look the same on any device, independent of the browser and operating system


Show users dynamic notifications with our simple, yet powerful alert web component


Use our custom form element to display lists of items with single and multiple sections


Display lists of items with single and multiple selections with our form-creation custom element


Show and hide content with our base container component, which supports a host of customizable options like timeouts, groups, and dynamic CSS classes, with out-of-the-box accessibility (ARIA) built-in


Change the state of ESLToggleable web components through hover, click and keyboard interactions, depending on the device; our component comes with a11ty out-of-the box


Expand on your control of ESLToggleable through additional management options like collapse and expand animations and control over content height


Combine Panels into groups, that can create custom UI experiences like accordions and tabs for different content blocks, depending on the device your users are on


Gain easy control over navigation for Tab elements including scrollable, grid, and other custom UX options


Combine sets of controls on a page into manageable groups with specialized keyboard control and a11ty roles



Expand on your ESLToggleable options with popups that automatically calculate their position based on predetermined anchors



Link helpful text to pages or elements with this addition to the ESLPopup interface


ESL Footnotes & ESL Note

Add automatically numbered, collected, and containered footnotes to any text, and gain control of where your footnote is displayed

ESL Utilities

We’ve built a set of helper modules that simplify the process of developing applications with our UI component library. The Exadel Smart Library utilities include:

ESL Traversing Query

A utility that supports simplified but powerful syntax that lets you find web components on pages — letting you define relationships, for example, between triggers and toggleables

ESL Media Query

A JS media query utility to support extended syntax to define conditions for devices and/or values per device type, screen size, or browser

ESL Base Element

Our base custom element wrapper, which comes with a set of common decorators for properties, that help you easily define UI component settings


A range of additional features that includes tools for working with Objects, Arrays, and other formats, as well as commonly used typescript decorators and patterns

Supercharge your website creation with Exadel Smart Library — available free on GitHub.

Github Repository

Why the ESL Web Components Library


Our team has reduced the work needed to create reusable UI components by giving you a reliable base to customize and expand on for fast and accurate development


We specially designed our reusable web components to work quickly and efficiently in browsers, cutting out the unnecessary code that takes a toll on user experience


ESL doesn’t introduce any additional restrictions as it offers library and framework-agnostic web components that work with any tech stack of your choice


While our web components may be small, they’re also universal, allowing you to mix and match them at will to create large components


We test all of our utilities with unit tests, which means every new addition works just as expected


With ESL, there’s no need to write lengthy markup — our reusable UI components are small, but they’re designed to be the optimal building blocks for your content

Get in touch with our product engineering team to learn how ESL can help with your User Interface.

Contact Us