Reference
Compatibility
Which frameworks and builders work, and what each pick can know.
Two questions decide whether quello works on a project, and they are independent:
- the builder decides how quello gets in — a plugin, a virtual module, or the CLI beside it;
- the framework decides what a pick can know — whether its runtime leaves anything on the DOM identifying the component that rendered an element.
So Vue on webpack gets in the webpack way and still reports Vue components, while Solid on Vite gets in the easy way and reports none. Neither axis constrains the other.
| Framework | Vite | webpack | Its own toolchain | No bundler | What a pick knows |
|---|---|---|---|---|---|
| Vue | ✅ plugin | ○ plugin | — | ○ CLI | component, file |
| React | ✅ plugin | ○ plugin | — | ○ CLI | component, file, line¹ |
| Svelte | ✅ plugin | ○ plugin | — | ○ CLI | component, file, line, column |
| Solid | ✅ plugin | ○ plugin | — | ○ CLI | selector, path, text |
| Nuxt | ✅ virtual:quello | — | — | — | component, file |
| SvelteKit | ✅ virtual:quello | — | — | — | component, file, line |
| Astro | ✅ virtual:quello | — | — | — | selector, path, text |
| Next | — | ✅ @quello/next | ✅ @quello/next | — | component, file² |
| Angular | — | — | ✅ CLI | — | component |
| None (html/js/css) | ○ plugin | ✅ plugin | — | ✅ CLI | selector, path, text |
✅ verified in a playground · ○ supported, not exercised · — not a combination that exists
React ≤ 18 annotates each element with
_debugSource — file, line and column — when the JSX
compiler emits __source, which both Babel's development transform and SWC do. React 19 removed it
in favour of owner stacks: an Error captured where the element was written. quello reads both,
but a stack frame addresses the compiled module and a browser does not run error.stack through
source maps — so on React 19 a pick carries the file without the line.Next's App Router bundles React 19 whatever your package.json says, which is why its row stops at
the file. A Vite project on React 18 still reports the line, and will stop when it upgrades.The repository keeps both halves under test by hand: the react18 and react19 playgrounds are the
same app on the same Vite and the same @vitejs/plugin-react, differing only in the React version,
so picking the same element in each shows the line appear and disappear.Both Next majors read owner stacks, but what a frame names depends on what compiled it. webpack
names the source —
webpack-internal:///(rsc)/./app/page.tsx normalises back to app/page.tsx.
Turbopack, the default from Next 16 on, names the chunk that happens to hold the module,
/_next/static/chunks/_0ltyzvd._.js. That is a real file and exactly the wrong one, so quello drops
the frame rather than pointing an agent at a bundle: a Next 16 pick carries the component, the
selector and the DOM path, without a file.The next15 and next16 playgrounds run one each.What each framework exposes
| Framework | Read from | Yields |
|---|---|---|
| Vue | __vueParentComponent, or a data-v-inspector attribute | name, source file |
| React | the __reactFiber$… key, walked to the nearest named component; _debugSource (React ≤ 18) or the owner stack in _debugStack (React 19) | name, file, line¹ |
| Svelte | __svelte_meta.loc, left on every element the dev build creates | name, file, line, column |
| Angular | window.ng.getComponent / getOwningComponent | name |
Two frameworks deliberately have no detector:
- Solid compiles its reactivity away. At runtime there is no component instance to find — this is the architecture, not a missing API.
- Astro annotates elements in dev, but its dev toolbar strips those attributes from the DOM as it loads, and turning the toolbar off stops them being emitted. They are that tool's private detail rather than an API.
Where nothing answers, framework is null and the selector, DOM path and text carry the pick.