Omlet is an analytics tool to help you measure the success of your component libraries and design system and identify opportunities to improve it. 🍳 *Now in public beta, supports React
This is the 2nd launch from Omlet. View more
Omlet for VS Code
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.
Free
Launch tags:Developer Tools
Launch Team / Built With
Zeplin
Fable Wizard
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?
Zeplin
@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!
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.
Zeplin
That's awesome to hear, thanks @mihajlo_kuzmanoski — feel free to ping us anytime if you have any feedback!
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?
Zeplin
@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!
Streak Hunter
damn this is so useful love it! thank you for making this!!
Wow, This is particularly helpful for larger teams! Can’t wait to see how this impacts our workflow, especially in maintaining our component library. Upvoted!