https://github.com/lukethacoder/lwc-dependency-viewer

🟡 Scan your LWC files to see the dependencies - displayed on a cytoscape powered graph
https://github.com/lukethacoder/lwc-dependency-viewer

developer-tools lightning-web-components salesforce-developers salesforce-lightning-web-components salesforce-metadata

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/lukethacoder/lwc-dependency-viewer
• Owner: lukethacoder
• License: mit
• Created: 2023-03-26T12:31:22.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-08T12:18:28.000Z (about 2 years ago)
• Last Synced: 2025-03-17T08:40:49.857Z (3 months ago)
• Topics: developer-tools, lightning-web-components, salesforce-developers, salesforce-lightning-web-components, salesforce-metadata
• Language: TypeScript
• Homepage: https://ldv.lukesecomb.digital
• Size: 4.72 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  

    

  



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

```bash

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](https://github.com/trailheadapps/lwc-recipes) repository as an example usage.

## Screenshots

Hover LWC to see its neighbours

[![](./docs/lwc-dependency-viewer-01.gif)](https://ldv.lukesecomb.digital)

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

[![](./docs/lwc-dependency-viewer-02.gif)](https://ldv.lukesecomb.digital)

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

[![](./docs/lwc-dependency-viewer-03.gif)](https://ldv.lukesecomb.digital)

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

[![](./docs/lwc-dependency-viewer-04.gif)](https://ldv.lukesecomb.digital)

Adjust the `curve-style` to your liking

[![](./docs/lwc-dependency-viewer-05.gif)](https://ldv.lukesecomb.digital)

## Contribution

See [Contributing Guide](CONTRIBUTING.md).

## License

[MIT](LICENSE).