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:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
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:
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:
1. Install Xel
$ npm install xel
2. Link Xel theme
Add to the
<head> one of the following:
<link rel="stylesheet" href="node_modules/xel/themes/macos.css">
<link rel="stylesheet" href="node_modules/xel/themes/material.css">
<link rel="stylesheet" href="node_modules/xel/themes/vanilla.css">
3. Link Xel
Add to the
4. Link fonts
Some themes require additional fonts to be linked or embedded. Use Google Fonts service to generate necessary code.
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