Some core UI elements are available as generic Web Components. They are library/framework agnostic, and can be used in any Web project irrespective of what its built upon - React, Angular, Ember or something else.

They can be simply imported as classic JavaScript modules for your own development needs or just reused as is.


There are two ways to get them:

NPM registry

Published as a NPM package in

The recommended way. Versioned, published on the stabdard public JavaSCript module registry NPM, without any dependency on a local Hue project.

To run the demo app make the following changes:

  1. Install gethue NPM package

    npm install --save gethue
  2. In package.json, remove "hue": "file:../../../.." without touching the newly added gethue dependency

  3. In src/app.js, change the import line to:

    import sqlAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
  4. In webpack.config.js:

    • Change 'js' to 'node_modules/gethue' under resolve.modules
    • Remove exclude: /node_modules/, from babel-loader

Local repository

Checkout Hue and cd to the demo app. Steps are similar if you would like to use your own app instead of the demo app.

cd tools/examples/api/hue_dep

npm install
npm run webpack
npm run app

In hue_dep package.json there is a dependency on Hue:

"dependencies": {
  "hue": "file:../../.."

Now let's import the Hive parser:

import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';