A platform-native relational field runtime; the DOM is its first host — framework-agnostic, with a
renderer-agnostic core. This page is the map; every card below is drawn from the same
source as the sidebar, and every card is a body in this page's field. Engage one.
Install
Most projects want @fundamental-engine/vanilla — the framework-free door, host-bundled
so createField works with no wiring. React users want @fundamental-engine/react.
The other packages are there when you need them; the core engine has zero runtime dependencies.
Plain JS/TS, or any framework, no opinion? → @fundamental-engine/vanilla — start here.
Your own renderer, or a canvas you own? → @fundamental-engine/core — you supply the host.
npm i @fundamental-engine/vanillathe framework-free FieldField class, mountField(), and host-bundled createField. The recommended starting point.
npm i @fundamental-engine/reactthe <FieldField> React component + useFieldField hook
npm i @fundamental-engine/elementsthe <field-root> web component — drops into any framework or plain HTML
npm i @fundamental-engine/corethe renderer-agnostic engine — when you own the canvas and wire your own host
No build step? Import straight from a CDN:
import { createField } from 'https://esm.sh/@fundamental-engine/vanilla'.
Install the specific package you need — the umbrella packages were retired in 0.7.0.
In a hurry? Your first field goes from install to a reacting
headline in eight steps.
Reactive, not ambient
Fundamental is a behaviour layer, not a background effect. A field reads each
[data-body]'s position every frame and writes the local field back as
--field-* CSS variables your styles consume — so it reacts to your layout
and engagement, not to the cursor over a decorative canvas. Since
#538 it is
signals-first: a field draws nothing by default — it runs the simulation and emits signals,
and you opt into a visible surface (render: 'dots', or the warped grid) when
you want one. The particles are one optional surface; the signals are the point.
One createField — which door?
There is onecreateField. The @fundamental-engine/core export is the
renderer-agnostic primitive and requires opts.host; the
@fundamental-engine/vanilla export is the same function with browserHost()
bundled for you (and a bounds option). Same function, host supplied or not — not three
different APIs. Pick the door that matches your stack:
Plain TS/JS, any framework → new FieldField(opts) or createField(canvas, opts) (vanilla) — host auto-supplied, signals-first.
Scope the field to a component → new FieldField({ bounds: el }) — the field lives in the element, not the window.
HTML / Vue / Svelte / Angular → <field-root> — add render="dots" for particles, omit it for signals-only.
React → <FieldField> / useFieldField().
Your own renderer, or a canvas you own → createField(canvas, { host }) (core) — requires a host.
Declared metrics on real bodies, no canvas → applyPattern(root, pattern, { bodies }) (dom) — the signals-only metric pipeline; bind data with bindData.
Start where you are. The normal developer path — install, then build — is first; the substrate
model is here when you want to read, reveal, and govern the field.
The substrate is legible three ways — as an agent-readable graph, as live physics with an
agent-json readout, and as ordinary pages that measure themselves. All three run the real engine.
AI Evidenceagent-readable claims, sources, relationships, and confidence
Substrate Demodynamic bodies, recoil, and live agent-json
Invisible Fieldsordinary pages as readable fields, no particle swarm
The map
The documentation, whole. These groups mirror the sidebar exactly — both render from one
navigation tree, so this map cannot drift from it.
The applied tier. Twelve ordinary page types — an inbox, a market, a backlog, a front page —
run as fields over real data, with no particle swarm: the field's
measurements come back as type, ink, and anchor. Each ships a committed data snapshot,
upgrades itself to live counts when its source is reachable, and says which mode it is in.