@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 script
s 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.