The UI is essentially a node tree similar to react, defined in JSON objects.

This example (https://github.com/yolmio/boost/blob/main/examples/todos/sys...) gives a "lower level" example of a todo list that interacts with the database.

But excerpted the below demonstrates the state approach:

  nodes.state({
    procedure: (s) =>
      s
        // A scalar is a single value
        .scalar(`input_text`, `''`)
        // Queries the todo table from the database and puts them in a ui table
        .table(`todo`, `select * from db.todo`),
    children: [
      // like react, controlled input
      components.input({
        value: `input_text`,
        on: { input: (s) => s.setScalar(`input_text`, `target_value`) },
      }),
      components.button({
        on: {
          click: (s) =>
            s.serviceProc((s) =>
              s
                .startTransaction()
                // Inserts into the database using the scalar defined in the ui
                .modify(`insert into db.todo (title) values (input_text)`)
                .commitTransaction(),
            ),
        },
      }),
    ],
  });

It defines a node hierarchy with ui state (tables) and that state is populated from the database. The serviceProc is able to modify the database with data from the ui state.

There is nothing special about any of the components and functions I call in the examples, there are really just creating node hierarchies and objects. It means that you aren't limited to kinds of UIs you can create and you can create your own functions that just take in data and return arbitrary node hierarchies.