CxJS demos

Try CxJS

The easiest way to start a new Cx project is by using the Cx Command Line Interface (CLI). Enter the following six commands in the console, and CxJS scaffold application will appear in your browser.

md my-app

cd my-app

npm init -y

npm install cx-cli --global

cx scaffold

npm start

localhost:8088

Choose a Theme

Now when the app is running, it's time to choose a theme. Pick the theme you like and use it as a starting point of your application's design.

Cx Themes

Material

cx-theme-material

This theme is based on Google's Material design principles. It follows their detailed specifications on colors, shapes, shadows, and some of the effects. The best part is, you can easily choose one of the many predefined color schemes or define your own unique look.

Cx Themes

Frost

cx-theme-frost

Frost is a theme inspired by winter colors. It features minimalistic design, whose beauty lies in small eye pleasing details.

Cx Themes

Dark

cx-theme-dark

Dark theme eases the stress on your eyes caused by long hours of use. Hence, it's commonly used for long-running tools and applications.

Install the Theme

  1. run npm install theme-package-name from my-app directory
  2. 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";
For more information about styling of CxJS applications, visit the documentation.

Learn more about CxJS

Cx Docs

Cx Docs

Our documentation covers all widgets and main concepts. Each article is accompanied with an interactive example and a code snippet that explains common widget configurations. Complex examples are displayed on separate pages and show working UI samples side by side with the source code.

Cx Fiddle

Cx Fiddle

Fiddle allows you to play with Cx widgets in the browser. There are many examples to play with, and you can also create and share your own snippets.