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 simple form with a text field and a button:

 import { createModel } from "cx/ui"
import { Button, LabelsTopLayout, MsgBox, TextField } from "cx/widgets"

interface PageModel {
  name: string
}

const m = createModel<PageModel>()

export default (
  <LabelsTopLayout vertical>
    <TextField value={m.name} label="Name" />
    <Button
      text="Greet"
      onClick={(event, { store }) => {
        let name = store.get(m.name)
        MsgBox.alert(`Hello, ${name ?? "Stranger"}! Welcome to CxJS!`)
      }}
      class="mt-2"
    />
  </LabelsTopLayout>
) 

Name

Let’s break down the key parts:

PageModel — TypeScript interface defining the shape of your data
createModel — Creates a typed accessor model for store bindings
TextField — A CxJS form widget with built-in two-way data binding
LabelsTopLayout — A layout that positions labels above form fields
Button with onClick — Access the store to read bound values
MsgBox.alert — A built-in dialog for displaying messages

When the user types into the text field, the value is automatically written to the store via the m.name binding. The button’s onClick handler reads this value from the store and displays a greeting.