Dependency Tree

Learn the Dependency Tree and how it can help improve your design system.

Dependency Tree helps you see and track the relationship between components. It allows you to make development decisions confidently, such as which components will be affected if you change a specific component.

Parent vs. Child components

Omlet displays where a component is used and which components it contains, in other words, its "parent" and "child" components.

The parent components are displayed on the left side of the canvas, while the child components are on the right. For instance, in the below example, the Toolbar uses the Button component, and the Dialog component uses the Toolbar.

Highlight the parent/child relationships

To highlight the relationship, you can pan around in the canvas and hover over a parent or child component.

Filter components in the dependency tree

You can also have a focused view by filtering the dependency tree for a parent or child component. To do this, head to the components table on the right and select one of the components. You can use the filter options to locate a specific component you're looking for.