[{"data":1,"prerenderedAt":559},["ShallowReactive",2],{"navigation_docs":3,"-reference-compatibility":113,"-reference-compatibility-surround":554},[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":84,"body":115,"description":547,"extension":548,"links":549,"meta":550,"navigation":551,"path":85,"seo":552,"stem":86,"__hash__":553},"docs\u002F3.reference\u002F1.compatibility.md",{"type":116,"value":117,"toc":542},"minimark",[118,127,152,155,381,384,422,427,517,520,532],[119,120,121,122,126],"p",{},"Two questions decide whether quello works on a project, and they are ",[123,124,125],"strong",{},"independent",":",[128,129,130,143],"ul",{},[131,132,133,134,137,138,142],"li",{},"the ",[123,135,136],{},"builder"," decides ",[139,140,141],"em",{},"how quello gets in"," — a plugin, a virtual module, or the CLI beside it;",[131,144,133,145,137,148,151],{},[123,146,147],{},"framework",[139,149,150],{},"what a pick can know"," — whether its runtime leaves anything on the DOM\nidentifying the component that rendered an element.",[119,153,154],{},"So Vue on webpack gets in the webpack way and still reports Vue components, while Solid on Vite gets\nin the easy way and reports none. Neither axis constrains the other.",[156,157,158,181],"table",{},[159,160,161],"thead",{},[162,163,164,168,170,172,175,178],"tr",{},[165,166,167],"th",{},"Framework",[165,169,38],{},[165,171,63],{},[165,173,174],{},"Its own toolchain",[165,176,177],{},"No bundler",[165,179,180],{},"What a pick knows",[182,183,184,207,225,243,261,282,301,319,345,363],"tbody",{},[162,185,186,192,195,198,201,204],{},[187,188,189],"td",{},[123,190,191],{},"Vue",[187,193,194],{},"✅ plugin",[187,196,197],{},"○ plugin",[187,199,200],{},"—",[187,202,203],{},"○ CLI",[187,205,206],{},"component, file",[162,208,209,214,216,218,220,222],{},[187,210,211],{},[123,212,213],{},"React",[187,215,194],{},[187,217,197],{},[187,219,200],{},[187,221,203],{},[187,223,224],{},"component, file, line¹",[162,226,227,232,234,236,238,240],{},[187,228,229],{},[123,230,231],{},"Svelte",[187,233,194],{},[187,235,197],{},[187,237,200],{},[187,239,203],{},[187,241,242],{},"component, file, line, column",[162,244,245,250,252,254,256,258],{},[187,246,247],{},[123,248,249],{},"Solid",[187,251,194],{},[187,253,197],{},[187,255,200],{},[187,257,203],{},[187,259,260],{},"selector, path, text",[162,262,263,267,274,276,278,280],{},[187,264,265],{},[123,266,43],{},[187,268,269,270],{},"✅ ",[271,272,273],"code",{},"virtual:quello",[187,275,200],{},[187,277,200],{},[187,279,200],{},[187,281,206],{},[162,283,284,288,292,294,296,298],{},[187,285,286],{},[123,287,48],{},[187,289,269,290],{},[271,291,273],{},[187,293,200],{},[187,295,200],{},[187,297,200],{},[187,299,300],{},"component, file, line",[162,302,303,307,311,313,315,317],{},[187,304,305],{},[123,306,53],{},[187,308,269,309],{},[271,310,273],{},[187,312,200],{},[187,314,200],{},[187,316,200],{},[187,318,260],{},[162,320,321,326,328,336,340,342],{},[187,322,323],{},[123,324,325],{},"Next",[187,327,200],{},[187,329,269,330],{},[331,332,333],"a",{"href":59},[271,334,335],{},"@quello\u002Fnext",[187,337,269,338],{},[271,339,335],{},[187,341,200],{},[187,343,344],{},"component, file¹",[162,346,347,351,353,355,358,360],{},[187,348,349],{},[123,350,68],{},[187,352,200],{},[187,354,200],{},[187,356,357],{},"✅ CLI",[187,359,200],{},[187,361,362],{},"component",[162,364,365,371,373,375,377,379],{},[187,366,367,370],{},[123,368,369],{},"None"," (html\u002Fjs\u002Fcss)",[187,372,197],{},[187,374,194],{},[187,376,200],{},[187,378,357],{},[187,380,260],{},[119,382,383],{},"✅ verified in a playground · ○ supported, not exercised · — not a combination that exists",[385,386,388,415],"note",{"title":387},"¹ React's source location follows the React version, not the bundler",[119,389,390,391,394,395,398,399,402,403,406,407,410,411,414],{},"React ≤ 18 annotates each element with ",[271,392,393],{},"_debugSource"," — file, line and column — when the JSX\ncompiler emits ",[271,396,397],{},"__source",", which both Babel's development transform and SWC do. React 19 removed it\nin favour of ",[123,400,401],{},"owner stacks",": an ",[271,404,405],{},"Error"," captured where the element was written. quello reads both,\nbut a stack frame addresses the ",[139,408,409],{},"compiled"," module and a browser does not run ",[271,412,413],{},"error.stack"," through\nsource maps — so on React 19 a pick carries the file without the line.",[119,416,417,418,421],{},"Next's App Router bundles React 19 whatever your ",[271,419,420],{},"package.json"," says, which is why its row stops at\nthe file. A Vite project on React 18 still reports the line, and will stop when it upgrades.",[423,424,426],"h2",{"id":425},"what-each-framework-exposes","What each framework exposes",[156,428,429,441],{},[159,430,431],{},[162,432,433,435,438],{},[165,434,167],{},[165,436,437],{},"Read from",[165,439,440],{},"Yields",[182,442,443,462,484,499],{},[162,444,445,449,459],{},[187,446,447],{},[123,448,191],{},[187,450,451,454,455,458],{},[271,452,453],{},"__vueParentComponent",", or a ",[271,456,457],{},"data-v-inspector"," attribute",[187,460,461],{},"name, source file",[162,463,464,468,481],{},[187,465,466],{},[123,467,213],{},[187,469,133,470,473,474,476,477,480],{},[271,471,472],{},"__reactFiber$…"," key, walked to the nearest named component; ",[271,475,393],{}," (React ≤ 18) or the owner stack in ",[271,478,479],{},"_debugStack"," (React 19)",[187,482,483],{},"name, file, line¹",[162,485,486,490,496],{},[187,487,488],{},[123,489,231],{},[187,491,492,495],{},[271,493,494],{},"__svelte_meta.loc",", left on every element the dev build creates",[187,497,498],{},"name, file, line, column",[162,500,501,505,514],{},[187,502,503],{},[123,504,68],{},[187,506,507,510,511],{},[271,508,509],{},"window.ng.getComponent"," \u002F ",[271,512,513],{},"getOwningComponent",[187,515,516],{},"name",[119,518,519],{},"Two frameworks deliberately have no detector:",[128,521,522,527],{},[131,523,524,526],{},[123,525,249],{}," compiles its reactivity away. At runtime there is no component instance to find — this\nis the architecture, not a missing API.",[131,528,529,531],{},[123,530,53],{}," annotates elements in dev, but its dev toolbar strips those attributes from the DOM as\nit loads, and turning the toolbar off stops them being emitted. They are that tool's private\ndetail rather than an API.",[119,533,534,535,537,538,541],{},"Where nothing answers, ",[271,536,147],{}," is ",[271,539,540],{},"null"," and the selector, DOM path and text carry the pick.",{"title":543,"searchDepth":544,"depth":544,"links":545},"",2,[546],{"id":425,"depth":544,"text":426},"Which frameworks and builders work, and what each pick can know.","md",null,{},{"icon":87},{"title":84,"description":547},"pQ0wr5mNl5w2rKrv_Qa-LnFjRPunAjnoJQQRTerbz4E",[555,557],{"title":73,"path":74,"stem":75,"description":556,"icon":76,"children":-1},"No framework, no bundler — quello runs the whole thing.",{"title":89,"path":90,"stem":91,"description":558,"icon":92,"children":-1},"Every option the Vite and webpack plugins take.",1788454295357]