- ×Show All
CxJS uses React (or a React compatible library like Preact) for DOM manipulation and offers many high-level, UI related, features on top of it.
- form elements (DateTimeField, LookupField, ColorField)
- advanced grid control
- navigation (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)
There are many examples and learning materials available:
Install & Start
This is a monolith repository used to develop main npm packages, documentation, widget gallery and fiddle. It uses yarn workspaces, so please use
yarnto install packages and run the applications.
$ yarn install
Starting a new project
CxJS is available as an NPM package -
cx, which includes compiled code, source code and TypeScript definitions.
cxpackage, you'll need other packages such as
babel-plugin-transform-cx-jsx. You'll also need to configure Babel and webpack.
The quickest way to setup a new project is to use CLI:
md my-app cd my-app npm init -y npm install cx-cli --global cx scaffold npm start
Alternatively, you can download the files from one of the CodeSandbox template projects:
Once you create a new project, you may want to try our ready-to-use themes:
Install a theme using
npm install cx-theme-frost
@import "~cx/src/variables"; @import "~cx/src/index";
@import "~theme-package-name/src/variables"; @import "~theme-package-name/src/index";
Please read theme documentation to learn how to enable theme specific features.
Alternatively, start by forking one of the available boilerplate projects:
- cx-starter-kit - Full-blown admin and dashboard app
- cx-redux-examples - CxJS application with Redux based state management
- cx-typescript-boilerplate - CxJS with TypeScript
Hacker News Progressive Web App
CxJS Hacker News is a Progressive Web App focused on startup performance. The application is based on Preact and uses webpack plugins to enable preloading, inline CSS and JS, configure service workers and achieve other performance gains.
Worldoscope uses CxJS to visualize data available from the World Bank website. Google Firebase is used to store report definitions, authentication and hosting.
Cx Starter Kit is full blown admin and dashboard application template with many sample pages.
State Of JS 2016 Explorer
CxJS based TODO app featuring a dark theme, keyboard navigation, markdown support, custom CSS and much more.