> ## Documentation Index
> Fetch the complete documentation index at: https://dapplets.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Picker tool

> Picker — a tool that allows users to select a contextual area on a web page in order to perform actions on it or extract useful data. This tool is provided by the platform for application developers, who define how and for what purposes the Picker will be used.

## Picker Example

To try out the Picker in action, you can use the Picker Example application.

<CardGroup cols={1}>
  <Card title="Install the Mutable Web extension from Chrome Web Store" icon="puzzle-piece" href="https://chromewebstore.google.com/detail/mutable-web/cnahdmdbhkphpbpbjjbfdnmbphbenglc">
    Personalize web platforms with additional features and custom layouts.
  </Card>
</CardGroup>

## Picker mode

In the right sidebar, in the central area among the action buttons, select **Run Picker**. Once clicked, the Picker mode will be activated. By moving the cursor around the screen, you can observe context highlighting. The contexts are defined in parser configs that have already been added to our ecosystem.

<img alt="Highlighted contexts" src="https://mintcdn.com/dapplets/wRdVJXf87WLT473Y/images/products/picker/docs-picker-02.png?fit=max&auto=format&n=wRdVJXf87WLT473Y&q=85&s=2a742b52b6f1f4b7cf6c9f99698cff44" width="1920" height="1080" data-path="images/products/picker/docs-picker-02.png" />

## Highlighted contexts

You can see highlights for contexts such as user profiles, post feeds, individual posts, avatars in posts, custom post buttons, and more.

You may also notice highlights on elements of the Mutable Web extension’s sidebar or top panel, as well as on widgets embedded in contexts, such as the **Tipping** application widget.

<img alt="Select Tipping button" src="https://mintcdn.com/dapplets/wRdVJXf87WLT473Y/images/products/picker/docs-picker-03.png?fit=max&auto=format&n=wRdVJXf87WLT473Y&q=85&s=fc5685a9b17fc4c8720e5bc6f2863210" width="1920" height="1080" data-path="images/products/picker/docs-picker-03.png" />

## Interaction with the contexts

If a context is not only highlighted but also filled, with a lightning icon in the center, clicking on it will open a popup with information about this context.

<img alt="Informational popup" src="https://mintcdn.com/dapplets/wRdVJXf87WLT473Y/images/products/picker/docs-picker-04.png?fit=max&auto=format&n=wRdVJXf87WLT473Y&q=85&s=c6be356f1aa2533b3b7033e0e36c010e" width="1920" height="1080" data-path="images/products/picker/docs-picker-04.png" />

## Latch

If there is a button with plus icon or a double lightning icon next to the highlight, the informational popup will open by clicking on it. We call them **Latch** buttons. This way, interaction with the context itself is not restricted.

<img alt="Context action button" src="https://mintcdn.com/dapplets/wRdVJXf87WLT473Y/images/products/picker/docs-picker-05.png?fit=max&auto=format&n=wRdVJXf87WLT473Y&q=85&s=a48042365b6fdd9c715606c1142de965" width="1920" height="1080" data-path="images/products/picker/docs-picker-05.png" />

## Exit Picker mode

To exit Picker mode, click the Close button at the top right of the popup, or click the **Run Picker** button in the sidebar again.

## API

* [`DappletContextPicker`](https://dapplets.mintlify.app/api-references/dapplet-context-picker)

* [`Highlighter`](https://dapplets.mintlify.app/api-references/highlighter)