Dev-only · zero dependencies

Point at it, then say "quello"

Stop describing the button. Click it. quello is a visual element picker for AI coding agents — what you pick lands in .quello/picks.json as PICK 1, PICK 2, … so your agent knows exactly which component you mean.

Get started View on GitHub

localhost:5173dev only

Workspace

Billing

MRR

$48.2k

Churn

1.8%

Seats

126

.quello/picks.jsonwritten on every pick

{
  "version": 1,
  "picks": [
    {
      "id": 1,
      "label": "PICK 1",
      "selector": "button.cta",
      "text": "Upgrade plan",
      "framework": { "component": "PricingCta",
                     "file": "src/components/PricingCta.vue",
                     "line": 42 }
    },
    {
      "id": 2,
      "label": "PICK 2",
      "selector": "div.stat--churn",
      "text": "Churn 1.8%",
      "framework": { "component": "StatCard",
                     "file": "src/components/StatCard.vue",
                     "line": 18 }
    }
  ]
}

“make PICK 2 a link instead”— and the agent knows which one.

Three steps, no prose

The toolbar rides along with your dev server. Nothing to wire up, nothing to describe.

1 · Arm the picker

Hit the toolbar — or the keyboard shortcut. Hover anything and quello outlines it, naming the tag and the component that owns it.

2 · Click what you mean

Each click pins a numbered badge to the element and appends the pick to .quello/picks.json. Add a note if the change needs one.

3 · Say "quello"

"make PICK 2 a link instead". Your agent reads the file and gets the selector, the source file, the line and the computed styles.

Write the change on the pick

A pick can carry an instruction. Click its badge, say what should happen, and the badge marks itself as annotated. When a few of them are, one sentence hands the lot over — the agent works through every annotated pick in order.

Billing2 picks

Churn

1.8%

Note for PICK 1

What should the agent do with this element?

Enter saves · Shift+Enter for a line break

your coding agentreads .quello/picks.json

› resolve the picks

1
src/components/PricingCta.vue:42
“make it full width on mobile”
2
src/components/StatCard.vue:18
“same padding as the card above”

Picks without a note are bookmarks — the agent leaves those alone.

Install it where you already are

A plugin for your bundler, a package for Next, or a CLI that runs beside whatever dev server you have. All of them are dev-only and disable themselves on build.

pnpm add -D vite-plugin-quello

pnpm add -D webpack-plugin-quello

pnpm add -D @quello/next

pnpm add -D quello-cli

import { defineConfig } from 'vite'
import quello from 'vite-plugin-quello'

export default defineConfig({
  plugins: [quello()],
})

import { withQuello } from '@quello/next'

export default withQuello({
  // your Next config
})

# nothing to configure: point it at the dev server you already run
npx quello --url http://localhost:3000

Describing an element is the slow part

You know which element you mean. Getting an agent to know is the work — a selector, a component name, a file path, three sentences of "the one under the header, not the other one". quello replaces all of that with a click.

Straight to the source

Vue, React, Svelte and Angular internals are read to name the component and, where the framework exposes it, the file and line.

Notes your agent acts on

Attach an instruction to a pick, then say "resolve the picks" and let the agent work through them.

Everything it can see

Selector, DOM path, attributes, text, computed styles and the element's box — the things a visual request actually depends on.

Any bundler, or none

A Vite plugin, a webpack plugin, a Next package, or a CLI that runs beside whatever dev server you already have.

Development only

Nothing reaches a production build. The plugins are dev-only and disable themselves when building.

Zero dependencies

The runtime has none, and its UI lives in a shadow root so it cannot collide with your styles.

Point at it, then say "quello"

Two minutes to install, and the last time you describe a button in prose.

Get started Read the pick object

Maintained by one person

quello is MIT and free to use. Sponsoring helps cover the time it takes to keep it working as Vite, webpack, Next and the rest keep changing.

Sponsor quello