What is CxJS

CxJS is a high-level TypeScript framework for building data-intensive web applications. Built on top of React, it provides widgets, forms, grids, charts, routing, and state management out of the box.

Framework vs Library

Unlike React, which is a library focused on rendering UI, CxJS is a full-featured framework. You don’t need to search for compatible packages or worry about integration issues. Everything works together seamlessly.

React (Library)	CxJS (Framework)
UI rendering only	Full application stack
Choose your own router, forms, tables	Router, forms, grids included
Integrate multiple packages	Single cohesive package
Flexible, but requires decisions	Opinionated, but productive

Built for Business Applications

CxJS is designed for rapid development of business applications that typically include:

Forms with validation, labels, and various input types
Data tables with sorting, filtering, grouping, and inline editing
Charts for data visualization
Complex layouts with navigation, tabs, and overlays

If your application has many tables, forms, and charts, CxJS will significantly speed up your development.

 <Grid
  controller={PageController}
  records={m.sales}
  columns={[
    {
      header: "Product",
      field: "product",
      sortable: true,
      aggregate: "count",
      aggregateAlias: "productCount",
      caption: m.$group.region,
      footer: tpl(m.$group.productCount, "{0} products"),
    },
    {
      header: "Qty",
      field: "qty",
      sortable: true,
      align: "right",
      format: "n;0",
      aggregate: "sum",
    },
    {
      header: "Revenue",
      field: "revenue",
      sortable: true,
      align: "right",
      format: "currency;USD;0",
      aggregate: "sum",
    },
  ]}
  grouping={[
    { showFooter: true },
    {
      key: { region: m.$record.region },
      showCaption: true,
    },
  ]}
/> 
 class PageController extends Controller {
  onInit() {
    this.store.set(m.sales, [
      { region: "Europe", product: "Widget A", qty: 50, revenue: 2500 },
      { region: "Europe", product: "Widget B", qty: 30, revenue: 1800 },
      { region: "Europe", product: "Gadget X", qty: 20, revenue: 3200 },
      { region: "Americas", product: "Widget A", qty: 80, revenue: 4000 },
      { region: "Americas", product: "Widget B", qty: 45, revenue: 2700 },
      { region: "Americas", product: "Gadget X", qty: 35, revenue: 5600 },
      { region: "Asia", product: "Widget A", qty: 120, revenue: 6000 },
      { region: "Asia", product: "Widget B", qty: 60, revenue: 3600 },
      { region: "Asia", product: "Gadget X", qty: 40, revenue: 6400 },
    ]);
  }
} 
 interface SaleRecord {
  region: string;
  product: string;
  qty: number;
  revenue: number;
}

interface PageModel {
  sales: SaleRecord[];
  $record: SaleRecord;
  $group: {
    region: string;
    productCount: number;
  };
}

const m = createModel<PageModel>(); 
 import {
  Controller,
  createModel,
  enableCultureSensitiveFormatting,
  expr,
  tpl,
} from "cx/ui";
import { Grid } from "cx/widgets";
enableCultureSensitiveFormatting(); 

Product	Qty	Revenue
Americas	160	$12,300
Widget A	80	$4,000
Widget B	45	$2,700
Gadget X	35	$5,600
Asia	220	$16,000
Widget A	120	$6,000
Widget B	60	$3,600
Gadget X	40	$6,400
Europe	100	$7,500
Widget A	50	$2,500
Widget B	30	$1,800
Gadget X	20	$3,200
9 products	480	$35,800

Battle-Tested

CxJS has been used in production for years, powering admin dashboards, business intelligence tools, data management applications, and internal enterprise tools. The framework is mature, stable, and continuously improved based on real-world usage.

Beyond the rich widget library, CxJS offers declarative data binding, client-side routing, TypeScript-first development with full type safety, and theming support with multiple built-in themes.