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.