Omlet - Boost your component usage insights

Are you struggling to understand component usage across your development teams? Omlet offers an innovative solution that helps analyze how and where components are utilized in your code repositories. By providing real-time insights while coding, Omlet helps reduce front-end tech debt and showcase the value of your design system efficiently.

How It Works

Omlet functions primarily through analytics and data visualization integrated into your coding environment. By embedding into VS Code, it allows developers to access component insights directly while they work, making understanding usage patterns easier than ever. This process works through several key features:

• Component Scanning: Omlet scans all React components in your codebase, including regular and design system components, providing a comprehensive view of usage.
• Real-time Insights: As developers code, they receive notifications on how components and their props are being utilized, showcasing potential issues right when they're relevant.
• Access Control: Users can control which parts of their code Omlet scans, ensuring no sensitive code is uploaded or stored.
• Custom Dashboards: Create tailored dashboards that track design system performance metrics and adoption trends over time, making it easy to spot gaps and drive improvements.
• Enhanced Collaboration: Teams can work together more effectively by sharing insights and understanding component usage better, allowing for strategic, data-driven decisions.

Usage

Getting started with Omlet is easy! Follow these steps to begin analyzing your component usage effectively:

1. Set Up Omlet: First, install the Omlet extension in your VS Code. This will integrate the component insights directly into your development environment.
2. Configure Your Scans: Go to the Omlet settings and define which directories or files you want Omlet to scan, ensuring you cover your key components.
3. Start Coding: As you write code, take advantage of real-time notifications about component usage. This is a great way to catch any issues or understand how to leverage existing components effectively.
4. Access Your Dashboard: Navigate to your Omlet Dashboard which offers a complete overview of component utilization. Use this data to make informed choices about design system adoption and improvements.
5. Monitor Changes: Over time, re-evaluate your components and usage patterns with the dashboard. Use the collected data to inform your development roadmap, ensuring you are continually improving your design system strategy.

Onboarding New Developers

Using Omlet can help onboard new developers more effectively by providing them with insights into how components are used within the codebase.

Design System Audits

Conducting audits on the design system can be accomplished more efficiently with Omlet, identifying gaps and redundancies.

Improving Design Consistency

Designers and developers can collaborate to ensure consistent use of components across projects, improving user experience.

Legacy Code Refactoring

When refactoring legacy code, Omlet helps identify which components need updates or replacements.

Component Performance Tracking

Track the performance of individual components over time with the analytics provided by Omlet.

Cross-team Collaboration

Facilitate better collaboration among teams by sharing insights and usage reports provided by Omlet.

Features

• Real-time Insights: Get instant feedback on component usage while coding, helping you identify issues quickly.
• Comprehensive Scans: Omlet scans all React components, giving a complete view of how components are utilized.
• Custom Dashboards: Build dashboards that track design system performance and adoption over time.
• User Control: Users can select which parts of their code base to scan, ensuring data privacy.
• Integration with VS Code: Omlet works directly within your coding environment, enhancing your workflow.
• User-friendly Interface: Easy to navigate and understand dashboard that displays key metrics and insights.

Free (30 Days): $0

• 1 user
• 4 scans every 30 days
• 2 tags
• 30-day scan retention
• Up to 1,000 components

Intro (Monthly): $169

• 2 users
• Unlimited scans
• 2 tags
• 90-day scan retention
• 1,000 components included

Advanced (Monthly): Custom

• Unlimited users
• Unlimited scans
• Unlimited tags
• Unlimited scan retention
• 2,000 components included

FAQ

1. What is Omlet?

Omlet is a tool that provides insights into component usage across your development teams and helps reduce front-end tech debt.

2. How does Omlet work with my codebase?

Omlet scans your React components directly within your development environment, providing real-time feedback on usage and adoption.

3. Is my code secure with Omlet?

Yes, Omlet does not collect or store your code. It only collects metadata related to components.

4. What frameworks does Omlet support?

Currently, Omlet supports React and React Native, with plans to support Angular and Vue.js soon.

5. Can I try Omlet for free?

Yes, Omlet offers a free plan with limited features to help teams improve their design systems.

6. How can I access the Omlet Dashboard?

You can access the Omlet Dashboard after setting up the extension in VS Code.

7. What is included in the Intro plan?

The Intro plan includes 2 users, unlimited scans, and up to 1,000 components, making it ideal for teams looking to enhance their design systems.

8. Can I get a demo of Omlet?

Yes, you can request a demo to see how Omlet operates and how it fits into your development process.