Curiosity: How does the Observable web page render to React components?

Hey Matthias,

Yep, Observable’s user interface heavily uses React - it’s a lovely way to build applications. But React isn’t involved in rendering visualization output in any way: there are essentially two levels to the application:

  • The top frame, beta.observablehq.com, which is where you edit code, create notebooks, and so on. This uses React, CodeMirror, lots of good modern JavaScript flavors
  • The worker frame, matthiasneilsen.static.observableusercontent.com, which doesn’t use React, or for that matter, any other application framework: it’s a very simple JavaScript application that receives events, reacts to them, and manages the output of the notebook.

We do want to improve support for notebooks that themselves use React + JSX - by transpiling JSX, automatically calling ReactDOM.render when a cell value is a react component, and/or some other perks, but by default, we want notebook output to be as pure and simple “JavaScript creating a webpage” as possible, so there isn’t any chance that overeager magic makes notebooks harder to debug or understand. Plus, the worker that renders notebook output is dense, but not complex enough to justify running another React application within the existing React application.

4 Likes