@celine/celine

chiocciolina (Italian: small snail)
Max Bo ↗

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

Jump straight to the demo?

GitHub MaxwellBo/celine + /issues License MIT
JSR jsr.io/@celine/celine + /docs 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

@celine/libertine/libertine.css

@celine/celine ships with a companion library @celine/libertine that provides a stylesheet based around the Linux Libertine typeface (more specifically Libertinus Serif from the Libertinus font family fork).

Linux Libertine is common in academic typesetting - it's the mandatory font for the ACM LaTeX conference paper theme, the default for Typst and Nota papers, and an alternate font for LaTeX.css.

The libertinus.css stylesheet provides authoritative documentation on the available font faces, variants, and OpenType features, with Opentype-Features.pdf as a demo page.

font-feature-settings: 'liga', 'tnum', 'zero' 'calt'; (ligatures, tabular figures, slashed zero & contextual alternatives) are enabled by default.

fi fl ffi ffl
1234567890
Quest, (staff)
H2O, E = mc2

libertinus.css makes a number of faces available:

Libertinus Serif
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Small caps.
All small caps.
Libertinus Sans
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Small caps.
All small caps.
Libertinus Display
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Libertinus Mono
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Libertinus Initials
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Libertinus Math
E = mc²
∫ₐᵇ f(x) dx
∑ₙ₌₁^∞ 1/n² = π²/6
∇·E = ρ/ε₀
Libertinus Keyboard

Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Del
`1234567890-= Back
Tab QWERTYUIOP[]\
Capslock ASDFGHJKL;' Enter
Shift ZXCVBNM,./ Shift
Ctrl Windows Alt Space Alt Fn ← ↑ ↓ →

Small caps are available on Libertinus Serif and Libertinus Sans:

Small caps
All small caps
Small caps
All small caps

Classes

Jane Doe, University of Wollongong
John Smith, University of Townsville
This is an abstract.
Anchor

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

Changelogs

@celine/celine and @celine/libertine use Semantic Versioning 2.0.0.

celine/changelog.xml RSS feed icon

Showing 10 most recent entries.

Version Date Changes

Resources