Hello World

Let’s build a simple interactive example to see CxJS in action.

Your First Example

CxJS uses JSX syntax similar to React. Here’s a basic component with a text field and data binding:

 <div class="px-6 pb-6">
  <h3 text={expr(m.name, (name) => `Hello ${name ?? "World"}`)} />
  <LabelsTopLayout vertical>
    <TextField value={m.name} label="Enter your name:" />
    <DateField value={m.dob} label="What is your date of birth?" />
    <div
      visible={hasValue(m.dob)}
      text={expr(m.dob, (dob) => {
        if (!dob) return "-"
        let diff = dateDiff(new Date(), new Date(dob))
        let years = diff / (365.25 * 24 * 60 * 60 * 1000)
        return `You're approximately ${years.toFixed(1)} years old...`
      })}
    />
  </LabelsTopLayout>
</div> 
 interface PageModel {
  name: string;
  dob: string;
}

const m = createModel<PageModel>(); 
 import { DateField, TextField } from "cx/widgets";
import { createModel, expr, hasValue, LabelsTopLayout } from "cx/ui";
import { dateDiff } from "cx/util"; 

Hello World

Enter your name:

What is your date of birth?

Let’s break down the key parts:

PageModel - TypeScript interface defining the shape of your data
TextField, DateField - CxJS form widgets for text and date input
LabelsTopLayout - A layout that positions labels above form fields
expr() - Creates a computed expression that updates when dependencies change
hasValue() - Returns true if the bound value is defined
createModel - Creates a typed accessor model for store bindings

When the user enters their name or date of birth, the bindings update the store and the UI re-renders automatically. This declarative data binding is a core concept in CxJS—you define what data each widget uses, and the framework handles synchronization.