JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    CxJS - Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.
    Filed under  › 

    • 🔾33%Overall
    • 289
    • 2.3 days
    • 🕩49
    • 👥6

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

    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

    Features

    CxJS uses React (or a React compatible library) for DOM manipulation and offers many high-level, UI related, features on top of it:

    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 repository is used to develop main npm packages, documentation and gallery.

    First, install the packages using npm or yarn. (Currently yarn is the preferred tool as npm is having issues around :link for symlinks - npm/npm#15900)

    $ npm install
    

    Build CxJS:

    npm run build
    

    Run docs:

    npm start
    

    Run gallery:

    npm run gallery
    

    Start 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
    

    Themes

    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:

    License

    CxJS is is free for non-commercial use. Commercial use requires a license. Free commercial licenses are available for active open-source contributors upon request. Registered freelancers and contractors are eligible for special licensing programs.
    Please refer to the website for more information.

    Show All