CxJS is a TypeScript UI framework with 50+ widgets, data tables, charts, routing, and state management designed for building data-intensive web applications such as portals, dashboards and admin apps. Built on top of React, it provides everything needed to build complex front-ends out of the box.

Learn more at cxjs.io/docs.

Quick Start

Install the core packages:

npm install cx cx-react

Add a theme:

npm install cx-theme-variables

Configure TypeScript for CxJS JSX:

{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "cx"
}
}

Set up the entry point:

import{startAppLoop}from"cx/ui";import{Store}from"cx/data";import"cx-theme-variables/dist/widgets.css";import{renderThemeVariables,defaultPreset}from"cx-theme-variables";renderThemeVariables(defaultPreset);conststore=newStore();startAppLoop(document.getElementById("app"),store,<div><h1>Welcome to CxJS</h1></div>,);

A simple form with two-way data binding:

import{createModel}from"cx/ui";import{Button,LabelsTopLayout,MsgBox,TextField}from"cx/widgets";interfacePageModel{name: string;}constm=createModel<PageModel>();exportdefault(<LabelsTopLayoutvertical><TextFieldvalue={m.name}label="Name"/><Buttontext="Greet"onClick={(event,{ store })=>{letname=store.get(m.name);MsgBox.alert(`Hello, ${name}!`);}}/></LabelsTopLayout>);

For a complete project setup, use the CLI or one of the application templates:

npx cx-cli create my-app

Repository Structure

This is a monorepo managed with Yarn (v4) workspaces.

packages/
cx/ Core framework (widgets, charts, data binding, state management)
cx-react/ React adapter
cx-build-tools/ Rollup-based build tooling
cx-theme-*/ Visual themes
babel-plugin-*/ Babel plugins for CxJS JSX and import optimization
swc-plugin-*/ SWC equivalents of the Babel plugins
cx-cli, create-cx-app/ CLI tools for scaffolding projects
cx-immer/ Immer integration for immutable store updates
homedocs/ Documentation site (cxjs.io), built with Astro
litmus/ Testing environment for bug reproduction and feature development
legacy/ Previous-generation docs, gallery, and fiddle apps (being phased out)

Development

yarn install # Install dependencies
yarn build # Build cx-react and cx
yarn build:themes # Build all themes
yarn test# Run tests

Running Apps

cd homedocs && yarn dev # Documentation site
yarn litmus # Litmus testing environment

License

CxJS is available under the MIT License.