Subscribe
Sign in
p/omletComponent analytics for developers and design system teams
Start new thread
Berk Çebi

Omlet for VS Code - Get React component usage insights in VS Code

by•

Omlet is a component analytics tool for React. You can now use Omlet directly in VS Code and analyze how and where your React components (and their props) are used as you're coding — helping you confidently update, clean up and maintain your component library.

Add a comment

Replies

Best
Berk Çebi
Maker
📌
Hey folks, Berk here from the Omlet crew. I'm one of the co-founders. 👋 Today, we're super excited to announce Omlet for VS Code — our biggest update since launch! You can now analyze how and where your React components (and their props) are used right inside your editor — helping you confidently update, clean up, and maintain your component library, reducing tech debt along the way. Get started at https://omlet.dev/extension and let us know what you think — we're just getting started so any feedback would be super helpful. Cheers!
Jonas Urbonas

This is a great way to streamline development—being able to track how and where components are used directly within the editor will save so much time and reduce the risk of errors. How does Omlet handle situations where components are used in complex or deeply nested structures—does it still provide clear visibility for those cases?

Berkay Dinçer
Maker

@jonurbonas thank you so much for the kind words!

Omlet is designed to handle most complex and deeply nested component scenarios, clearly identifying not only the usage but also prop values. In those rare cases where we're unable to fully detect the specific usage details, we still reliably detect and resolve imports. This ensures that component relationships remain clear and properly captured even in complex situations.

If you run into issues, let us know though, happy to help!

Mihajlo Kuzmanoski

Omlet for VS Code looks like a huge productivity boost for React devs! 🔥 Being able to track component usage and props right inside the editor is a game-changer for maintaining a clean, efficient codebase. This will definitely help teams reduce tech debt and refactor with confidence. Congrats on the launch! 🚀 Looking forward to trying it out.

Berk Çebi
Maker

That's awesome to hear, thanks @mihajlo_kuzmanoski — feel free to ping us anytime if you have any feedback!

Adinda

The ability to analyze component usage seamlessly within the coding environment fosters confidence and efficiency, making it a must-have for any React developer looking to streamline their workflow.

George

Congratulations on the launch of Omlet as a component analytics tool for React! Integrating it directly into VS Code sounds like a fantastic way to streamline development and maintain component libraries.
Could you share more details about how Omlet handles complex component hierarchies or dynamic props?

Berkay Dinçer
Maker

@pekingzcc hey,


Thanks for your kind words and interest! Great question.


When it comes to dynamic props, Omlet for VS Code marks these props as "dynamic." You can easily explore their possible values by clicking the "dynamic" tag in the props chart, visible when you hover over the component's prop definitions. This opens a dependency chart, where you can track the component usages with the given prop's values and their relationships in detail.


Regarding complex component hierarchies, Omlet for VS Code currently displays the immediate parents and children (first-level hierarchy) for simplicity. If you're looking for deeper or more extensive dependency analysis, the Omlet dashboard offers more detailed insights and comprehensive functionality.


I'm happy to answer any further questions you have!

Denis 🐝
This is such a Great Tool for React devs! I will try it out soon
Jedidja van der Walt
Launching soon!

I've been wanting to clean up our components. This is going to make it so much faster! 🤩

Faizan Jan

More useful part of this extension is the sidebar and the children components. Because the usage of the component itself can be checked directly by cmd + click on the component definition. Yeah granted that filtering the usage by prop values can be a plus in extensive codebases. Overall, this is a very useful extension for React devs.

Faizan Jan

Does this extension work equally well with class-based components? More often developers will need this extension to look at legacy code, and most of the legacy code is written in class-based components. Also how does it handle dynamically imported components? Will Omlet be able to trace down usage of a component which is imported and used something like this:

  useEffect(() => {
      import(`./components${props.component}`).then((resp) => {
          setComponent(resp);
          setCompLoaded(true);
      });
  }, [props.component]);

I know this is not a typical React side-effect, and probably looks stupid. Trust me, this is production code written by my predecessors

Berkay Dinçer
Maker

@faizanjan_ hey,


Yes, Omlet does support class-based components, so it should be quite helpful when you're diving into legacy code.

As for dynamically imported components, that part is a bit tricky. Currently, Omlet doesn't support tracing components imported in that manner as the value is calculated at runtime. We’re always looking to improve, so we’ll keep this in mind for future updates. If you have any more questions or feedback, feel free to reach out!