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:
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.
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
Once you create a new project, you may want to try our ready-to-use visual themes:
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.
CxJS uses React for DOM manipulation and offers many high-level features on top of it.
- form elements (DateTimeField, LookupField, ColorField)
- advanced Grid (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)
- 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 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
CxJS is available under the MIT License.