{"id":15931,"library":"webix-jet","title":"Webix Jet Framework","description":"Webix Jet is a client-side JavaScript micro-framework designed to simplify the development and maintenance of single-page applications (SPAs) built with Webix UI components. As of version 3.0.3, it offers a structured approach to app creation through modules like apps, views, models, and services, implemented as ES6 classes. The framework emphasizes modularity, reusability, and efficient code organization, making it suitable for complex data management applications. Key differentiators include its lightweight footprint (under 10kb minified), a robust plugin system for common functionalities (e.g., menus, localization, authentication), and flexible routing capabilities. Since version 3.0, Webix Jet has migrated its default toolchain to Vite, while still maintaining compatibility with Webpack. It also boasts comprehensive TypeScript support since version 1.3, providing improved development experience with type safety and auto-completion. The project is actively maintained, with a cadence of significant major releases every few years and more frequent minor updates and patches, as confirmed by its documentation and community support.","status":"active","version":"3.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/webix-hub/webix-jet","tags":["javascript","webix","jet","framework","rich","ui","typescript"],"install":[{"cmd":"npm install webix-jet","lang":"bash","label":"npm"},{"cmd":"yarn add webix-jet","lang":"bash","label":"yarn"},{"cmd":"pnpm add webix-jet","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Webix Jet is a micro-framework built specifically on top of Webix UI components, requiring the Webix library for all UI rendering and component functionality.","package":"webix","optional":false}],"imports":[{"note":"Primary class for defining the application entry point. Webix Jet is ESM-first and primarily uses ES6 class syntax. CommonJS `require` is generally not recommended for modern Webix Jet projects.","wrong":"const { JetApp } = require('webix-jet');","symbol":"JetApp","correct":"import { JetApp } from 'webix-jet';"},{"note":"Base class for defining application views. Direct imports from `sources/` paths are generally internal and can break between versions.","wrong":"import JetView from 'webix-jet/sources/views/jetview';","symbol":"JetView","correct":"import { JetView } from 'webix-jet';"},{"note":"Provides access to built-in Webix Jet plugins (e.g., Menu, Locale, Status). The `plugins` object is a named export.","wrong":"import * as plugins from 'webix-jet/plugins';","symbol":"plugins","correct":"import { plugins } from 'webix-jet';"},{"note":"When using module bundlers like Vite or Webpack, the `webix` library often needs to be explicitly exposed as a global `window.webix` object for Webix Jet and Webix UI components to function correctly, especially for complex widget integration or dynamically loaded modules.","wrong":"import 'webix';","symbol":"webix (global)","correct":"import * as webix from 'webix';\nwindow.webix = webix;"}],"quickstart":{"code":"import { JetApp, JetView } from 'webix-jet';\nimport 'webix/webix.css'; // Or your custom Webix skin\nimport * as webix from 'webix';\n\n// Ensure Webix is globally available for the UI components\n(window as any).webix = webix;\n\nclass TopView extends JetView {\n    config() {\n        return {\n            rows: [\n                { view: 'toolbar', elements: [{ template: 'My JetApp', type: 'header' }] },\n                { template: 'Welcome to your Webix Jet application!', autoheight: true, borderless: true, css: 'webix_shadow_medium' }\n            ]\n        };\n    }\n}\n\nclass MyApp extends JetApp {\n    constructor(config = {}) {\n        const defaults = {\n            start: '/top',\n            views: { top: TopView }, // Define how to resolve 'top' to TopView\n            debug: true\n        };\n        super({ ...defaults, ...config });\n    }\n}\n\nwebix.ready(() => {\n    new MyApp().render(document.body);\n});","lang":"typescript","description":"This quickstart initializes a basic Webix Jet application with a single 'TopView' and renders it into the document body. It demonstrates the core setup of `JetApp` and `JetView` using TypeScript, including the necessary global exposure of the `webix` object."},"warnings":[{"fix":"Review the official 'Migration from Jet 0.x' guide in the Webix Jet documentation and compare your project's build configuration with the latest `jet-start` demo on GitHub for Vite setup. This primarily involves configuring `vite.config.js` and updating `package.json` scripts.","message":"Webix Jet v3.0 migrated its default toolchain from Webpack to Vite. Existing projects might require updates to `vite.config.js`, `.env` files, and `package.json` scripts to align with the new build process.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update calls to `getUrl()`, `getUrlString()`, and `refresh()` to handle Promises if needed. Ensure `removeView()` behavior aligns with expectations for nested Jet views. Consult the 'What's New' section for v3.0 in the official documentation.","message":"Starting with Webix Jet v3.0, several API methods changed their behavior. Notably, `getUrl()` and `getUrlString()` for app and view, and the `refresh()` method now returns a Promise, requiring asynchronous handling. `removeView()` of Webix widgets now correctly triggers `destroy()` of nested Jet views.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"After importing Webix, explicitly assign it to the global `window` object in your main application entry file: `import * as webix from 'webix'; (window as any).webix = webix;` (for TypeScript). Alternatively, include Webix via a `<script>` tag in `index.html`.","message":"When using module bundlers (especially Vite), the underlying Webix library must often be exposed globally as `window.webix` for Webix Jet components and certain Webix UI functionalities to work correctly. Directly importing `webix` may not always achieve this global availability automatically.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For asynchronous UI generation, wrap the `config()` method's return in a Promise. Fetch data within the `config()` method, and return the UI configuration only after the data is available: `config() { return new Promise(resolve => { webix.ajax('/data').then(data => { resolve({ view: 'datatable', data: data.json() }); }); }); }`.","message":"Asynchronous operations within a `JetView`'s `config()` method, such as fetching data for UI construction, can lead to rendering issues or 'core.js' errors if the UI configuration is not returned as a Promise that resolves when the data is ready.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate any code using `WJET` to the standard ES6 class-based `JetApp` and `JetView` structure. Refer to the current quickstart guides and demo projects for modern development patterns.","message":"The `WJET` utility for faster prototyping was deprecated with Webix Jet v3.0. While it might still function, its use is discouraged in favor of the standard JetApp/JetView class-based approach and the recommended build tools.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `window.webix = webix;` is executed in your main application entry point after importing the Webix library, or load Webix via a `<script>` tag before your application bundle.","cause":"The Webix library object is not accessible in the global scope (window.webix), which Webix Jet components often expect. This typically happens with module bundlers that don't automatically expose `webix` globally.","error":"ReferenceError: webix is not defined"},{"fix":"Check the `config()` method of the problematic JetView for syntax errors, incorrect Webix UI component properties, or invalid nesting. Enable debug mode (`debug: true` in `JetApp` config) for more detailed console logs.","cause":"An error occurred during the rendering of a Webix UI component defined within a JetView's `config()` method, indicating an incorrect UI configuration.","error":"Event 'app:error:render' triggered: Error rendering view"},{"fix":"Inspect the `init()` and other lifecycle methods of the affected JetView for logical errors or incorrect API calls. Use the debug mode to trace the execution flow and identify the source of the error.","cause":"An error occurred during the initialization of a JetView, indicating an issue with the JetView's lifecycle methods (e.g., `init()`, `urlChange()`) or its integration with Webix UI, rather than a direct UI config problem.","error":"Event 'app:error:initview' triggered: Error initializing view"},{"fix":"Ensure you are calling `this.$$(id).parse(data)` or `this.$$(id).load(url)` within the `init()` method or a data loading handler, and that the `data` or `url` resolves to a compatible format for the Webix component. Verify the data structure.","cause":"Incorrect usage of `parse()` or `load()` methods, or the data structure provided to a Webix data-bound component (like `datatable`, `list`) within a JetView does not match expectations.","error":"Data is not loading into Webix UI component in JetView"},{"fix":"If the component is in a parent view, use `this.getParentView().$$('myId')` or pass the ID to a global `webix.$$('myId')` if it's a top-level ID. If it's in a dynamic subview, ensure the subview is loaded before attempting to access its components. Verify the ID is unique within the intended scope.","cause":"The `this.$$()` method in Webix Jet scopes its search for Webix widgets only within the current `JetView`. The component with `id='myId'` might be in a parent view, a subview, or incorrectly referenced.","error":"Cannot find UI component with id 'myId' using this.$$('myId')"}],"ecosystem":"npm"}