Coming from React or Vue and nothing makes sense? Read Mental model first: five minutes on where computed, watch, lifecycle hooks and data loading went.
$mol is a reactive UI framework where you describe what the interface is, and the framework figures out how and when to update it. No virtual DOM, no manual subscriptions, no useEffect. You write components as a tree; $mol renders only what is visible and recomputes only what actually changed.A component has three files:name.view.tree — the declarative layout (a compact tree language)name.view.ts — the behaviour (plain TypeScript classes)name.view.css.ts — typed styles (checked by the compiler)That separation is the whole idea: layout stays readable, logic stays testable, styles stay type-safe.None of the three is required on its own. The tree is a shorthand for structure you can also write by hand: From TypeScript to view.tree builds one component both ways and shows the code the tree compiles to.
You want a small app that stays small as it grows — the runtime is compact and rendering is virtualized by default.You like types everywhere — even styles are checked by TypeScript.You are tired of wiring reactivity by hand — state in $mol is automatically reactive, like a spreadsheet.
A counter, in full:1$my_counter$mol_view2 sub /3<= Count $mol_view4 sub /<= count \5<= Increment $mol_button6 click?<=> increment?7 sub /<= label \+1namespace $.$${2export class $my_counterextends$.$my_counter{3@ $mol_memcount(){return 0}4@ $mol_actionincrement(){this.count(this.count()+1)}5}6}count is reactive: anything that reads it re-renders automatically when it changes. There is no setState, no dependency array, no store to register.
