Exadel Smart Library (ESL) - is the lightweight custom elements library that provide a set of super-flexible components

esl, lightweight, typescript, flexible, web components, web components utils, custom elements, custom elements ts, component library, component-library, custom-elements, custom-elements-ts, dependency-free, exadel, web-components
npm install @exadel/esl@3.0.3


Exadel Smart Library

npm npm Downloads version build License

Exadel Smart Library (ESL) is a web components based library that gives you a set of lightweight and flexible custom elements to easily create basic UX modules and make your websites super fast.

Demo Site (draft)

Library Structure


Form Components


Installation Guide

  1. Preconditions:

    • Make sure you have all needed polyfills to support browsers from your browser-support list. See Browser support & Polyfills for details.
    • Use bundler to build your project. Currently, only ES6 modules are available for consumption.
  2. Install esl npm dependency

    npm i @exadel/esl --save
  3. Import Components/Modules you need.

    import '@exadel/esl/modules/esl-component/core';
    • core module entry usually represents main part of the module;
    • include optional sub-features directly. See component's documentation for details.
    import '@exadel/esl/modules/esl-media/providers/iframe-provider';
    • Some modules contain cumulative all entries.
    • Styles are distributed in two versions:
      • 'ready to use' core.css or core.less
      • mixin version core.mixin.less for custom tagname definition
  4. [Optional] Setup environment configuration, e.g. custom screen breakpoints.

    import {ESLScreenBreakpoints} from '@exadel/esl/modules/esl-media-query/core';
    // define XS screen breakpoint for up to 800px screen width
    ESLScreenBreakpoints.addCustomBreakpoint('XS', 1, 800); 
  5. Register components via register static method call


    You can pass custom tag name to 'register' function, but use this option only in an exceptional situation.

Browser support & Polyfills

Exadel Smart Library does not have dependencies but uses the following list of native browser features:

All of them are fully supported by modern browsers, such as Chrome, Firefox, Safari or Edge (>43).

In order to make ESL work in older browsers you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (Older versions of Edge and Safari)

Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.

See more details on what polyfill approach might look like in the test-server examples.

Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under ./polyfills directory.


  • Interactive Documentation + demo site redesign
  • ESL Carousel component
  • UI Playground integration to demo site
  • More helpers and sugar of ESLBaseElement (event listener helpers and decorators)
  • Stable version of ESL Footnotes and ESL Popup components
  • Extension of esl-form elements (custom form base, helpers, validation and more)
  • Anchor Navigation component
  • ESLToast component
  • More components in the library

Development Information for contributors

If you are a part of ESL team or want to contribute to the project you can find useful information about the project processes and agreements here:

ESL Core Team: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko.

ESL Contributors: Aliaksandr Auseyeu, Anna Barmina, Anna-Mariia Petryk, Anastasiya Lesun, Andrey Belous, Dzianis Mantsevich, Liubou Masiuk, Natallia Harshunova, Yana Bernatskaya.

Exadel, Inc.