Omlet VS Code Extension

Get component usage insights in VS Code

Omlet for VS Code lets you analyze how and where components (and their props!) are used across your repo — here’s a quick demo:

What can I do with Omlet for VS Code?

See how many times a component is used directly in code

Omlet for VS Code displays how many times a component is used, directly above its definition. No need to search through your codebase — just glance at the usage count in your editor.

Discover how many times each prop is used — and with which values

Select a line where a prop is defined to see how many times it’s used across the codebase. Hover over it to get a quick breakdown of the values passed.

Click on a prop value to see exactly where the component is used with that specific prop-value combo.

Visualize where components are used with the dependency tree

See where components are used in a interactive map. Refine components and props confidently — minimizing bugs and predicting the impact of updates.

How do I get started?

1. Install the extension from the VS Code marketplace.
2. Open a React project — works with either JavaScript or TypeScript.
   • The extension will automatically run when it detects any .js, .ts, .jsx, or .tsx files.

Does Omlet work outside of VS Code?

Yes! Build yourself an Omlet dashboard to track and analyze component adoption at scale — even across multiple repos. Teams like GoFundMe, Color, and MediaMarkt use Omlet to reduce front-end tech debt and prove the value of their design systems.

Troubleshooting

If you run into any issues or have questions, check out our docs or reach out to us at hi@omlet.dev.