Documentation versions (currently viewingVaadin 24)

Component Locator

Use Component Locator to identify components in views and find their source code in your IDE.

You can use the component locator to identify components and to find their code when running applications in development mode. The component locator opens the corresponding source code in your IDE when you click a component (for example, a Button in a view).

Enabling Component Locator

Start by running your Vaadin application project in development mode. Click on the Vaadin symbol }> at the bottom right-hand corner of your browser window — as indicated in the screenshot here.

The Vaadin symbol location in development mode.

Next, go to the Code tab from the menu (see screenshot) and click on Find component in code to initialize the Component Locator.

The Code tab viewed in the Dev tools menu.

Using Component Locator

Now that the Component Locator has been enabled, you’re ready to use it. To highlight a component in red and identify it, hover your pointer over one in the view. The component names appear in a list at the bottom right-hand corner of your browser window. You can use the arrow keys to navigate that list.

Component Locator highlighting and identifying the Button component.

Finally, click on the highlighted component to open the relevant source code in your IDE, as you can see in the screenshot here:

The Button component and corresponding source code.