codaxy/cxjs

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

Learn CxJS

Explore CxJS by checking out available online resources:

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

If you need help, ask a question on StackOverflow. If you find a bug, please raise an issue. Request an invite to our Slack channel and become a member of the CxJS community.

Starting a new project

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

Besides the cx package, you'll need other packages such as cx-react (or cx-preact) and babel-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 --global
cx create my-app
cd my-app
npm start

Or if you prefer Yarn:

yarn create cx-app my-app
cd my-app
yarn 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

Themes

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 using npm or yarn.

npm install cx-theme-frost

Open my-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.

Features

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

Widgets

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

Charts

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

UI Concepts

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

State Management

• two-way data-binding
• controllers
• computed values
• triggers
• data views

Layout

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

Theming

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

Development

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

yarn install

Build CxJS:

yarn build

Run tests:

yarn test

Run Docs:

yarn start

Run Gallery:

yarn gallery

Run Fiddle:

yarn fiddle

License

CxJS is available under the MIT License.