Reactivity

Observable Framework documentation: Reactivity Source: https://observablehq.com/framework/reactivity

Framework runs like a spreadsheet: code re-runs automatically when referenced variables change. This brings:

• Easier interactivity because state is automatically kept in sync
• Easier asynchronous programming via implicit await of promises
• Better performance with incremental re-rendering
• Greater flexibility by writing code and prose in any order

Reactivity is especially helpful for data apps because these apps tend to have complex state. (See Observable’s founding essay, A Better Way to Code.) For example, you might want to update a chart when a user interacts with a menu or composes a query. Or you might simply want to load several datasets in parallel. Reactivity means you don’t have to manage complex state changes — you can code declaratively as if state were static and immutable, letting the runtime manage state for you.

Unlike reactive libraries, Framework’s reactivity is implemented at the language layer as part of the JavaScript runtime: there’s no new API or syntax to learn. It’s vanilla JavaScript, but the code runs automatically. Code blocks in Markdown run in topological order determined by top-level variable references (a.k.a. dataflow), rather than in top-down document order. For example, here we reference variables x and y even though they are defined in a code block farther down the page: