[{"data":1,"prerenderedAt":380},["ShallowReactive",2],{"navigation_docs":3,"-guides-vanilla":113,"-guides-vanilla-surround":375},[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":368,"extension":369,"links":370,"meta":371,"navigation":372,"path":74,"seo":373,"stem":75,"__hash__":374},"docs\u002F2.guides\u002F8.vanilla.md","Plain HTML",{"type":117,"value":118,"toc":361},"minimark",[119,123,128,158,162,165,191,199,243,247,250,261,264,310,313,317,331,339,343,346,357],[120,121,122],"p",{},"A folder of HTML, a Rails or Laravel app, a Python server, a static site generator quello has never\nheard of. The CLI covers all of it, in two modes.",[124,125,127],"h2",{"id":126},"install","Install",[129,130,136],"pre",{"className":131,"code":132,"filename":133,"language":134,"meta":135,"style":135},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D quello-cli\n","Terminal","bash","",[137,138,139],"code",{"__ignoreMap":135},[140,141,144,148,152,155],"span",{"class":142,"line":143},"line",1,[140,145,147],{"class":146},"sBMFI","pnpm",[140,149,151],{"class":150},"sfazB"," add",[140,153,154],{"class":150}," -D",[140,156,157],{"class":150}," quello-cli\n",[124,159,161],{"id":160},"mode-1-quello-serves-your-files","Mode 1 — quello serves your files",[120,163,164],{},"For a project with no server of its own:",[129,166,168],{"className":131,"code":167,"filename":133,"language":134,"meta":135,"style":135},"npx quello-cli . --serve --port 5181\n",[137,169,170],{"__ignoreMap":135},[140,171,172,175,178,181,184,187],{"class":142,"line":143},[140,173,174],{"class":146},"npx",[140,176,177],{"class":150}," quello-cli",[140,179,180],{"class":150}," .",[140,182,183],{"class":150}," --serve",[140,185,186],{"class":150}," --port",[140,188,190],{"class":189},"sbssI"," 5181\n",[120,192,193,194,198],{},"It serves the folder as static files ",[195,196,197],"strong",{},"and"," answers the picks endpoint, so there is one process and\none origin.",[129,200,205],{"className":201,"code":202,"filename":203,"language":204,"meta":135,"style":135},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript defer src=\"\u002F__quello\u002Fclient.js\">\u003C\u002Fscript>\n","index.html","html",[137,206,207],{"__ignoreMap":135},[140,208,209,213,217,221,224,227,230,233,235,238,240],{"class":142,"line":143},[140,210,212],{"class":211},"sMK4o","\u003C",[140,214,216],{"class":215},"swJcz","script",[140,218,220],{"class":219},"spNyl"," defer",[140,222,223],{"class":219}," src",[140,225,226],{"class":211},"=",[140,228,229],{"class":211},"\"",[140,231,232],{"class":150},"\u002F__quello\u002Fclient.js",[140,234,229],{"class":211},[140,236,237],{"class":211},">\u003C\u002F",[140,239,216],{"class":215},[140,241,242],{"class":211},">\n",[124,244,246],{"id":245},"mode-2-beside-your-own-server","Mode 2 — beside your own server",[120,248,249],{},"For a project already running on its own port:",[129,251,253],{"className":131,"code":252,"filename":133,"language":134,"meta":135,"style":135},"npx quello-cli\n",[137,254,255],{"__ignoreMap":135},[140,256,257,259],{"class":142,"line":143},[140,258,174],{"class":146},[140,260,157],{"class":150},[120,262,263],{},"It answers only the endpoint, on 5100, cross-origin. Point the tag at it:",[129,265,267],{"className":201,"code":266,"language":204,"meta":135,"style":135},"\u003Cscript defer src=\"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fclient.js\"\n        data-quello-endpoint=\"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fpicks\">\u003C\u002Fscript>\n",[137,268,269,289],{"__ignoreMap":135},[140,270,271,273,275,277,279,281,283,286],{"class":142,"line":143},[140,272,212],{"class":211},[140,274,216],{"class":215},[140,276,220],{"class":219},[140,278,223],{"class":219},[140,280,226],{"class":211},[140,282,229],{"class":211},[140,284,285],{"class":150},"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fclient.js",[140,287,288],{"class":211},"\"\n",[140,290,292,295,297,299,302,304,306,308],{"class":142,"line":291},2,[140,293,294],{"class":219},"        data-quello-endpoint",[140,296,226],{"class":211},[140,298,229],{"class":211},[140,300,301],{"class":150},"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fpicks",[140,303,229],{"class":211},[140,305,237],{"class":211},[140,307,216],{"class":215},[140,309,242],{"class":211},[120,311,312],{},"The CLI prints this tag on startup, filled in with whatever port and options you gave it.",[124,314,316],{"id":315},"options","Options",[129,318,320],{"className":131,"code":319,"filename":133,"language":134,"meta":135,"style":135},"npx quello-cli --help\n",[137,321,322],{"__ignoreMap":135},[140,323,324,326,328],{"class":142,"line":143},[140,325,174],{"class":146},[140,327,177],{"class":150},[140,329,330],{"class":150}," --help\n",[120,332,333,334,338],{},"See the ",[335,336,337],"a",{"href":95},"CLI reference"," for the full list.",[124,340,342],{"id":341},"what-a-pick-will-know","What a pick will know",[120,344,345],{},"Selector, DOM path, text, attributes, computed style and rect — everything except a component name,\nbecause there is no framework runtime to ask.",[120,347,348,349,352,353,356],{},"In practice that is enough: ",[137,350,351],{},"#counter",", the text ",[137,354,355],{},"Clicked 0 times"," and the DOM path locate an\nelement in a codebase quickly, and your note tells the agent what to do with it.",[358,359,360],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":135,"searchDepth":291,"depth":291,"links":362},[363,364,365,366,367],{"id":126,"depth":291,"text":127},{"id":160,"depth":291,"text":161},{"id":245,"depth":291,"text":246},{"id":315,"depth":291,"text":316},{"id":341,"depth":291,"text":342},"No framework, no bundler — quello runs the whole thing.","md",null,{},{"title":73,"icon":76},{"title":115,"description":368},"gw3zA4QkjIybrHSRYt0rzXagAftKkMjjxDjlnOHvfNM",[376,378],{"title":68,"path":69,"stem":70,"description":377,"icon":71,"children":-1},"Angular's dev server is not configurable, so quello runs beside it.",{"title":84,"path":85,"stem":86,"description":379,"icon":87,"children":-1},"Which frameworks and builders work, and what each pick can know.",1788454296815]