TSF-Viewer

Web-based viewer for Trustable Software Framework dependency graphs. Given a TSF artefact, this app renders it as an interactive graph and displays the information of selected nodes.

An example artefact can be found in example/ and viewed as a live demo.

Built with React, TypeScript, and Vite.

Using TSF-Viewer

Install via NPM (npm install -g tsf-viewer) or run without installing with npx (e.g. npx tsf-viewer view <path-to-artefact>).

| Command | Description | | --- | --- | | tsf-viewer view <path-to-artefact> | Builds and serves the app around the specified artefact. | | tsf-viewer build <path-to-artefact> | Builds the app as a static bundle. Use the --single-html flag to bundle into a single file. | | tsf-viewer dev [path-to-artefact] | Runs the app via Vite's dev server. Artefact optional. |

Every command supports --public <directory> to specify the public directory, and --help.

Development

Prerequisites

• Node.js: 24.11 or later. Installation with your OS's package manager is recommended
• pnpm: enable via Corepack:

  corepack enable
  corepack prepare pnpm@latest --activate

Install and run

pnpm install
pnpm dev example/example.json

The dev server starts at http://localhost:5173.

Package manager

Always use pnpm. Do not use npm or yarn, the lockfile is pnpm-lock.yaml and the node_modules structure depends on pnpm's content-addressable storage. See pnpm.io/motivation for background.

pnpm scripts

| Command | Description | | --- | --- | | pnpm dev example/example.json | Start the Vite dev server with the sample artefact | | pnpm build example/example.json | Type-check and build for production (outputs to dist/) | | pnpm lint | Run Biome linter and formatter check | | pnpm lint:fix | Auto-fix linting issues | | pnpm add -g . | Install the local version of the app's CLI |

Biome

Biome handles both linting and formatting, and is run as our linting step in CI. Install the editor extension for inline feedback and format-on-save. Configuration lives in biome.json.

Lefthook

Lefthook runs biome check on changed files before every git push. It installs automatically via the lefthook dev dependency.

Key dependencies

| Dependency | Purpose | Docs | | --- | --- | --- | | React | UI framework | Docs | | Sigma | Graph visualisation | Docs | | Graphology | Graph data structure (used by Sigma) | Docs | | Graphviz (WASM) | Graph layout computation | Docs | | chroma.js | Colour manipulation | Docs |