Render

The render() method

The render function is called with root element as an argument, which is the DOM element where the application's UI should be rendered. It uses the current state of the application to generate the HTML that should be displayed. This is done using the state variables defined using Cog's variable function.

document.addEventListener("DOMContentLoaded", function () {
    const rootElement = document.getElementById("app");

    render(rootElement);
});

The render function is typically called once when the DOM is ready, after that any changes to the state variables will automatically cause the UI to be re-rendered. This is the essence of reactive programming: the UI automatically updates in response to changes in the state.