@celine/celine is the library I promised everyone would get released in my article Reactive HTML notebooks (2024). I pondered calling it incel, short for inline cell
, but was advised against it.
It wraps a subset of the Observable Notebook runtime to provide a minimal (and opinionated) API for notebook construction.
## Installation
Add the following style and script elements to your HTML file. Customize to your liking.
## API
All of the following scripts are marked contenteditable and reevaluate on blur.
### celine.cell(name, [inputs, ]definition)
The cell constructor declares a reactive cell that can depend on other cells.
The definition can return values of type T, Promise<T>, Iterator<T>, or AsyncIterator<T>.
Ensure the script id is the name parameterized to the cell constructor.
### celine.viewof(name, [inputs, ]definition)
The viewof constructor is a special constructor designed to work with Observable Inputs.
It declares 2 reactive cells: the name cell and the viewof name cell - one for the value, and one for the DOM element itself.
Ensure the script id is of the form viewof name to display the input.
For further information on how to create custom inputs, see the Syncronized Inputs guide.
### celine.silent(name, [inputs, ]definition)
The silent constructor declares a cell that doesn't render its value above its script container.
### celine.mutable(name, value)
The mutable constructor declares a cell and returns a reference that can be mutated. Mutations propogate to cells that depend upon it.
### TeX, Markdown, Graphviz
There are many useful utilities inside of the Observable standard library.
### Observable Plot
_..._
.-'_..._''. .---.
.' .' '.\ __.....__ | |.--. _..._ __.....__
/ .' .-'' '. | ||__| .' '. .-'' '.
. ' / .-''"'-. `. | |.--.. .-. . / .-''"'-. `.
| | / /________\ \| || || ' ' |/ /________\ \
| | | || || || | | || |
. ' \ .-------------'| || || | | |\ .-------------'
\ '. .\ '-.____...---.| || || | | | \ '-.____...---.
'. `._____.-'/ `. .' | ||__|| | | | `. .'
`-.______ / `''-...... -' '---' | | | | `''-...... -'
` | | | |
'--' '--'
CSS style adapted from The Monospace Web by Oskar Wickström.