jqwidgets-framework

jqwidgets-framework - JavaScript UI framework with 1,000+ demos: data grid, scheduler, Gantt, charts

jQWidgets - the complete JavaScript UI framework for jQuery, React, Vue and TypeScript, with its demos: an enterprise data grid, scheduler, Gantt chart, pivot grid, tree grid, kanban, 30+ chart types, an HTML editor, date, number and masked inputs, drop-downs, menus, tabs, docking layouts and dialogs - 82 widgets with 46 themes, and over a thousand runnable demo pages for jQuery/JavaScript, React, Vue, Angular, TypeScript, ASP.NET and PHP, ready to open locally.

If you only need the library in a build, install jqwidgets-scripts instead: it is the same jqwidgets/ folder and framework components without the demos. jqwidgets-ng is the Angular library.

Demos · Documentation · React · Vue · Angular · License & pricing

jQWidgets is commercial software. See Licensing.

At a glance

Installation

npm install jqwidgets-framework

What is in the package

Open index.htm at the root of the package for the demo index. Demos that load sample data need the folder served over HTTP: npx http-server node_modules/jqwidgets-framework.

Quick start

The library is used exactly as jqwidgets-scripts, whose README walks through plain JavaScript, the per-widget module bundles, React, Vue 3, TypeScript, themes, accessibility and Content-Security-Policy. The shortest version:

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.tailwind-blue.css" />
<script src="jqwidgets/modules/jqxgrid.js"></script>

<div id="grid"></div>
<script>
    const source = {
        datatype: 'array',
        localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
        datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
    };
    $('#grid').jqxGrid({
        theme: 'tailwind-blue',
        source: new $.jqx.dataAdapter(source),
        columns: [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }]
    });
</script>

jqwidgets/modules/<widget>.js is the widget with everything it depends on. To load scripts individually instead, every widget needs jqxcore.js and its own script, and the documentation page of each widget lists the others it depends on. jQuery is optional: if it is on the page first the widgets attach to it, otherwise they use the built-in JQXLite, exposed as $.

Every demo is a complete page: open one in the browser to see a widget running, and view its source for the exact scripts, markup and options it uses.

Components

Every widget follows one naming convention, so the table is enough to write the code: the jQuery plugin is jqxGrid, its script jqwidgets/jqxgrid.js, its bundle jqwidgets/modules/jqxgrid.js, the React component JqxGrid imported from jqwidgets-framework/jqwidgets-react-tsx/jqxgrid, the Vue 3 component jqwidgets-framework/jqwidgets-vue3/vue_jqxgrid.vue, and in jqwidgets-ng the entry point jqwidgets-ng/jqxgrid. Option, event and method names are the same in every framework and are documented once, per widget, at jqwidgets.com/jquery-widgets-documentation.

Themes

Set a theme per widget with the theme option, or once for the page with $.jqx.theme = 'tailwind-blue'; the value is the stylesheet's name without jqx. and .css, and that stylesheet must be loaded after jqx.base.css. The 46 themes: tailwind / tailwind-dark, tailwind-blue / tailwind-blue-dark, material / material-dark, material-green / material-green-dark, material-purple / material-purple-dark, fluent / fluent-dark, bootstrap, light / dark, metro / metrodark, light-ie / dark-ie, highcontrast, the classic office, web, flat, fresh, arctic, glacier, energyblue, darkblue, orange, summer, black, shinyblack, classic, android, blackberry, mobile, windowsphone and blue, and the eight ui-* jQuery UI colour schemes. New in 27.1.0: Tailwind Blue and the dark variants of Material, Material Green, Material Purple and Fluent.

If something goes wrong

For AI assistants

npx jqwidgets-mcp-server gives Claude Code, Cursor, Copilot and any other MCP client the full API of every widget - properties, methods, events and data types - and a code generator for jQuery, React, Angular and Vue, so generated code uses real names and real options. See jqwidgets-mcp-server on npm.

Each documentation and demo site publishes an llms.txt index and an llms-full.txt with the whole site in one file, and every page has a Markdown copy at its own address plus .md - for example https://www.jqwidgets.com/jquery-widgets-documentation/llms.txt. The demos in this package are the same pages as on jqwidgets.com, so an assistant can point to a demo's file here for a working example of any feature.

Licensing

jQWidgets is commercial software distributed under the jQWidgets license; the full terms are in the EULA.pdf shipped with the package. You are welcome to evaluate it. Builds without a license key show an evaluation notice and are not licensed for production use.

Sales and licensing: sales@jqwidgets.com

Support

• Documentation: https://www.jqwidgets.com/jquery-widgets-documentation/
• Demos: https://www.jqwidgets.com/jquery-widgets-demo/
• Angular demos: https://www.jqwidgets.com/angular/ · React: https://www.jqwidgets.com/react/ · Vue: https://www.jqwidgets.com/vue/
• Security, SBOM and compliance: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/compliance/index.htm
• Forums: https://www.jqwidgets.com/community/
• Source and issues: https://github.com/jqwidgets/jQWidgets
• What changed: ReleaseNotes.txt in the package

Security reports: email support@jqwidgets.com with a subject line beginning SECURITY:. Please include the affected version and a reproduction; you will hear back from a person within three business days.