{"id":42792,"library":"gethue","title":"Hue","description":"Hue is an open-source SQL Query Editor for databases and data warehouses, providing a comprehensive set of building blocks for building SQL interfaces. The current stable version is 6.0.1, with a focus on SQL parsers that power advanced autocomplete and syntax analysis, and a lightweight Web Component called SQL Scratchpad for embedding a shareable SQL editor. It offers both ESM and CJS modules, though the library is primarily designed for browser use. Key differentiators include its rich autocomplete and parsing capabilities for multiple SQL dialects, making it a powerful tool for building custom SQL editors or integrating querying functionality into existing web applications.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/cloudera/hue","tags":["javascript","Query Editor","SQL Editor","SQL","SQL Components","SQL Autocomplete","SQL Parsers","SQL Scratchpad"],"install":[{"cmd":"npm install gethue","lang":"bash","label":"npm"},{"cmd":"yarn add gethue","lang":"bash","label":"yarn"},{"cmd":"pnpm add gethue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Hue's internal UI components are built with React, but the library exposes standalone Web Components that do not require React at runtime.","package":"react","optional":true},{"reason":"Similarly needed only when using React-based components; Web Components like sql-scratchpad do not require it.","package":"react-dom","optional":true}],"imports":[{"note":"The sql-scratchpad is a Web Component loaded via a dedicated script file. Do not import from the main entry point.","wrong":"","symbol":"sql-scratchpad","correct":""},{"note":"The parsers are currently only available as CommonJS modules, not ESM. Use require() for now. This may change in future versions.","wrong":"import { SqlParser } from 'gethue';","symbol":"SqlParser","correct":"const { SqlParser } = require('gethue');"},{"note":"HueAutocomplete is a React component, not a Web Component. Use require() for Node/Webpack; do not try to load it as a standalone script.","wrong":"","symbol":"HueAutocomplete","correct":"const { HueAutocomplete } = require('gethue');"}],"quickstart":{"code":"\n\n\n SQL Scratchpad\n \n\n\n \n \n
\n\n","lang":"javascript","description":"Embeds the SQL Scratchpad Web Component into an HTML page, connecting to a Hue demo instance."},"warnings":[{"fix":"Update script source to './node_modules/gethue/lib/components/SqlScratchpadWebComponent.js' instead of './node_modules/gethue/dist/...'","message":"The library's main entry point changed in v6. Import paths for Web Components have moved from /dist/ to /lib/components/. Existing imports from older versions will break.","severity":"breaking","affected_versions":"<6.0.0"},{"fix":"Use require() consistently, or configure a bundler to handle CJS interop.","message":"The parsers (SqlParser, HueAutocomplete) are CommonJS modules only. Attempting ESM import will result in undefined exports.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Use 'gethue' instead of 'hue' in package.json dependencies and require/import statements.","message":"The earlier 'hue' package namespace is deprecated. The package was renamed to 'gethue' in v4. Using 'require('hue')' will fail.","severity":"deprecated","affected_versions":"<4.0.0"},{"fix":"Ensure all required attributes are set, even if some are empty strings.","message":"The sql-scratchpad Web Component requires the 'api-url', 'username', 'password', and 'dialect' attributes to be present. Missing attributes cause silent rendering failures.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"search_vec":"'6.0.1':32 'advanc':41 'analysi':45 'applic':106 'autocomplet':42,81,116 'block':22 'browser':74 'build':21,24,95 'call':51 'capabl':84 'cjs':65 'compon':50,114 'comprehens':18 'current':28 'custom':96 'data':14 'databas':12 'design':72 'dialect':88 'differenti':77 'editor':10,59,98,109,111 'embed':55 'esm':63 'exist':104 'focus':35 'function':102 'hue':1,2 'includ':78 'integr':100 'interfac':26 'javascript':107 'key':76 'librari':69 'lightweight':48 'make':89 'modul':66 'multipl':86 'offer':61 'open':6 'open-sourc':5 'pars':83 'parser':38,118 'power':40,92 'primarili':71 'provid':16 'queri':9,101,108 'rich':80 'scratchpad':53,120 'set':19 'shareabl':57 'sourc':7 'sql':8,25,37,52,58,87,97,110,112,113,115,117,119 'stabl':29 'syntax':44 'though':67 'tool':93 'use':75 'version':30 'warehous':15 'web':49,105","created_at":"2026-06-05T16:56:41.470849+00:00","updated_at":"2026-06-05T16:56:41.470849+00:00","problems":[{"fix":"Run `npm install gethue` and ensure the script src points to the correct file under node_modules/gethue/lib/components/.","cause":"The package is not installed or the import path is incorrect.","error":"Cannot find module 'gethue'"},{"fix":"Change `import { SqlParser } from 'gethue'` to `const { SqlParser } = require('gethue');`","cause":"Using ESM import syntax on a CommonJS-only export.","error":"SqlParser is not a constructor"},{"fix":"Use the specific Web Component script tag as shown in the quickstart, or bundle the library with Webpack/Rollup.","cause":"Attempting to import 'gethue' directly in a browser without a bundler.","error":"Uncaught TypeError: Failed to resolve module specifier 'gethue'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"http://gethue.com","github":"https://github.com/cloudera/hue","docs":null,"changelog":null,"pypi":null,"npm":"gethue","openapi_spec":null,"status_page":null,"smithery":null,"categories":["productivity","database"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-05","next_check":"2026-09-03","install_tag":null}}