FootPrintJS

→ footprintjs.github.io

A flowchart is how a person draws a system: a box for each step, an arrow for what happens next. footprintjs makes your code be that flowchart — so the thing that runs is the thing you inspect. Configured recorders capture its execution path, data activity and decisions as they happen.

One pattern, from backend flows and data pipelines to agents, app interactions and interactive analysis. Foottrace owns the execution-record layer; FootPrint owns the engine. The libraries below build on those foundations or present the records they produce.

Backend workflows · AI agents · ML workflow evidence — Beta · Data collection and derivation · Slides · Teaching films

Choose the library for the job, then check its install instructions and compatible package versions. Beta and source-checkout projects are labelled separately from published packages.

flowchart TD
    subgraph foundation["Execution and records"]
        R["Foottrace<br/>records, replay and time travel"]
        F["FootPrint / footprintjs<br/>workflow execution"]
        R -->|record layer| F
    end

    subgraph libraries["Build with the record"]
        A["AgentFootprint<br/>agents and configurable answer checks"]
        D["DataPipeline<br/>collect and derive observations"]
        H["HACI Footprint<br/>declared app actions and journeys"]
        V["VizFootprint · Beta / experimental<br/>interactive analysis and provenance"]
        C["ContextFootprint<br/>assertion identity and conflicts"]
        C -->|context comparison| A
    end

    F -->|agent flows| A
    F -->|collection and derivation flows| D
    F -->|guards and schemas| H
    F -->|analysis execution| V
    R -->|session recording and evidence readers| H
    R -->|analysis provenance readers| V

    subgraph views["Inspect recorded runs"]
        E["Flow Lens / Explainable UI<br/>workflow steps and state"]
        L["Why Lens<br/>agent context, calls and decisions"]
        T["Story Lens / Thinking UI<br/>replay the recorded agent loop"]
    end

    F -. workflow snapshots .-> E
    A -. agent recordings .-> L
    A -. adapted agent traces .-> T
    R -->|replay and recorded state| L

    subgraph pilot["Source-only pilot — not published"]
        P["Record Lens<br/>shared saved-record viewer"]
    end
    F -. saved workflow fixtures .-> P
    H -. saved session fixtures .-> P
    R -->|record readers| P

Solid arrows show selected runtime building blocks; dotted arrows show recorded inputs supplied to a view. This is not an exhaustive dependency map. Each viewer has its own input contract and supported package versions; these are not all interchangeable record formats.

HCI's session recorder uses Foottrace directly, without executing a FootPrint flowchart; its newer action ledger remains separate. Viz reads Foottrace analysis evidence, while its interaction history and replay use Viz's own record format. The Record Lens pilot reads saved workflow and HCI records without either producer installed. It has no published entry point yet. Replaying recorded steps and state does not require an authored flowchart; drawing the complete workflow, including untaken branches, requires that structure to be saved separately.

For a combined agent-recording screen, footprint-viewer wires the lenses to one cursor. Its published 0.1.0 peer range targets AgentFootprint ^9.48.0; it does not declare compatibility with newer AgentFootprint majors. Start with Lens's own documentation when choosing a viewer for a current agent application.

ML workflows — Beta: footprintjs-ml adds typed model references, evaluation receipts and release checks around existing trainers. Use its source-archive quickstart; a version in source is not a claim that an npm release is available.

Unpublished libraries — Beta: Features, School, Agent Explainable UI, FootPrint ML and VizFootprint have no npm release. Use each repository's source setup or archive instructions. APIs may change; School requires a compatible containing workspace, and VizFootprint remains experimental with npm publication disabled.

Presentation tools: StoryDeck presents structured content as articles, scrolling stories and slides. StoryReel builds teaching films from a storyboard and recipe; footprint-story provides shared narration, captions and motion data. Their own READMEs describe supported outputs and setup.

Browse every public repository for domain libraries, source projects and examples; they are not all published npm packages.

Examples of the wider ecosystem include the AssessmentFootprint workbench, current agent examples, and VizFootprint demos.

1. Collect during execution. Record tracked reads, writes and decisions while the workflow runs.
2. Keep the record and its limits. Foottrace readers query retained evidence; missing or withheld evidence stays a gap.
3. Choose the view for the record. Use the appropriate adapter and compatible versions to inspect workflow steps, agent decisions or the recorded story.

A record is evidence of observed execution, not proof that an external fact or an answer is true.

The hardest question in an agentic system is what supports this answer? — which context was supplied, which tools ran, what they returned and which checks passed. AgentFootprint connects those recorded events and provides configurable answer checks. The app still owns its evidence rules and delivery policy. These records do not reveal a model's private reasoning or make every answer verified.

_{open source · check each project's own license · © 2024–present Sanjay Krishna Anbalagan}