@celine/celine
@celine/celine is 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 | 3.0.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.
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.
.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
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.
References Web Component
References Web Component, an experimental pair of Web Components for citing and referencing sources in a wiki-like manner
.
Add the following <script> element to your HTML file's <head> block:
<script src="https://lab.avl.la/references-webcomponent/references-wc.js"></script>
The Sun is hot.
References
<p> The Sun is hot.<cite-web url="https://www.nasa.gov/sun" author="Brian Dunbar" title="The Sun | NASA" publisher="National Aeronautics and Space Administration" date="2017-08-03" access-date="2021-08-30" data-refid="3" id="cite3"></cite-web> </p> <h2>References</h2> <references-list style="font-family: 'Libertinus Sans', sans-serif;"> </references-list>
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
changelog.xml 
@celine/celine uses Semantic Versioning 2.0.0.
Showing 10 most recent entries.
| Version | Date | Changes |
|---|