1.0.5 • Public • Published

    Xel (DEMO)

    npm downloads npm version

    Xel is a HTML 5 widget toolkit for building native-like Electron and Chrome apps.

    Xel follows the Keep It Simple principle and thus is written using plain JS, HTML and CSS. It does not make use of any preprocessors or heavy abstraction layers.


    • Buttons
    • Tabs
    • Sliders
    • Selects
    • Checkboxes
    • Switches
    • Radios
    • Menus
    • Menubars
    • Context menus
    • Text inputs
    • Number inputs
    • Cards
    • Dialogs
    • Drawers
    • Popovers
    • Progressbars
    • Throbbers
    • Swatchs
    • Steppers

    Visit xel-toolkit.org for a complete list of all supported widgets with demos and documentation.


    Thanks to advanced theming capabilities, Xel can imitate native widgets.

    The themes currently shipped with Xel are:

    • Material - implements Material Design Guidelines
    • MacOS - implements macOS Human Interface Guidelines
    • Vanilla - generic light theme

    Supported browsers

    The project makes heavy use of bleeding edge Web Platform features such as Custom Elements v1, Shadow DOM v1, SVG 2 and ES2017 and therefore works only on the following browsers:

    • Chrome >= 58
    • Chromium >= 58
    • Opera >= 45
    • Atom Electron >= 1.7
    • NW.js >= 0.23
    • Android WebView >= 58


    1. Install Xel

    $ npm install xel

    2. Link Xel theme

    Add to the <head> one of the following:

    • MacOS theme
    <link rel="stylesheet" href="node_modules/xel/themes/macos.css">
    • Material theme
    <link rel="stylesheet" href="node_modules/xel/themes/material.css">
    • Vanilla theme
    <link rel="stylesheet" href="node_modules/xel/themes/vanilla.css">

    3. Link Xel

    Add to the <head>:

    <script src="node_modules/xel/xel.min.js"></script>

    4. Link fonts

    Some themes require additional fonts to be linked or embedded. Use Google Fonts service to generate necessary code.

    • Material and Vanilla themes - Roboto and Roboto Mono. For non-latin scripts, also include Noto Sans.
    • MacOS theme - Relies on fonts provided by the operating system, you don't have to link anything.


    1. Install Xel and its dev dependencies

    $ git clone https://github.com/jarek-foksa/xel
    cd xel
    $ npm install

    2. Launch the dev server

    $ ./project.js serve

    3. Open http://localhost:5000 in your browser


    npm i yp-xel

    DownloadsWeekly Downloads






    Unpacked Size

    933 kB

    Total Files


    Last publish


    • yudaprama