Skip to content
master
Go to file
Code

README.md

CxJS

version downloads

CxJS, or simply Cx, is a feature-rich JavaScript framework for building complex web front-ends, such as BI tools, dashboards and admin apps. Modern frameworks such as React and Angular provide an excellent base for building UI components, however, component implementation and many other application aspects are left to the developer to figure out. CxJS tries to fill that gap and provide the all necessary ingredients required for modern web applications.

Features

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.

Widgets

Charts

State management

Layout

UI Concepts

Theming

Learn CxJS

There are many examples and learning materials available:

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.

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 yarn to install packages and run the applications.

$ yarn install

Build CxJS:

yarn build

Run docs:

yarn start

Run gallery:

yarn gallery

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-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 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 documentation to learn how to enable theme specific features.

Boilerplates

Alternatively, start by forking one of the available boilerplate projects:

Demo Applications

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.

Cx Hacker News PWA

Open App | Source Code

Worldoscope

Worldoscope uses CxJS to visualize data available from the World Bank website. Google Firebase is used to store report definitions, authentication and hosting.

Worldoscope Report

Open App | Source Code

Starter Kit

Cx Starter Kit is full blown admin and dashboard application template with many sample pages.

Cx Starter Kit

Open App | Source Code

State Of JS 2016 Explorer

A sample application that illustrates CxJS charting features by visualizing data from The State of JavaScript 2016 survey.

State of JS 2016 Explorer

Open App | Source Code

tdo

CxJS based TODO app featuring a dark theme, keyboard navigation, markdown support, custom CSS and much more.

tdo

Open App | Source Code

License

CxJS is is free for up to two developers per company. Commercial use requires a license. Additional free commercial licenses are available for startups and open-source contributors upon request. Please refer to the website for more information.

You can’t perform that action at this time.