Announcing Omlet

It’s a rainy Saturday in San Francisco — 3 days before launch.

We moved here 6 years ago from Istanbul, with one goal in mind: to help teams build beautiful products. Since then, we’ve been doing our best to help product teams deliver on the promise of design.

A while ago, we decided to dive deeper into the product development lifecycle, to see how we can further help our fellow developers and designers. The more we dove deeper, the more issues we found.

…and just last year, we decided to tackle one of them.

Today, I’m thrilled to announce Omlet — a component analytics tool for developers.

Omlet helps developers and design system teams measure component adoption across all their projects and identify opportunities to improve them. Start tracking your components today: https://omlet.dev

The reason why we’re building Omlet

During our research, we met with tens of brilliant developers who are building a library of components, a design system — including Salesforce, GitHub, Segment and Optimizely. Their goal was to drive adoption for these component libraries: to increase the design system adoption in the codebase, but they were struggling from not having any visibility on the usage. We kept hearing the same questions again and again:

• “How is my component adopted over time?”
• “What new components are emerging and which ones are being used?”
• “If I update or deprecate this component, how would that affect my team?”
• “Am I making the right improvements?”

How could you answer these questions if you don’t have any visibility around adoption? These teams, they were manually writing scripts, doing hacky visualizations just to see how the team is adopting their component libraries.

Here’s how Omlet works

Omlet analyzes your codebase, parses your components and collects usage data for all the components. It then provides a dashboard where you see a bunch of out of the box charts that compile the most common data points that teams are interested in.

Data without hassle
Once you run Omlet CLI, it statically analyzes your codebase(JavaScript/TypeScript), detects React components and usages.

We heard that teams are building and maintaining custom scripts and using tools to visualize these information. Omlet takes care all of that for you.

Out-of-the-box charts
Omlet’s Analytics Dashboard comes with bunch of out-of-the-box charts to help you instantly track adoption. For example, you can see historical usage trends that compare the usage between core and custom components. You can also see how components are adopted across projects.

These powerful visualizations enable developers to easily get the data points they need, start tracking adoption instantly. Oh, again — no need to build and maintain any custom scripts or visualizations.

Create custom analysis
Depending on your design system maturity, your team might need to track different metrics, measure different things. That’s why Omlet also lets you create custom analysis.

For example, it’s pretty common for teams to iterate on their design system and maintain multiple versions. In that case, you might be wondering how different teams and projects are adopting the latest version. You can do that super quickly in Omlet, just analyze your projects based on tags.

Tag is a concept we introduced in Omlet to help you group your components. Tags are customizable, and you can tag your components based on different properties, depending on your needs.

Catalog your components
Omlet automatically collects all your reusable and custom components across all projects. It’s easy to search for components, and also filter them by their name, tag, date created, and other criteria.

This is a great way to list and review all components across all your projects — you can quickly see what new custom components are being created and review whether they should be added to your design system.

View relationships between components
With the Dependency Tree, you can easily see the relationship between components. How many children they have, and more importantly, where exactly they’re being used.

This visualization gives you the confidence you need when you update a component.

With this first iteration, Omlet helps you accomplish 3 things:

1. Measure component success: You have simple out-of-the-box charts to track adoption immediately. No need for custom scripts or visualizations.
2. Identify emerging patterns: You can find out which specific components are being created and used over time, also drill into which projects and teams are using them.
3. Make updates with more confidence: With the component dependency tree, you can quickly see where components are used so you can understand how a change would impact your projects.

What’s next?

This is only the beginning, we want Omlet to be an end-to-end toolchain for developers to increase design system adoption in the codebase. We’ve started by focusing on providing visibility on adoption through analytics, but down the line we want to go beyond usage analytics and support developers as they code, pointing them to the right design system resources.

Thank you — and join the public beta!

Thank you to our amazing community of developers who have participated in countless calls, surveys, research groups, and more. Your feedback has allowed us to build Omlet and we’re so excited to launch Omlet in public beta today.

🔗 Join the public beta

Join the public beta today and start measuring the success of your components — we can’t wait to hear what you all think. If you have any feedback, ping us in our Discord community.