# About Elm Notebook

**URL:** <https://discourse.elm-lang.org/t/about-elm-notebook/9227>\
**Category:** Request Feedback\
**Created:** [July 15, 2023, 8:29pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227 "2023-07-15T20:29:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jxxcarlson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jxxcarlson/32/866_2.png) [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)\
**Post date:** [July 15, 2023, 8:29pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/1 "2023-07-15T20:29:43Z")

</div>

Hello all,

A little note about [Elm Notebook](https://elm-notebook.lamdera.app). The goal of the project is to provide something akin to Jupyter Notebooks, but for Elm: an app with cells in which you can put both text and code, and where code in a cell can be executed, producing output of various kinds — text, image, chart, animation, etc. The engine that makes everything work is [elm-interpreter](https://github.com/miniBill/elm-interpreter) by @minibill (Leonardo Taglialegne).

Elm notebook is work-in-progress with various bugs, lacunae, and rough spots. It will no doubt change a lot. I look forward to your suggestions and to making the app something that everybody in the community can profit from. I’ve thought of it mainly as a teaching tool. Here’s the code: [github.com/jxxcarlson/elm-notebook](https://github.com/jxxcarlson/elm-notebook).

## Examples

Below are three examples of what one can do as of this writing.

**1.** First, a cell with some pure Elm code. It produces text output.

 ![cell](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/3/34029a7d6d19bf83ec9fddcf14ead30e94a877a2.png)

**2.** Next, a cell with some Elm code that defines a list `b` of Svg images and another cell which renders  
the content of `b`:

 ![svg](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/9/9a3b31c8e7265f8a7e92e08bca0d02927d7c7568.png)

**3.** Finally, a cell which draws a scatter plot and regression line for the data from Edwin Hubble’s  
1929 paper on the correlation between the speed at which galaxies are moving  
away from Earth versus their distance from us. This is the first experimental evidence  
establishing the fact that the universe is expanding. The code you see below is a little interface to Tereza Sokol’s [elm-charts](https://package.elm-lang.org/packages/terezka/charts/latest/).

The data in question was uploaded from a CSV file and stored in `hubble` for later use. The syntax of the `chart` command is `chart KIND OPTIONS SOURCE` where KIND is line, scatter, bar, etc., OPTIONS is a possibly empty list of items that can appear in any order, and SOURCE is the name of the persistent variable in which the data is stored.

 ![hubble-chart](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/7/7245bd4049f01bfe7380bbabfd28018d036d277c.png)

## Trying things out

You can try out the public notebooks without signing in to the app. For example, for the beacon animation, follow this link: [elm-notebook.lamdera.app/p/beacon](https://elm-notebook.lamdera.app/p/beacon). Just read the directions in the top cell to run the animation.

You will also see a list of public notebooks. Click on any one to try it out. To create or modify notebooks, you will need to sign in.

**PS.** Another thing to try out is [elm-notebook.lamdera.app/p/random](https://elm-notebook.lamdera.app/p/random). It is a simulation of 2D random walk (Brownian motion). Below is a screenshot of one run of this notebook. It describes the 5000-step history of a random walker who began his journey at the center of the translucent red disk.

 ![plume6](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/d2e079e6831f8293ec35b04f071a832706dbc94e.png)

**Note 1.** (7/18/2023) I’ve added some crude error messages. It will likely be a good while before they get much better.

**Note 2.** (7/19/2020) Evaluation of expressions in a cell no longer depends on the order of the cells or the order of the declarations (definitions) within a cell. In addition, cells can now have more than one expression, as illustrated below.

 ![Screenshot 2023-07-19 at 12.51.40 PM](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/8/8349d257c59b2a43b000749229380feadb4755eb.png)

**Note 3.** (7/29/2023) I’ve made some esthetic changes, squashed a bug or two … see below

 ![Screenshot 2023-07-29 at 8.07.10 PM](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/2/24410ef781f639b737ac74f6af82a64254a350c1.png)

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [July 18, 2023, 11:28am UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/2 "2023-07-18T11:28:21Z")

</div>

See also [litvis](https://www.gicentre.net/litvis/) and the [notebook plugin for VSCode](https://github.com/gicentre/litvis) for literate Elm that’s been around for a few years. It uses [run-elm](https://github.com/jfairbank/run-elm) as the engine for running Elm in the notebook. I’d be interested in hearing more about what the elm-interpreter brings here (I guess web-embedding for a start).

---

<div class="post-metadata">

**Author:** ![jxxcarlson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jxxcarlson/32/866_2.png) [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)\
**Post date:** [July 18, 2023, 1:04pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/3 "2023-07-18T13:04:20Z")

</div>

Hi @jwoLondon, thanks so much for the heads-up. I saw the presentation on Litvis at Elm Europe in 2018, though until you jogged my memory, I had forgotten about it. Very nice indeed! I just rewatched the video and checked out some of the examples on the Litvis site: beautiful and effective. I’m sure that I can profit from studying the examples and the code. That said, Elm notebook will almost certainly not approach the level of visual and design sophistication of Litvis.

Elm notebook aims to fulfill a somewhat different need – more like Jupyter notebooks, but for Elm. Part of that goal is to have, as you note, something that runs in the browser. Elm-interpreter (and Elm-syntax) do all the heavy lifting: parsing and running the Elm code to produce a value which is then displayed. For this I needed something that depends only on Elm — no node.js, for example.

This project is not quite a month old, still in an early experimental phase, and could change a lot. In addition to a few bugs of which I am aware, many things to improve, and things I haven’t gotten to, there are some big missing pieces, among which is error handling.

Thanks again!

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [July 18, 2023, 1:26pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/4 "2023-07-18T13:26:59Z")

</div>

Thanks for the additional info. I think it’s a great idea to see what can be achieved for the browser with no other dependencies. The lack of browser support is probably the biggest limitation of Litvis. I look forward to seeing how your project progresses.

When thinking about the comparison with Jupyter - I think one of the problems Jupyter has is the lack of reactive dependency between cells. One of the nice things about Elm is that a truly reactive approach that isn’t dependent on cell order is much easier to implement, and of immediate benefit to users.

---

<div class="post-metadata">

**Author:** ![jxxcarlson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jxxcarlson/32/866_2.png) [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)\
**Post date:** [July 18, 2023, 1:30pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/5 "2023-07-18T13:30:55Z")

</div>

At the moment the evaluation model in Elm Notebook is very simple: cell N is aware of definitions made in cells 1 … (N - 1). I plan to change this. One possibility is for the evaluation function to build the dependency graph of the definitions a given cell refers to and use those, regardless of position. I think this is what you have in mind, no?

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [July 18, 2023, 2:13pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/6 "2023-07-18T14:13:52Z")

</div>

Yes, exactly - essentially the dependencies form a graph and if one performs a [topological sort](https://en.wikipedia.org/wiki/Topological_sorting) on that dependency graph one can update only the downstream dependencies. This is how, for example, Litvis and [Observable](https://observablehq.com/@observablehq/learning-observable-notebooks-and-cells?collection=@observablehq/intro-to-observable#cell-51) create reactive notebooks that are independent of cell order. With Elm being a pure functional language with minimal side effects, those dependency graphs are much easier to maintain and process.

---

<div class="post-metadata">

**Author:** ![jxxcarlson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jxxcarlson/32/866_2.png) [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)\
**Post date:** [July 18, 2023, 2:35pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/7 "2023-07-18T14:35:31Z")

</div>

Excellent! That is what I will try to do.

---

<div class="post-metadata">

**Author:** ![jxxcarlson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jxxcarlson/32/866_2.png) [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)\
**Post date:** [July 19, 2023, 6:00pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/8 "2023-07-19T18:00:15Z")

</div>

re evalution order, done — see **Note 2** above.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [July 29, 2023, 6:00pm UTC](https://discourse.elm-lang.org/t/about-elm-notebook/9227/9 "2023-07-29T18:00:16Z")

</div>

Closed on July 29, 2023, 6:00pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.