MeTTaGrapher

Warning

MeTTaGrapher is unfinished and has some bugs.

Watch MeTTa evaluate. Follow a value into a rule, through its copies, and back into the expression that called it. Open the workspace

Apply a lambda across a list

Pass an explicit lambda to maplist and draw every returned value.

Fold a relational query

Add the values produced by matching two stored facts.

Compute a branch table

Construct a case table and select the matching branch.

An empty alternative leaves no answer

superpose offers two calls; the one that answers empty contributes nothing, so only the other's answer remains.

Several equations answer one call

Three equations for (gen) make three alternatives, and foldall sums them into one value.

Factorial: recursive substitution

Recursive rules, copied bindings and parent-before-child replacement.

Deconstruct and rebuild a pattern

Whole expressions bind to nested patterns and move to different argument positions.

Join two relations

Each match copies the stored fact it takes onto its pattern and fills its template from what the pattern binds, so the inner match asks about bob.

Sequential and pattern bindings

Let* fires its definition as a rule, a let for its first pair around a let* of the rest; case tries its key against each row in turn and takes it into the pattern of the first that matches.

Generate, prune and collect answers

Alternatives split, an empty branch disappears, and collapse collects the stream.

Write, query and evaluate in another space

Space creation, writes, removals and evaluation in a different context.

Map a closure, then fold its values

A closure captures a value and, applied, takes its argument into its parameter and opens onto its body; map-atom and foldl-atom fire their definitions as rules, one item at a time.

Types, state and handled errors

Grounded calls return type information, state values and a caught refusal.

Name a guarded intermediate value

Compute an integer half once and choose a result from its range.

Destructure a written expression

Read the head and tail of syntax without first evaluating that syntax.

Templates for folds and filters

Bind a fresh accumulator and item at every fold step, then filter a sequence.

Observe the current evaluation space

Define different meanings in separate spaces and inspect the active context.

Commit to the first match

once keeps only the first answer of a nondeterministic match, so a single atom is written.

Store one atom per alternative

add-atom runs once for every alternative of a superposed row, and match reads each stored atom back.

Judge every branch's matches at once, and prune the empty one

One branch per colour, each matching that colour's loops: every stored edge is judged at once, numbered by the pattern judging it, taken, refused or a near miss, where only $x being both b and c fails; green's branch finds nothing and is pruned, and collapse gathers what is left.

A rest pattern carries the run between the ends

A list is a palindrome when its ends are equal and what lies between them is one. Each firing carries the run between the ends as one value, the end written after the gap lands where the filled instance holds it, and the rule's box counts its firings.

Name a state, write it and read it

A state gets a box of its own and its first value, and takes the name of the token bound to it; a new value then replaces the old one, and a read copies it out.

Move an atom into a second space, &other

An edge leaves &self, a second space gets a box of its own, named &other by the token bound to it, and the edge is carried into it.

The workspace

Make a workspace and add an example

Write your own program

Step through a run

Drag a graph into another space

Read the key, or take the walkthrough

Export a picture, a GIF or a video

A workspace lasts as long as its tab, so Share a program's source to keep it.

Run it locally

npm ci
npm run workspace
npm run serve

Open localhost:8733/workspace.html. Node 22.18 or later is required. TSMeTTa and its WebAssembly runtime come with the install.

What the drawings mean

In the graph view a node's outline and typeface say what it is, and a dotted line leads to an argument its form takes as written rather than evaluating it first, such as an if's two branches; the block view outlines such an argument dotted. Every drawing is set in GitHub Next's Monaspace, bundled in fonts/: what the engine computes and the forms that decide what it evaluates in Krypton, a variable in Radon italic and the form that binds it in Radon, a number, string or truth value in Xenon, a name the program writes equations for in Argon, and any other name in Neon, with every special form bold. A head the engine defines with a sign of its own is drawn as that sign: |-> as λ, implies as ⇒, forall as ∀, empty as ∅ and sqrt-math as √, beside * as × and the other operators.

How it works

TSMeTTa executes each program once. MeTTaGrapher records that run's evaluations, branches, bindings and effects, then builds both drawing lanes from the record. Drawing a step never evaluates it again. Equal answers remain separate alternatives, and a state keeps the handle the native run gave it.

Factorial and the seven programs after it open the Examples workspace, after the tour, which opens first and shows every kind of step and mark the two views draw in one program. The rest come from the standard-library catalog in the app’s chooser, grouped by topic and searchable by what each program shows. The browser evaluates viewed programs in background workers, several at once, so evaluation leaves the controls responsive.

Use the library

Render a program's reduction as a GIF from TypeScript or JavaScript:

import { writeFile } from "node:fs/promises";
import { renderReductionGif } from "mettagrapher";

const gif = await renderReductionGif("!(+ 2 (* 2 20))", { view: "graph" });
await writeFile("sum.gif", gif);

Or from the command line, where --view is blocks, graph or side-by-side:

npx mettagrapher gif sum.metta sum.gif --view side-by-side

Or present it step by step, for a talk or a screen share. present writes one HTML page, a slide for each program it is given:

npx mettagrapher present factorial.metta collapse.metta --view side-by-side --out talk.html

The page opens in any browser, with no server, and loads nothing. →, Space, PageDown or a presentation clicker plays the next step and holds on its result, and a program's last step hands on to the next program. ← plays a step back, Home and End go to the first and the last program, 1, 2 and 3 show the graph lane, the block lane or both, B blacks the screen, F fills it and ? lists the keys. The address keeps the place, so a reload opens where you were.

A program can choose its own view, size and pacing, and bound its recorded explanation, with equations in &mettagrapher. A line that sets a bound governs the calls after it. A view or setting passed to renderReductionGif overrides the program's own. In the workspace a program's drawing bounds apply, and the canvas keeps its own view and pacing. Settings lists every setting with its range and default.

!(add-atom &mettagrapher (= (setting output view) side-by-side))
!(add-atom &mettagrapher (= (setting output width) 480))
(= (fact $n) (if (> $n 0) (* $n (fact (- $n 1))) 1))
!(fact 4)

graphSvg draws atoms as one SVG:

import { graphSvg } from "mettagrapher";
import { S } from "tsmetta";

const svg = graphSvg([S.fact(3)]);

The browser workspace records TSMeTTa's native execution. Its current runtime cannot execute native-thread operations such as hyperpose; those are excluded from the runnable example library. The architecture journal describes the recording boundary and its native differential tests.

Build and publish

npm run site builds dist/site for static hosting. The GitHub Pages workflow builds it on this machine under act and publishes it to the gh-pages branch, which Pages serves at mestto.github.io/MeTTa-Grapher. See deployment.

npm test checks the TypeScript implementation. npm run docs:gifs evaluates the examples examples/readme.json lists and regenerates their GIFs above through the workspace renderers, and the export manifest records each source, computed answers, dimensions, frame count, and file hash. node tools/readme-kinds.mjs says which kinds of step and mark those GIFs show between them and which they miss. npm run docs:ui records the workspace's own GIFs in Chrome, and their manifest records each.

MIT licence · Third-party notices