Embed

Runnable Viv on any page

One script tag. No server, no framework, no build step — the compiler is a 7.3 MB wasm module that loads next to the script and runs in the reader's browser. The cells further down this page are rendered by the embed itself, not by this site's components.

The whole integration

<script src="https://viv-lang.org/embed/viv-embed.js" defer></script>

<viv-cell>
total = 0.0
for i to 10 {
    total += i
}
show total
</viv-cell>

That is all of it. Each <viv-cell> becomes an editable, runnable cell with syntax highlighting, output, live narration, plot() charts, and the call graph. Markdown-rendered blocks (<pre><code class="language-viv">) upgrade automatically, so it drops into a blog engine unchanged. Add the run attribute to execute a cell on page load, and light for light styling.

Its styles live in shadow DOM, so they do not change your page's CSS and your CSS does not change them, except for six colors you can set on the element: --viv-cell-accent, --viv-cell-bg (the code), --viv-cell-card, --viv-cell-border, --viv-cell-text and --viv-cell-muted.

Embedding a live cell

The three cells below are literal <viv-cell> elements on this page:

narrate "computing" def sq(x) { return x * x } total = 0.0 for i to 10 { total += sq(i) } show total

n = 61 t = linspace(0.0, 6.0, n) y = exp(-0.5 * t) * cos(3.0 * t) figure("A damped cosine", "$t$", "$y$") plot(t, y, "damped cosine")

def leaf(x) { return x + 1.0 } def branch(x) { return leaf(x) + leaf(x) } def trunk(x) { return branch(x) } s = 0.0 for i to 4 { s += trunk(i) } show s

Notes

Framework-free: A plain HTML page that uses only the script tag, with no bundler or npm.
Cross-origin: The script and the wasm are served with Access-Control-Allow-Origin: *, so any site can load them.
Cells are independent: Each runs its own source, like the doc examples. The embed cannot yet chain cells so that cell N runs cells 1..N; only this site's own pages, such as the tour, can.
One module, many cells: The wasm loads once per page and every cell shares it, so a second cell adds no download.