Repository files navigation

CxJS, or simply Cx, is a feature-rich JavaScript framework for building complex web front-ends, such as BI tools,dashboards and admin apps.

Explore CxJS by checking out available online resources:

• Documentation
• Gallery of Widgets & Themes
• Fiddle
• Demo Apps
• Examples

If you need help, ask a question onStackOverflow.If you find a bug, pleaseraise an issue.Request an invite to our Slack channeland become a member of the CxJS community.

CxJS is available as an NPM package -cx, which includescompiled code, source code and TypeScript definitions.

Besides thecx package, you'll need other packages such ascx-react (orcx-preact) andbabel-preset-cx-env.

You'll also need to configure Babel and webpack.

The quickest way to setup everything up is to use CLI:

npm install cx-cli --globalcx create my-appcd my-appnpm start

Or if you prefer Yarn:

yarn create cx-app my-appcd my-appyarn start

Alternatively, you can download the files from one of the project templates:

• https://github.com/codaxy/cxjs-tailwindcss-template
• https://github.com/codaxy/cx-starter-kit
• https://codesandbox.io/s/github/codaxy/cxjs-codesandbox-template

Once you create a new project, you may want to try our ready-to-use visual themes:

• cx-theme-material (Demo)
• cx-theme-frost (Demo)
• cx-theme-dark (Demo)

Install the theme usingnpm oryarn.

npm install cx-theme-frost

Openmy-app/app/index.scss and replace

@import "~cx/src/variables";@import "~cx/src/index";

with

@import "~theme-package-name/src/variables";@import "~theme-package-name/src/index";

Please read theme NPM package documentation to learn how to enable theme specific features.

CxJS uses React for DOM manipulation and offers many high-level features on top of it.

• form elements (DateTimeField,LookupField,ColorField)
• advancedGrid (data table) control
• navigation elements (Menu,Tab,Link)
• overlays (Window,MsgBox,Tooltip,Toast)

• various chart types (PieChart,LineGraph,ColumnGraph,BarGraph)
• axis types (CategoryAxis,NumericAxis,TimeAxis)
• help elements (Legend,Marker,Range)

• form validation
• culture sensitive formatting and localization
• client-side routing
• selection models

• two-way data-binding
• controllers
• computed values
• triggers
• repeater
• rescope
• sandbox
• data proxy

• inner (form) layouts
• outer (page) layouts

• SCSS variables and mixins
• ready to use themes (Material,Frost,Dark)

This is a monolith repository used to develop main npm packages, documentation, widget gallery and fiddle. It uses yarn workspaces, so please useyarn to install packages and run the applications.

yarn install

Build CxJS:

yarn build

Run tests:

yarntest

Run Docs:

yarn start

Run Gallery:

yarn gallery

Run Fiddle:

yarn fiddle

CxJS is available underthe MIT License.