Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including xel with all npm packages installed. Try it out:

xel lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("xel/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

xel v0.0.219

Widget toolkit for building native-like Electron, NW.js and Chrome apps

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.

Widgets:

  • 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.

Themes

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

Setup

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.

Development

1. Install Xel and its dev dependencies

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

2. Install Firebase Tools

$ npm install -g firebase-tools

3. Launch the dev server

$ firebase serve --only hosting

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free