Skip to content

🟡 Scan your LWC files to see the dependencies - displayed on a cytoscape powered graph

License

Notifications You must be signed in to change notification settings

lukethacoder/lwc-dependency-viewer

Repository files navigation

LWC Dependency Viewer logo

LWC Dependency Viewer


  • 🖼️ Visual representation of your LWCs
  • 🔎 Component Search
  • 💡 Highlight linked components
  • 🔩 Indicators for LWC file types (HTML/JS/CSS)
  • 📦 See which LWC are referencing Apex/StaticResources
  • 🔑 Run locally without needing to install anything into your org

Getting Started

pnpm install

# before running, open the `scripts/walk-files.ts` script and replace the 
# FOLDER_TO_SEARCH` value with your project path.
#
# pending https://github.com/lukethacoder/lwc-dependency-viewer/issues/1
pnpm walk

# run the dev server
pnpm dev

# this should open at http://localhost:5173/ 

Default output.json has been generated from the trailheadapps/lwc-recipes repository as an example usage.

Screenshots

Hover LWC to see its neighbours

Click an LWC to open up a file view and to see any related Apex Classes and/or StaticResource references

Open up the search (keyboard shortcut /) and easily search for the LWC you're looking for.

Hide orphan LWCs that exist on their own and don't relate to other LWCs

Adjust the curve-style to your liking

Contribution

See Contributing Guide.

License

MIT.