Omlet Docs
BlogChangelogAsk the CommunityContact Sales
  • Get started
    • What is Omlet?
    • CLI & Dashboard
  • Omlet for VS Code
  • CLI & Dashboard
    • CLI
      • Your first scan
      • Set up your dashbard
      • Future scans
      • Ensure data accuracy
      • Config file
        • Exports configuration
        • Mapping aliases
        • Excluding certain components & files
        • Tutorial: Config file
      • Custom component properties
        • CLI hooks
        • Tutorial 1: Team/code owner usage
        • Tutorial 2: Package version tracking
        • Other example scripts
      • Set up regular scans
      • CLI commands
        • init
        • analyze
        • login
    • Analytics
      • Popular charts
      • Create custom charts
      • Save charts to dashboard
      • Share charts and dashboards with your team
      • Download chart data
    • Components
      • Search and filter components
      • Component tags
      • Dependency Tree
      • Props tracking
    • Workspace & Account
      • Invite team members
      • Renaming projects
      • Update your email address
      • Access your billing details & invoices
  • Security
    • Security in Omlet
    • Data collection
  • Help
    • Pricing
    • FAQs
      • How detection works?
      • Monorepo support
      • How to delete scans?
      • Omlet vs. React Scanner
      • Working with multiple workspaces
    • Troubleshooting
      • Debugging CLI issues
      • Some components aren't detected
      • API failed or timeout
      • Are you behind a proxy?
      • Troubleshooting Git errors
Powered by GitBook
On this page
  • Scan your codebase with CLI
  • Tag your components
  • Get quick insights
  • Future scans
  • Next steps
  1. Get started

CLI & Dashboard

Step-by-step tutorial to help you get started with Omlet.

PreviousWhat is Omlet?NextOmlet for VS Code

Last updated 4 months ago

Omlet comes in two parts:

  • CLI: Scans your codebase and generates analytics data.

  • App: Helps you visualize the data from Omlet CLI so you can explore your components and their usage.

1

Scan your codebase with CLI

Make your design system and the application repositories locally available, or use an open-source project such as for this tutorial.

No access to codebase?

You can to scan the repositories. While waiting for a scan, explore the app using our .

Navigate to the root of the repo you wish to scan and run:

npx @omlet/cli init
yarn dlx @omlet/cli init
pnpm dlx @omlet/cli init

This will install the latest version of the CLI and then open the browser to log in to your Omlet account. Once you log in, the CLI will start scanning your repository.

You can then follow the link to your workspace to complete the setup.

2

Tag your components

Create a tag to reference your design system components and select the packages or folders that contain those components.

You can create additional tags to identify different components, such as the legacy components you've deprecated. This step is optional — you can always later on.

3

Get quick insights

Congrats! You completed the setup. On the Analytics page, Omlet provides some default charts to give you a high-level overview of your design system.

The first chart shows you the overall adoption over time. Since this is your first scan, you'll only see the information for today. It will expand when you upload more scans with CLI. Hop in and explore the analytics page. Other charts here will also give you .

You can also create custom charts to track other sets of components or different metrics. You can click on a chart and modify its filters to create your custom analysis—or use the "Create new analysis" button on the top-right to start from scratch.

Using the buttons on the top-right, you can share the chart with a teammate or save it to your dashboard to quickly access it in the feature.

Omlet lists all the components scanned from your repositories on the "Components" page. When you click on a component, you'll see its "parent" and "child" components from the Dependency Tree. This allows you to see an overview of which components will be affected if you make changes to a specific component.

The "Props" tab gives your team insights to make decisions on what to add, remove, or adjust in your design system. From there, you can click on a prop to drill down its variables and select the "List usages" button. This will show you where and how the variables of that prop are used in your codebase.

4

Future scans

If you made changes to the repositories you previously scanned or need to add more repositories to your analyses, you can scan them using the analyze command.

npx @omlet/cli analyze
yarn dlx @omlet/cli analyze
pnpm dlx @omlet/cli analyze

Next steps

Yay! Have a better idea of Omlet? Here are the other resources that you can follow to deep-dive into:

🥳
Proton
invite a developer
demo workspace
adjust your tags

Analytics

Learn more about the Popular Charts, create your own dashboard and use tags for custom analysis.

Components

Get insights into individual components, understand the dependency tree and component props tracking.

CLI

Scan more repositories, configure CLI to your specific needs and ensure you have accurate component data.