Web Tools #579 - Omlet, JavaScript Tools, Testing, React Native, Mobile

The following is a paid product review for Omlet, a component analytics platform for teams using React, to improve efficiency, adoption, and prove design system value.

One of the things that happens often with large code bases is that while a code base is growing, you may not be aware how the different parts of your design system are being used – or if they're even being used at all.

Enter Omlet, a one-of-a-kind component analytics platform that helps developer teams working on React and React Native-based projects to identify component usage patterns and trends.

Some of the benefits of Omlet include:

• Get visibility into how your teams are using your design system so you can make changes faster
• You can prove the value of your design system components to leadership using real-world data and actionable insights
• Ship faster with fewer bugs and a more consistent experience across all your products
• No need to build your own solution – which could take months – and you avoid iterating blindly with no knowledge of how your design system is actually being used

Setting Up Omlet
To get started with Omlet, sign up for a free account then run the following command at the root of the repository that you want Omlet to scan:

This will install the Omlet CLI then direct you to log in to your Omlet account in your browser. Once logged in, Omlet will scan your repository, create a primary tag for your components, and choose which folders Omlet should scan to find your components.

After this first scan, you'll be ready to examine your newly created dashboard, which you can access once logged into your Omlet account. In this review, I'm testing out Omlet using an open-source React-based project called Easy Email Editor, so you'll see some of that project's component data in these screenshots.

The Omlet dashboard includes data visualizations for things like Component Usage Over Time, Core Component Adoption Rate by Project, Core Component Adoption Over Time, and Most-Used Non-Core Components.

At the bottom of the Analytics section of the main dashboard, there's the super-useful section called How Can I Simplify the Code Library?. This displays two charts showing Unused Component Props and Least Used Core Components.

These insights can allow you to remove or improve specific props or components that have little to no adoption. This simplifies your design library and can dramatically reduce maintenance costs.


Customizing and Sharing Data
One of the powerful benefits of Omlet is the ability to show anyone in your organization – particularly those in decision-making roles – the progress of component adoption (or lack thereof) in your design system.

Omlet allows you to generate reports in the form of charts and graphs, with options to filter the displayed data using various properties (e.g. Project it's used in, Tag, Name, Last updated date, etc). Once your report is customized to your liking, you can download in CSV format or simply share via a public or team-only URL.

Each custom chart your team generates can be saved and later viewed at any time in the Saved Dashboard collection in the Analytics section of your main dashboard.


Analyzing Components
In addition to the Analytics section of the dashboard, you can also view the Components section, which allows you to search for and filter components, and drill down to an individual component.

When you select an individual component, you can view its dependency tree, props usage, creation date, updated date, and other info.

The dependency tree view allows you to see parent vs. child relationships for the component. You can pan around and zoom in/out on the canvas of the component's dependency tree, filter inside the tree view, and highlight specific parent/child relationships as needed.


Data-driven Decision Making
All of the above features, and more, enable your team to remove the guesswork that can hinder developer teams. Without this kind of data, as your design system grows, it can be next-to-impossible to determine which components to keep, which to remove, or which to improve.

With Omlet, decisions can be made based on quantifiable data that can be shared with anyone in your organization. This includes real-world usage as well as historical trends.

Omlet has excellent documentation that guides you through the setup process to help you get your first scan completed in just a few minutes. And even before signing up, you can try out Omlet's dashboard using this online playground, which uses the open-source Proton Mail component design system to demonstrate Omlet's excellent customizable data visualizations. (Oh and as someone who loves making omelets and always makes them with feta cheese, the dashboard URL is cool!)

Omlet includes a free plan for individuals who want to get started with component usage visibility, along with the Intro paid plan, which you can try out for 30 days free.

React and React Native are currently supported, with Vue and Angular in the pipeline, so if you're working on a large design system in one of those technologies, check out Omlet today.

Now on to this week's tools!