@celine/celine
@celine/celine is a library for building reactive HTML notebooks with display: block contenteditable <script> elements.
It wraps a subset of the Observable Notebook runtime to power inter-cell reactivity, just like Observable Framework and Quarto. It aims to make it easier to publish research as HTML files rather than as PDF files.
I initially considered calling this library incel, short for inline cell
, but was advised against it.
| GitHub | MaxwellBo/ |
License | MIT |
|---|---|---|---|
| JSR | jsr.io/ |
Version | 4.1.0, |
Table of Contents
Installation
Add the following <script> element to your HTML file's <head> block:
Link cell.css in your <head> block:
<link rel="stylesheet" href="https://esm.sh/jsr/@celine/[email protected]/cell.css" />
You may want to include @celine/celine's drop-in stylesheet, libertine.css:
<link rel="stylesheet" href="https://esm.sh/jsr/@celine/[email protected]/libertine.css" />
Demo: Observable Plot + SQLite
Try removing a 0 from the WHERE condition, then click away from the <script> to blur and reevaluate.
SQLiteDatabaseClient docs
API
The following <styles>s are marked contenteditable and reevaluate on edit.
.echo
The .echo class can display <script> and <style> elements inline, using a font with built-in syntax highlighting.
Try changing the border thickness!
.echo has a dark mode. Set the class attribute to echo dark to enable:
.reflect
The .reflect class forces <script> and <style> elements to display their opening and closing tags, type, class, id, and contenteditable attributes (a little trick from This page is a truly naked, brutalist html quine).
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 called "${name}".
The definition can be T or (...inputs) => T, where T can be object, Promise<?>, Iterator<?>, or AsyncIterator<?>.
Cells render their current value above an element that has an id the same as the cell's name. Thus, to render the counter value above the <script>, we set id="counter" on the <script>:
The cell constructor accepts inputs, a list of other cell names to depend on.
Here we use Hypertext Literal's html template literal, to transform the value of another cell:
A <script> declaring a cell can be hidden inside a <details>s element.
Show code
To display the cell's current value above the <details> element, rather than above the <script>, we add id="hue" to the <details> element, as the cell's name is "hue":
celine.viewof(name, [inputs, ]definition)
The viewof constructor is a special constructor designed to work with Observable Inputs.
It declares 2 reactive cells: a cell called "${name}", and a cell called "viewof ${name}" - one for the value, and one for the DOM element itself.
To display the DOM element above another element <script>, set id="viewof ${name}" on the element to which the input should be prepended.
Here, we want to display an input above the <script> element, so we set id="viewof password" on the <script>:
We still have to depend on the cell called "password" to use the input's value:
For further information on how to create custom inputs, see the Synchronized Inputs guide.
celine.silentCell(name, [inputs, ]definition)
The silentCell constructor declares a cell that doesn't try to display its current value anywhere.
celine.mutable(name, value) / celine.silentMutable(name, value)
The mutable (and silentMutable) constructor declares a cell and returns a reference that can be mutated. Mutations propagate to cells that depend upon it.
celine.library / Observable standard library
There are many useful utilities in the Observable standard library. Inspect the contents of the celine.library object:
TeX
celine.tex
Because rendering TeX is so useful, @celine/celine provides a shorthand template literal, celine.tex:
Because cells render their contents display: inline (celine ⇒ cell inline
), we can embed the script in the middle of the <p> element.
In non-demonstration use, we'd also leave off the .echo and .reflect classes, to render inline.
To render TeX centered, wrap the <script> with a <div style="text-align: center">:
Both tex template literals are unconfigurable. You will need to import the KaTeX library proper if you'd like to modify any of its options.
Markdown
celine.md
Markdown also has a shorthand template literal, celine.md:
Graphviz
Mermaid
Leaflet
DuckDB
1st-party library pairings
@celine/libertine
@celine/libertine provides a stylesheet based around the Linux Libertine typeface, one common in academic typesetting.
Information about it lives on a subpage, /libertine.
@celine/bibhtml
@celine/bibhtml is a Web Components-based referencing system for HTML documents.
Information about it lives on a subpage, /bibhtml.
3rd-party library pairings
Some libraries that pair well with @celine/celine are:
Pyodide
Pyodide is a port of CPython to WebAssembly.
WebR
WebR is a version of the statistical language R compiled for the browser using WebAssembly, via Emscripten.
Penrose
Penrose, a system for creating beautiful diagrams just by typing notation in plain text.
Using the Using Penrose with Vanilla JS instructions:
Show code
Bloom lets you build optimization-driven interactive diagrams in JavaScript.
Try dragging the circles around!
Show code
Saving modified notebooks
If you make changes to contenteditable elements, you are able to save the notebook, with changes, as a new file.
Creating new cells
You can allow the user to create new cells:
changelog.xml 
@celine/celine uses Semantic Versioning 2.0.0.
Showing 10 most recent entries.
| Version | Date | Changes |
|---|