smalljs$molSearch⌘ KDocsPlaygroundCompareEcosystemAboutEN
State & ReactivityGetting StartedIntroductionMental modelGetting StartedFrom TypeScript to view.treeProject StructureToolingEssentialsInstallationViewsState & ReactivityRoutingRenderingTestingDeploymentTroubleshootingDataData FetchingData SchemasGiper BazaMoreShowcaseFrom React, Vue & SvelteCookbookAdvancedPluginsModule metadataOfflineGhost viewsAboutFAQTeamReleasesAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

State & Reactivity

$mol state behaves like a spreadsheet: you declare how a value is computed, and everything that depends on it updates by itself. No stores, no dispatch, no effect hooks — the dependency graph tracks what to recompute.

Reactive properties

A method decorated with @ $mol_mem is a cached, reactive cell. It runs once, remembers its result, and recomputes only when something it read has changed.1namespace $.$$ {2 export class $my_counter extends $.$my_counter {3 @ $mol_mem count() { return 0 }4 5 @ $mol_mem doubled() {6 return this.count() * 27 }8 }9}doubled reads count, so it subscribes to count automatically. Change count and every view showing doubled refreshes — there is nothing to subscribe to by hand.

Reading and writing

A property is both getter and setter: call it with no argument to read, with an argument to write.1@ $mol_action2increment() {3 this.count( this.count() + 1 )4}

Actions vs. computations

This one distinction keeps reactive code predictable:@ $mol_mem is a pure computation — only read other cells and return a value.@ $mol_action is an effect — writes to state, network calls, and timers belong here.Writing to a cell from inside a @ $mol_mem creates a feedback loop (the write invalidates a dependency, which recomputes, which writes again). $mol reports this as a circular subscription. The fix is always the same: keep side effects in actions, keep computations pure.In @ $mol_mem you maybut notButton handlers are generated as @ $mol_mem on the base class; override them with @ $mol_action so they can write safely:1@ $mol_action2submit() {3 this.saved( true )4}

Derived state composes

Because dependencies are tracked automatically, derived values chain without any wiring. Each reads the one before it; a change at the root ripples out exactly as far as it needs to:1@ $mol_mem full_name() {2 return `${ this.first() } ${ this.last() }`.trim()3}4 5@ $mol_mem greeting() {6 return this.full_name() ? `Hello, ${ this.full_name() }!` : 'Hello!'7}
Edit this page on GitHubWas this helpful?YesNoPreviousViewsNextRouting
On this pageReactive propertiesReading and writingActions vs. computationsDerived state composesKeyed stateAsync is just a valueTransient state between eventsNext
Type to search the documentation.