open-index/open-npm huggingface dataset:
npm package: @flowspine/viewer
Description: Embeddable React viewer for Flowspine catalogs (beta, not production-ready)
Latest version: 0.1.1-beta.20260407.1

﻿# @flowspine/viewer

Embeddable React viewer for Flowspine catalogs.

## Status

Beta / experimental. Not production-ready yet.

## Install

```bash
pnpm add @flowspine/viewer@beta
```

Peer dependencies:

```bash
pnpm add react react-dom
```

## What It Does

- renders Flowspine process graphs from catalog data
- supports compact layouts and orientation switching
- provides node sidebar with summary/edges/issues/tests
- supports live catalog polling mode for local development

## Basic Usage

```tsx
import { FlowspineViewer } from "@flowspine/viewer";

export default function Page() {
  return <FlowspineViewer />;
}
```

The package auto-loads viewer styles and `@xyflow/react` base styles.

## Runtime Requirements

The viewer expects catalog data compatible with Flowspine extractor/CLI output.

Recommended generation path:

```bash
pnpm exec flowspine build --glob "processes/**/*.ts" --out ".flowspine/catalog.json"
```

## Local Dev (Live Mode)

Terminal 1 (generate + watch):

```bash
pnpm exec flowspine watch --glob "processes/**/*.ts" --out "apps/viewer/public/catalog.json" --polling --poll-interval 250
```

Terminal 2 (viewer app in this monorepo):

```bash
pnpm --filter @flowspine/viewer dev
```

Inside viewer UI:

- set file URL to `/catalog.json`
- enable live update mode
- set polling interval as needed

## Exports

- `FlowspineViewer`
- `AppShell`
- `useViewerStore`
- viewer types
- `@flowspine/viewer/styles.css`

## Build And Test

```bash
pnpm --filter @flowspine/viewer build
pnpm --filter @flowspine/viewer test
```

## Related

- Root docs: `README.md`
- Skills repo: `https://github.com/noarax/flowspine-skills.git`

## License

Apache 2.0

## Copyright

Copyright (c) 2026 Flowspine contributors.