Installation

CxJS is distributed as npm packages and works with modern build tools like Vite and webpack.

Packages

The main packages you’ll need:

Install both packages:

npm install cx cx-react

Themes

CxJS includes several themes. Install one to get started:

npm install cx-theme-aquamarine

TypeScript Configuration

CxJS is written in TypeScript and provides full type definitions. Configure your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "cx",
    "moduleResolution": "bundler",
    "esModuleInterop": true
  }
}

The key setting is jsxImportSource: "cx" which enables CxJS-specific JSX types and attributes like visible, controller, layout, and data-binding functions.

Build Configuration

Vite

Vite is the recommended build tool for new projects. Create vite.config.ts:

import { defineConfig } from "vite";

export default defineConfig({
  esbuild: {
    jsxImportSource: "cx",
  },
});

webpack

For webpack projects, configure TypeScript and JSX handling:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: "ts-loader",
      },
    ],
  },
};

For large applications, consider using swc-loader instead of ts-loader for faster builds:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: "swc-loader",
        options: {
          jsc: {
            transform: {
              react: {
                runtime: "automatic",
                importSource: "cx",
              },
            },
          },
        },
      },
    ],
  },
};

Entry Point

In your main entry file, import the theme and start the application:

import { startAppLoop } from "cx/ui"
import { Store } from "cx/data"
import "cx-theme-aquamarine/dist/index.css"

const store = new Store()

startAppLoop(
  document.getElementById("app"),
  store,
  <div>
    <h1>Welcome to CxJS</h1>
  </div>,
)