@overcut/ui-workflow-viewer

Read‑only, marketing‑ready workflow viewer component.

Install (external consumer)

npm i @overcut/ui-workflow-viewer react react-dom reactflow elkjs

import { WorkflowViewer } from '@overcut/ui-workflow-viewer';
import '@overcut/ui-workflow-viewer/styles.css';

export function Example({ definition }) {
  return (
    <div style={{ height: 520 }}>
      <WorkflowViewer definition={definition} />
    </div>
  );
}

The stylesheet includes React Flow base CSS internally, so a single CSS import is enough.

Local testing before publish

You have two easy options.

A) Tarball install (quickest)

1. Build the library:

   npx nx build ui-workflow-viewer

2. Pack it (creates a .tgz file):

   cd dist/libs/ui/workflow-viewer
   npm pack
   # -> overcut-ui-workflow-viewer-x.y.z.tgz

3. In a test app, install the tarball:

   npm i /absolute/path/to/dist/libs/ui/workflow-viewer/overcut-ui-workflow-viewer-x.y.z.tgz

4. Import and run as shown above.

Publishing

1. Bump the version in libs/ui/workflow-viewer/package.json.
2. Build the package:

   npx nx build ui-workflow-viewer

3. Publish from the dist folder:

   cd dist/libs/ui/workflow-viewer
   npm publish --access public

Notes

• Peers: react, react-dom, reactflow. Dependency: elkjs.
• Output: ESM bundle index.esm.js, types, and styles.css.