Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/thePrnvBot/dispel-web-stylist/llms.txt

Use this file to discover all available pages before exploring further.

The element picker lets you click any visible DOM element on the current page and supply its outerHTML directly to the AI model before you submit a prompt. Instead of describing an element in words and hoping the model finds the right selector, you hand it the actual markup — including the element’s id, classes, and data attributes — as an unambiguous targeting reference. This is the fastest way to eliminate selector guesswork and ELEMENT_NOT_FOUND errors.

​
How to activate

1

Open the Dispel side panel

Click the Dispel icon in your browser toolbar. The side panel opens alongside the current page.
2

Click the picker icon

In the prompt input area of the side panel, click the picker icon button. The extension sends an ACTIVATE_PICKER message to the content script running on the page.
3

Watch for the crosshair cursor

The page cursor changes to crosshair and a blue 2px outline appears around whichever element your pointer is currently over, indicating that picker mode is active. Moving the mouse shifts the highlight to a new element in real time.

​
Selecting an element

Once the picker is active, click any visible element on the page:
  1. The click is intercepted (preventDefault + stopPropagation) so the page’s own click handlers do not fire.
  2. The element’s outerHTML is cloned and sanitized through a 13-attribute allowlist (see the note below) before leaving the content script.
  3. A human-readable label is derived from the element’s tag name, first two class names, and id (e.g. div.card.featured#hero).
  4. An ELEMENT_PICKED message carries the { outerHTML, label } payload back to the side panel.
  5. The picked element appears as an attachment chip above the prompt text input so you can confirm what was captured before submitting.
The picker sends a sanitized copy of the element’s outerHTML. Only these 13 attributes are preserved on the element and all its descendants: id, class, style, href, role, data-testid, data-qa, type, name, placeholder, src, alt, title. All other attributes are stripped before the HTML leaves the page, keeping the payload compact and free of irrelevant implementation details.

​
How it helps the model

Picked elements are injected into the system prompt in a dedicated SELECTED ELEMENTS section: 
===================
SELECTED ELEMENTS (prioritize styling these)
===================
1. <div.card.featured#hero> <div class="card featured" id="hero">…</div>
The model is instructed to prioritise styling these elements. Because the outerHTML contains the real id, class, and data-attribute values from the live DOM, the model can construct precise, stable selectors (#hero, .card.featured, [data-testid="…"]) rather than guessing based on a textual description alone.
Pick a container element — such as a card wrapper, a section, or a nav bar — rather than a deeply nested child like a single <span>. Targeting a container gives the model room to style the component as a whole, including its children, without writing overly deep selector chains.

​
Cancelling

Picker mode can be cancelled without selecting anything in two ways:

Press Escape

Press the Escape key at any time while picker mode is active. A PICKER_CANCELLED message is sent and the side panel clears the pending selection.

Page navigation

If the page navigates or is hidden while the picker is active, a pagehide event automatically deactivates the picker and restores the original cursor.
When the picker is cancelled, the cursor reverts to its previous state, the blue highlight overlay is removed from the DOM, and no element is appended to the prompt.

​
Limitations

Shadow DOM elements cannot be targeted. The picker traverses the main document DOM tree. Elements rendered inside a Shadow Root — such as those in native Web Components, some browser built-ins, or third-party widgets — are invisible to the picker and cannot be selected. Attempting to style them will result in an ELEMENT_NOT_FOUND error from the model.
  • Complex <svg> and <canvas> elements may yield outerHTML that is too large or too low-signal to help the model. Paths, masks, and <defs> are stripped from the extracted viewport HTML anyway, so picking an SVG container will capture only the outer <svg> tag and its allowed attributes.
  • Dynamically rendered content that appears only after user interaction (tooltips, dropdowns, modals) may not be pickable if it is not present in the DOM at the moment you click the picker icon. Trigger the interaction first to make the element visible, then activate the picker.
  • Only one element can be attached per prompt submission. If you need to target multiple elements, pick the nearest shared container, or submit separate prompts for each element.

Build docs developers (and LLMs) love

Get started for freeTalk to us