FeatureScript Standard Library Visualizer

S1mon

https://gatrall.github.io/fsvisualizer/

I built a tool (or more accurately vibe coded a tool) to visualize the Onshape Standard FeatureScript library. This is very new, and I'm sure there are some weird things about it. Let me know what works and what doesn't. For each module, it shows what's imported/exported, a link to the documentation, the cad.onshape.com link to the module, and lots lots more…

Konst_Sh

Wow, that's a great idea, and pretty feature dense already. Curious which framework you used/was suggested by llm, if any, and how you decided on that?

S1mon

Prompt 1 to ChatGPT 5.3 Pro:

"Can you read this, and think of how a visualizer might be helpful for the standard library for Onshape FeatureScript? 

https://jimmyhmiller.com/learn-codebase-visualizer

https://cad.onshape.com/FsDoc/index.html"

Prompt 2:
"What language and platform(s) would a visualizer run on? Can you help write a prompt for Codex to create a basic one?"

Answer from ChatGPT:

Title: FeatureScript stdlib visualizer MVP (import/re-export graph)

Goal
Build a minimal tool that indexes the Onshape FeatureScript standard library (.fs files) and serves a browser UI to explore an import/re-export graph.

Target user flow

1. User has a local folder containing FeatureScript stdlib sources (e.g., a git clone of javawizard/onshape-std-library-mirror, preferably the without-versions branch).
2. User runs: npm install
3. User runs: npm run index -- --root <PATH_TO_STDLIB>
4. User runs: npm run dev
5. Browser opens a graph viewer showing modules and import/re-export edges. Clicking a node shows details.

Tech choices (use these)

• Monorepo not required; single package is fine.
• TypeScript everywhere.
• Vite + React for UI.
• Cytoscape.js for graph rendering (pan/zoom, click selection).
• Node.js script to crawl + parse .fs files and emit JSON consumed by the UI.

Parsing requirements (MVP)

• Recursively find all *.fs files under --root.
• Parse FeatureScript import statements of the form:
import(path : "…", version : "…");
export import(path : "…", version : "…");
There may be whitespace/newlines; version may be "" or a number string. Ignore version content.
• For each file, record:
  • filePath (absolute or root-relative)
  • modulePath (the string inside path : "…", if present in imports; otherwise infer module name from file name)
  • imports: list of target module paths from non-export imports
  • reexports: list of target module paths from export imports

Optional (nice-to-have, but keep simple)

• Extract exported symbol names with lightweight regex for:
export function NAME
export type NAME
export predicate NAME
export enum NAME
export const NAME
Store these in the node details panel.

Output format

• Write UI-consumable JSON to: public/graph.json
• Use Cytoscape element format, e.g.:
{
"elements": {
"nodes": [{ "data": { "id": "onshape/std/geometry.fs", "label": "geometry.fs", "filePath": "...", "exportCount": 12, ... } }],
"edges": [{ "data": { "id": "e1", "source": "A", "target": "B", "kind": "import" } }]
}
}
• Node id should be a stable string; prefer the root-relative file path OR the module path string if consistent.

UI requirements

• Full-screen graph view with pan/zoom.
• Left sidebar:
  • search box (filters nodes by substring match on label/id)
  • list of matching nodes (click selects and centers)
• Right sidebar (or bottom panel):
  • selected node details: id, filePath, counts, lists of imports/reexports (clicking a referenced module selects it)
• Visual distinction:
  • Edge kind "import" vs "reexport" should be visually distinct (e.g., dashed vs solid).
  • You can keep node styling minimal.

Repo layout (suggested)

• /src (React app)
• /tools/indexer.ts (Node script)
• public/graph.json (generated)
• package.json scripts:
  • "dev": vite
  • "build": vite build
  • "index": tsx tools/indexer.ts (or ts-node) with args parsing
  • "preview": vite preview

Acceptance criteria

• npm run index -- --root <dir> completes without errors on a real stdlib tree and produces public/graph.json.
• npm run dev loads the graph and renders nodes/edges.
• Clicking nodes and sidebar navigation works.
• README.md explains setup and includes an example command using a local stdlib clone path.

Implementation notes

• Keep parsing regex-based; no need for a full FeatureScript parser.
• Be careful to not treat commented-out imports as real (best effort: strip // line comments and /* */ blocks before regex).
• Handle duplicate edges gracefully (dedupe).
• If graph is huge, still load it; don’t over-optimize—this is MVP.

Please implement the full project, create all files, and verify by running:

• npm install
• npm run index -- --root <some placeholder path; if not available, at least run the script with an empty temp folder and show it handles it>
• npm run build

After that, there was a lot of dialing in of UX/UI, and adding the links to the docs and codebase, but surprisingly easy. Part of a day's work.

Konst_Sh

Got it, great use of ai, thanks for sharing the insights!