[{"data":1,"prerenderedAt":578},["ShallowReactive",2],{"navigation_docs":3,"landing":113},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":115,"body":116,"description":115,"extension":571,"meta":572,"navigation":366,"path":573,"seo":574,"stem":576,"__hash__":577},"landing\u002Findex.md","",{"type":117,"value":118,"toc":569},"minimark",[119,171,211,220,496,556,560,565],[120,121,123,133,136,152,166],"u-page-hero",{"orientation":122},"vertical",[124,125,126],"template",{"v-slot:headline":115},[127,128,132],"u-badge",{"color":129,"size":130,"variant":131},"neutral","lg","subtle","Dev-only · zero dependencies",[124,134,135],{"v-slot:title":115},"Point at it, then say \"quello\"",[124,137,138,139,143,144,147,148,151],{"v-slot:description":115},"Stop describing the button. Click it. quello is a visual element picker for AI coding agents —\nwhat you pick lands in ",[140,141,142],"code",{},".quello\u002Fpicks.json"," as ",[140,145,146],{},"PICK 1",", ",[140,149,150],{},"PICK 2",", … so your agent knows exactly\nwhich component you mean.",[124,153,154,160],{"v-slot:links":115},[155,156,159],"u-button",{"size":157,"to":17,"trailing-icon":158},"xl","i-lucide-arrow-right","Get started",[155,161,165],{"size":157,"to":162,"color":129,"icon":163,"target":164,"variant":131},"https:\u002F\u002Fgithub.com\u002FLinko91\u002Fquello","i-simple-icons-github","_blank","View on GitHub",[124,167,168],{"v-slot:bottom":115},[169,170],"hero-demo",{},[172,173,176],"u-page-section",{"description":174,"title":175},"The toolbar rides along with your dev server. Nothing to wire up, nothing to describe.","Three steps, no prose",[124,177,178,188,199],{"v-slot:features":115},[179,180,182,185],"u-page-feature",{"icon":181},"i-lucide-toggle-right",[124,183,184],{"v-slot:title":115},"1 · Arm the picker",[124,186,187],{"v-slot:description":115},"Hit the toolbar — or the keyboard shortcut. Hover anything and quello outlines it, naming\nthe tag and the component that owns it.",[179,189,190,193],{"icon":24},[124,191,192],{"v-slot:title":115},"2 · Click what you mean",[124,194,195,196,198],{"v-slot:description":115},"Each click pins a numbered badge to the element and appends the pick to\n",[140,197,142],{},". Add a note if the change needs one.",[179,200,202,205],{"icon":201},"i-lucide-sparkles",[124,203,204],{"v-slot:title":115},"3 · Say \"quello\"",[124,206,207,210],{"v-slot:description":115},[140,208,209],{},"\"make PICK 2 a link instead\"",". Your agent reads the file and gets the selector, the source\nfile, the line and the computed styles.",[172,212,215],{"description":213,"title":214},"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.","Write the change on the pick",[124,216,217],{"v-slot:bottom":115},[218,219],"notes-demo",{},[172,221,224,305],{"description":222,"title":223},"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.","Install it where you already are",[225,226,227,255,271,288],"code-group",{},[228,229,234],"pre",{"className":230,"code":231,"filename":232,"language":233,"meta":115,"style":115},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D vite-plugin-quello\n","vite","bash",[140,235,236],{"__ignoreMap":115},[237,238,241,245,249,252],"span",{"class":239,"line":240},"line",1,[237,242,244],{"class":243},"sBMFI","pnpm",[237,246,248],{"class":247},"sfazB"," add",[237,250,251],{"class":247}," -D",[237,253,254],{"class":247}," vite-plugin-quello\n",[228,256,258],{"className":230,"code":257,"filename":63,"language":233,"meta":115,"style":115},"pnpm add -D webpack-plugin-quello\n",[140,259,260],{"__ignoreMap":115},[237,261,262,264,266,268],{"class":239,"line":240},[237,263,244],{"class":243},[237,265,248],{"class":247},[237,267,251],{"class":247},[237,269,270],{"class":247}," webpack-plugin-quello\n",[228,272,275],{"className":230,"code":273,"filename":274,"language":233,"meta":115,"style":115},"pnpm add -D @quello\u002Fnext\n","next",[140,276,277],{"__ignoreMap":115},[237,278,279,281,283,285],{"class":239,"line":240},[237,280,244],{"class":243},[237,282,248],{"class":247},[237,284,251],{"class":247},[237,286,287],{"class":247}," @quello\u002Fnext\n",[228,289,292],{"className":230,"code":290,"filename":291,"language":233,"meta":115,"style":115},"pnpm add -D quello-cli\n","any dev server",[140,293,294],{"__ignoreMap":115},[237,295,296,298,300,302],{"class":239,"line":240},[237,297,244],{"class":243},[237,299,248],{"class":247},[237,301,251],{"class":247},[237,303,304],{"class":247}," quello-cli\n",[225,306,307,417,471],{},[228,308,313],{"className":309,"code":310,"filename":311,"language":312,"meta":115,"style":115},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'vite'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  plugins: [quello()],\n})\n","vite.config.ts","ts",[140,314,315,343,361,368,386,408],{"__ignoreMap":115},[237,316,317,321,325,329,332,335,338,340],{"class":239,"line":240},[237,318,320],{"class":319},"s7zQu","import",[237,322,324],{"class":323},"sMK4o"," {",[237,326,328],{"class":327},"sTEyZ"," defineConfig",[237,330,331],{"class":323}," }",[237,333,334],{"class":319}," from",[237,336,337],{"class":323}," '",[237,339,232],{"class":247},[237,341,342],{"class":323},"'\n",[237,344,346,348,351,354,356,359],{"class":239,"line":345},2,[237,347,320],{"class":319},[237,349,350],{"class":327}," quello ",[237,352,353],{"class":319},"from",[237,355,337],{"class":323},[237,357,358],{"class":247},"vite-plugin-quello",[237,360,342],{"class":323},[237,362,364],{"class":239,"line":363},3,[237,365,367],{"emptyLinePlaceholder":366},true,"\n",[237,369,371,374,377,380,383],{"class":239,"line":370},4,[237,372,373],{"class":319},"export",[237,375,376],{"class":319}," default",[237,378,328],{"class":379},"s2Zo4",[237,381,382],{"class":327},"(",[237,384,385],{"class":323},"{\n",[237,387,389,393,396,399,402,405],{"class":239,"line":388},5,[237,390,392],{"class":391},"swJcz","  plugins",[237,394,395],{"class":323},":",[237,397,398],{"class":327}," [",[237,400,401],{"class":379},"quello",[237,403,404],{"class":327},"()]",[237,406,407],{"class":323},",\n",[237,409,411,414],{"class":239,"line":410},6,[237,412,413],{"class":323},"}",[237,415,416],{"class":327},")\n",[228,418,421],{"className":309,"code":419,"filename":420,"language":312,"meta":115,"style":115},"import { withQuello } from '@quello\u002Fnext'\n\nexport default withQuello({\n  \u002F\u002F your Next config\n})\n","next.config.ts",[140,422,423,443,447,459,465],{"__ignoreMap":115},[237,424,425,427,429,432,434,436,438,441],{"class":239,"line":240},[237,426,320],{"class":319},[237,428,324],{"class":323},[237,430,431],{"class":327}," withQuello",[237,433,331],{"class":323},[237,435,334],{"class":319},[237,437,337],{"class":323},[237,439,440],{"class":247},"@quello\u002Fnext",[237,442,342],{"class":323},[237,444,445],{"class":239,"line":345},[237,446,367],{"emptyLinePlaceholder":366},[237,448,449,451,453,455,457],{"class":239,"line":363},[237,450,373],{"class":319},[237,452,376],{"class":319},[237,454,431],{"class":379},[237,456,382],{"class":327},[237,458,385],{"class":323},[237,460,461],{"class":239,"line":370},[237,462,464],{"class":463},"sHwdD","  \u002F\u002F your Next config\n",[237,466,467,469],{"class":239,"line":388},[237,468,413],{"class":323},[237,470,416],{"class":327},[228,472,475],{"className":230,"code":473,"filename":474,"language":233,"meta":115,"style":115},"# nothing to configure: point it at the dev server you already run\nnpx quello --url http:\u002F\u002Flocalhost:3000\n","terminal",[140,476,477,482],{"__ignoreMap":115},[237,478,479],{"class":239,"line":240},[237,480,481],{"class":463},"# nothing to configure: point it at the dev server you already run\n",[237,483,484,487,490,493],{"class":239,"line":345},[237,485,486],{"class":243},"npx",[237,488,489],{"class":247}," quello",[237,491,492],{"class":247}," --url",[237,494,495],{"class":247}," http:\u002F\u002Flocalhost:3000\n",[172,497,500],{"description":498,"title":499},"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.","Describing an element is the slow part",[124,501,502,511,520,529,538,547],{"v-slot:features":115},[179,503,505,508],{"icon":504},"i-lucide-file-code-2",[124,506,507],{"v-slot:title":115},"Straight to the source",[124,509,510],{"v-slot:description":115},"Vue, React, Svelte and Angular internals are read to name the component and, where the\nframework exposes it, the file and line.",[179,512,514,517],{"icon":513},"i-lucide-message-square-quote",[124,515,516],{"v-slot:title":115},"Notes your agent acts on",[124,518,519],{"v-slot:description":115},"Attach an instruction to a pick, then say \"resolve the picks\" and let the agent work through\nthem.",[179,521,523,526],{"icon":522},"i-lucide-scan-search",[124,524,525],{"v-slot:title":115},"Everything it can see",[124,527,528],{"v-slot:description":115},"Selector, DOM path, attributes, text, computed styles and the element's box — the things a\nvisual request actually depends on.",[179,530,532,535],{"icon":531},"i-lucide-plug",[124,533,534],{"v-slot:title":115},"Any bundler, or none",[124,536,537],{"v-slot:description":115},"A Vite plugin, a webpack plugin, a Next package, or a CLI that runs beside whatever dev server\nyou already have.",[179,539,541,544],{"icon":540},"i-lucide-shield",[124,542,543],{"v-slot:title":115},"Development only",[124,545,546],{"v-slot:description":115},"Nothing reaches a production build. The plugins are dev-only and disable themselves when\nbuilding.",[179,548,550,553],{"icon":549},"i-lucide-package",[124,551,552],{"v-slot:title":115},"Zero dependencies",[124,554,555],{"v-slot:description":115},"The runtime has none, and its UI lives in a shadow root so it cannot collide with your styles.",[172,557],{"description":558,"title":135,":links":559},"Two minutes to install, and the last time you describe a button in prose.","[{\"label\":\"Get started\",\"to\":\"\u002Fgetting-started\u002Finstallation\",\"trailingIcon\":\"i-lucide-arrow-right\",\"size\":\"xl\"},{\"label\":\"Read the pick object\",\"to\":\"\u002Freference\u002Fpick-object\",\"color\":\"neutral\",\"variant\":\"subtle\",\"size\":\"xl\"}]",[172,561],{"description":562,"title":563,":links":564},"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.","Maintained by one person","[{\"label\":\"Sponsor quello\",\"to\":\"\u002Fsponsor\",\"trailingIcon\":\"i-lucide-heart\",\"color\":\"neutral\",\"variant\":\"subtle\"}]",[566,567,568],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":115,"searchDepth":345,"depth":345,"links":570},[],"md",{},"\u002F",{"title":135,"description":575},"A visual element picker for AI coding agents. Click elements in your running app; quello writes them to .quello\u002Fpicks.json so your agent knows exactly which component you mean.","index","XQ3kd67EO3AzDA7xQnyenXr-1E82YpxjrQS_6hWypX4",1788386585772]