render
An interface that renders its own expressions. render is a reactive expression engine for TypeScript. Each value is a node with an expression. One write starts one ordered epoch: the store evaluates each reader in topological order, and it stops where a value does not change. Classes are templates of nodes, stored as data, and the live viewer edits classes and instances in the same type graph.
The site has the guide, live demos of each idea, and the viewer in the browser.
Install
npm i @mark1russell7/render-node @mark1russell7/render-dsl @mark1russell7/render-splay
import { app, lit, ref } from "@mark1russell7/render-dsl";
import { addNode, nodeStore, readValue, setValue } from "@mark1russell7/render-node";
import { standardOps } from "@mark1russell7/render-splay";
const store = nodeStore({ ops: standardOps });
addNode(store, lit(2), "w");
addNode(store, lit(4), "h");
addNode(store, app("*", ref("w"), ref("h")), "area");
readValue(store, "area"); // { tag: "some", value: 8 }
setValue(store, "w", 3);
readValue(store, "area"); // { tag: "some", value: 12 }
store.epochStats; // the nodes that the write evaluated and changed
What is in it
- Nodes and epochs. A write makes its readers dirty, and one epoch evaluates them in topological order. A value that does not change stops the epoch on its path. A cycle evaluates again until its values are stable.
- Expressions as data. An expression is a coeval document. The kernel of coeval compiles it one time, evaluates it, finds its references and checks it. The evaluation is total: a failure gives
none with a cause, and it does not throw. A formula syntax parses to a document and back.
- Classes as templates. A class gives cells and methods. A change of a class reaches each instance that still follows it. Traits give methods by structure, with prime fingerprints.
- An interface that renders itself. Render methods are expressions. The viewer shows them as trees that a person can edit, and an edit changes the class at once. Each class can give a summary, thus a view shows the boundary of each thing first.
Packages
Each package is ESM, has TypeScript declarations, and works in Node.js 22.12 or later and in browsers.
| Package | Contents |
|---|
@mark1russell7/render-optional | The Optional type of total evaluation: none or some |
@mark1russell7/render-dsl | The expressions: coeval documents, the machine of render on the coeval kernel, and the formula language |
@mark1russell7/render-node | The reactive store: nodes, seats, slots, ordered epochs and the NodeOps extension points |
@mark1russell7/render-biblo | The class registry, the instance store, the traits and the class-level NodeOps |
@mark1russell7/render-splay | Hydrate, splay and dehydrate, the level of detail, the standard classes and the standard ops |
@mark1russell7/render-seat | Reactive path subscriptions over plain values |
@mark1russell7/render-viewer | The React viewer: the type graph and the canvas, with summaries, formulas, undo and saved sessions |
The packer of the type graph is @mark1russell7/packing. The old package @mark1russell7/render-pack is deprecated.
The workspace also has two private packages: @render/site, the site with the live demos, and @render/cli, the workspace commands of the template.
Quality
- Each known defect has an ID and a regression test that names it. The review shows the live status of each test.
- The browser tests run the viewer in Chromium, Firefox and WebKit, and on two phones.
- The package check installs each tarball in an empty project, runs it, and type-checks a strict consumer against its declarations.
Commands
pnpm install
pnpm dev # the viewer, with the dev server of Vite
pnpm check # the type check, Oxlint, the coverage, the tests and ste-lint
pnpm test:e2e # the browser tests of the viewer (Playwright)
pnpm build # the npm build of each package (tsdown)
pnpm check:packages # pack, lint, install and run each package
pnpm bench # the speed lane (report only)
pnpm package add <name> --preset=ts # make a new package
Documents
Writing style
The prose of this repository follows ASD-STE100 Simplified Technical English (STE). STE is a style target. ASD does not certify this repository. The project glossary is in ste.config.json. Keep a local copy of the STE dictionary in .ste/, and do not commit it.
Disclosure
An AI model (Claude, from Anthropic) wrote most of the text and the code of this repository, under the direction of the author. The STEMG of ASD-STE100 asks for this disclosure in its white paper on STE and artificial intelligence (June 2026).
