# Installation



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

## Packages

The main packages you'll need:

| Package    | Description                                           |
| ---------- | ----------------------------------------------------- |
| `cx`       | Core framework with widgets, charts, and data-binding |
| `cx-react` | React integration for rendering                       |

Install both packages:

```bash
npm install cx cx-react
```

### Themes

CxJS includes several [themes](/intro/themes). Install one to get started:

```bash
npm install cx-theme-variables
```

## TypeScript Configuration

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

```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. The [CxJS Vite Template](https://github.com/codaxy/cxjs-vite-template) provides a basic project setup, or you can configure manually by creating `vite.config.ts`:

```typescript
import { defineConfig } from "vite";

export default defineConfig({
  oxc: {
    jsx: {
      runtime: "automatic",
      importSource: "cx",
    },
  },
});
```

### webpack

For webpack projects, configure TypeScript and JSX handling:

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

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

```javascript
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:

```tsx
import { startAppLoop } from "cx/ui";
import { Store } from "cx/data";

import "cx-theme-variables/dist/widgets.css";
import { renderThemeVariables, defaultPreset } from "cx-theme-variables";

renderThemeVariables(defaultPreset);

const store = new Store();

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

```