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.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.