[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-devtools-app-setup":3,"mdc--q6ymoj-key":35,"related-org-tanstack-devtools-app-setup":4433,"related-repo-tanstack-devtools-app-setup":4572},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":20,"repoUrl":21,"updatedAt":22,"license":23,"forks":24,"topics":25,"repo":30,"sourceUrl":33,"mdContent":34},"devtools-app-setup","configure TanStack Devtools for applications","Install TanStack Devtools, pick framework adapter (React\u002FVue\u002FSolid\u002FPreact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,14,17],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"Frontend","frontend",{"name":18,"slug":19,"type":13},"Debugging","debugging",476,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools","2026-07-16T06:04:05.544655",null,92,[26,27,28,29],"devtool","devtools","react","solidjs",{"repoUrl":21,"stars":20,"forks":24,"topics":31,"description":32},[26,27,28,29],"🤖 Framework-agnostic devtools panel for handling TanStack libraries devtools and your custom devtool plugins","https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools\u002Ftree\u002FHEAD\u002Fpackages\u002Fdevtools\u002Fskills\u002Fdevtools-app-setup","---\nname: devtools-app-setup\ndescription: >\n Install TanStack Devtools, pick framework adapter (React\u002FVue\u002FSolid\u002FPreact),\n register plugins via plugins prop, configure shell (position, hotkeys, theme,\n hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component,\n defaultOpen, localStorage persistence.\ntype: core\nlibrary: '@tanstack\u002Fdevtools'\nlibrary_version: '0.10.12'\nsources:\n - docs\u002Fquick-start.md\n - docs\u002Finstallation.md\n - docs\u002Fconfiguration.md\n - docs\u002Foverview.md\n - packages\u002Fdevtools\u002Fsrc\u002Fcontext\u002Fdevtools-store.ts\n - packages\u002Fvue-devtools\u002Fsrc\u002Ftypes.ts\n - packages\u002Freact-devtools\u002Fsrc\u002Fdevtools.tsx\n---\n\n# TanStack Devtools App Setup\n\n## Setup\n\n### React (primary)\n\nInstall as dev dependencies:\n\n```bash\nnpm install -D @tanstack\u002Freact-devtools @tanstack\u002Fdevtools-vite\n```\n\nMount `TanStackDevtools` at the root of your application:\n\n```tsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\nimport App from '.\u002FApp'\n\ncreateRoot(document.getElementById('root')!).render(\n \u003CStrictMode>\n \u003CApp \u002F>\n \u003CTanStackDevtools \u002F>\n \u003C\u002FStrictMode>,\n)\n```\n\nAdd plugins via the `plugins` prop. Each plugin needs `name` (string) and `render` (JSX element or render function):\n\n```tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\nimport { ReactQueryDevtoolsPanel } from '@tanstack\u002Freact-query-devtools'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack\u002Freact-router-devtools'\n;\u003CTanStackDevtools\n plugins={[\n {\n name: 'TanStack Query',\n render: \u003CReactQueryDevtoolsPanel \u002F>,\n },\n {\n name: 'TanStack Router',\n render: \u003CTanStackRouterDevtoolsPanel \u002F>,\n },\n ]}\n\u002F>\n```\n\n### Vue\n\n```bash\nnpm install -D @tanstack\u002Fvue-devtools\n```\n\nVue uses `component` (not `render`) in plugin definitions. This is the `TanStackDevtoolsVuePlugin` type:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { TanStackDevtools } from '@tanstack\u002Fvue-devtools'\nimport type { TanStackDevtoolsVuePlugin } from '@tanstack\u002Fvue-devtools'\nimport { VueQueryDevtoolsPanel } from '@tanstack\u002Fvue-query-devtools'\n\nconst plugins: TanStackDevtoolsVuePlugin[] = [\n { name: 'Vue Query', component: VueQueryDevtoolsPanel },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CApp \u002F>\n \u003CTanStackDevtools :plugins=\"plugins\" \u002F>\n\u003C\u002Ftemplate>\n```\n\nThe Vite plugin (`@tanstack\u002Fdevtools-vite`) is optional for Vue but recommended for enhanced console logs and go-to-source.\n\n### Solid\n\n```bash\nnpm install -D @tanstack\u002Fsolid-devtools @tanstack\u002Fdevtools-vite\n```\n\n```tsx\nimport { render } from 'solid-js\u002Fweb'\nimport { TanStackDevtools } from '@tanstack\u002Fsolid-devtools'\nimport { SolidQueryDevtoolsPanel } from '@tanstack\u002Fsolid-query-devtools'\nimport App from '.\u002FApp'\n\nrender(\n () => (\n \u003C>\n \u003CApp \u002F>\n \u003CTanStackDevtools\n plugins={[\n {\n name: 'TanStack Query',\n render: \u003CSolidQueryDevtoolsPanel \u002F>,\n },\n ]}\n \u002F>\n \u003C\u002F>\n ),\n document.getElementById('root')!,\n)\n```\n\n### Preact\n\n```bash\nnpm install -D @tanstack\u002Fpreact-devtools @tanstack\u002Fdevtools-vite\n```\n\n```tsx\nimport { render } from 'preact'\nimport { TanStackDevtools } from '@tanstack\u002Fpreact-devtools'\nimport App from '.\u002FApp'\n\nrender(\n \u003C>\n \u003CApp \u002F>\n \u003CTanStackDevtools\n plugins={[\n {\n name: 'Your Plugin',\n render: \u003CYourPluginComponent \u002F>,\n },\n ]}\n \u002F>\n \u003C\u002F>,\n document.getElementById('root')!,\n)\n```\n\n## Core Patterns\n\n### Shell Configuration\n\nPass a `config` prop to `TanStackDevtools` to set initial shell behavior. These values are persisted to `localStorage` after first load and can be changed through the settings panel at runtime.\n\nStorage keys used internally:\n\n- `tanstack_devtools_settings` -- persisted settings\n- `tanstack_devtools_state` -- persisted UI state (active tab, panel height, active plugins, persistOpen)\n\nAll config properties are optional. Defaults shown below:\n\n```tsx\n\u003CTanStackDevtools\n config={{\n defaultOpen: false, \u002F\u002F open panel on mount\n hideUntilHover: false, \u002F\u002F hide trigger until mouse hover\n position: 'bottom-right', \u002F\u002F trigger position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'\n panelLocation: 'bottom', \u002F\u002F panel position: 'top' | 'bottom'\n openHotkey: ['Control', '~'],\n inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],\n requireUrlFlag: false, \u002F\u002F require URL param to show devtools\n urlFlag: 'tanstack-devtools', \u002F\u002F the URL param name when requireUrlFlag is true\n theme: 'dark', \u002F\u002F 'light' | 'dark' (defaults to system preference)\n triggerHidden: false, \u002F\u002F completely hide trigger (hotkey still works)\n }}\n\u002F>\n```\n\n### Event Bus Configuration\n\nThe `eventBusConfig` prop configures the client-side event bus that plugins use for communication:\n\n```tsx\n\u003CTanStackDevtools\n eventBusConfig={{\n debug: false, \u002F\u002F enable debug logging for the event bus\n connectToServerBus: false, \u002F\u002F connect to the Vite plugin server event bus\n port: 3000, \u002F\u002F port for server event bus connection\n }}\n\u002F>\n```\n\nThe server event bus requires the `@tanstack\u002Fdevtools-vite` plugin to be running.\n\n### Plugin Registration with defaultOpen\n\nEach plugin entry can include a `defaultOpen` flag to control whether that plugin tab is active when devtools first opens:\n\n```tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\nimport { FormDevtools } from '@tanstack\u002Freact-form'\n;\u003CTanStackDevtools\n config={{ hideUntilHover: true }}\n eventBusConfig={{ debug: true }}\n plugins={[\n {\n name: 'TanStack Form',\n render: \u003CFormDevtools \u002F>,\n defaultOpen: true,\n },\n ]}\n\u002F>\n```\n\n### Conditional Devtools with URL Flag\n\nUse `requireUrlFlag` to hide devtools unless a specific URL parameter is present. This is useful for staging environments or team-internal debugging:\n\n```tsx\n\u003CTanStackDevtools\n config={{\n requireUrlFlag: true,\n urlFlag: 'tanstack-devtools', \u002F\u002F visit ?tanstack-devtools to enable\n }}\n\u002F>\n```\n\n## Common Mistakes\n\n### CRITICAL: Vue plugin uses `render` instead of `component`\n\nThe Vue adapter uses `component` (a Vue component reference) and optional `props`, not JSX `render`. Using `render` produces a silent failure -- the plugin tab appears but renders nothing.\n\nWrong:\n\n```vue\n\u003C!-- This silently fails - render is ignored in Vue adapter -->\n\u003Cscript setup lang=\"ts\">\nconst plugins = [{ name: 'My Plugin', render: MyComponent }]\n\u003C\u002Fscript>\n```\n\nCorrect:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { TanStackDevtoolsVuePlugin } from '@tanstack\u002Fvue-devtools'\n\nconst plugins: TanStackDevtoolsVuePlugin[] = [\n { name: 'My Plugin', component: MyComponent },\n]\n\u003C\u002Fscript>\n```\n\nThe `TanStackDevtoolsVuePlugin` type enforces this at compile time. Always import and use it.\n\n### HIGH: Vite plugin not placed first in plugins array\n\nThe `@tanstack\u002Fdevtools-vite` plugin performs source injection that must run before framework plugins (React, Vue, Solid, etc.) process the code.\n\nWrong:\n\n```ts\nimport { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n plugins: [react(), devtools()],\n}\n```\n\nCorrect:\n\n```ts\nimport { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n plugins: [devtools(), react()],\n}\n```\n\n### HIGH: Mounting TanStackDevtools in SSR without client guard\n\nThe devtools core shell requires DOM APIs (`document`, `window`, `localStorage`). The React adapter includes `'use client'` at its entry point, so standard Next.js\u002FRemix setups work. However, custom SSR setups or frameworks that do not respect the `'use client'` directive need explicit guards.\n\nWrong:\n\n```tsx\n\u002F\u002F In a server-rendered component without framework 'use client' support\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nexport default function Layout({ children }) {\n return (\n \u003C>\n {children}\n \u003CTanStackDevtools \u002F>\n \u003C\u002F>\n )\n}\n```\n\nCorrect:\n\n```tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nexport default function Layout({ children }) {\n return (\n \u003C>\n {children}\n {typeof window !== 'undefined' && \u003CTanStackDevtools \u002F>}\n \u003C\u002F>\n )\n}\n```\n\nOr use dynamic imports \u002F lazy loading to ensure the component only loads on the client.\n\n### MEDIUM: Installing as regular dependency for dev-only use\n\nWhen using the Vite plugin for production stripping, devtools packages should be dev dependencies. Installing them as regular dependencies increases production bundle size unnecessarily.\n\nWrong:\n\n```bash\nnpm install @tanstack\u002Freact-devtools\n```\n\nCorrect:\n\n```bash\nnpm install -D @tanstack\u002Freact-devtools\nnpm install -D @tanstack\u002Fdevtools-vite\n```\n\nException: if you intentionally want devtools in production, install `@tanstack\u002Fdevtools` (core) as a regular dependency. See the production skill for details.\n\n### MEDIUM: Not keeping devtools packages at latest versions\n\nAll `@tanstack\u002Fdevtools-*` packages share internal protocols (event bus messages, plugin mount lifecycle). Mixing versions can cause silent failures where plugins register but never receive events, or the shell mounts but plugins do not render.\n\nAlways update all devtools packages together:\n\n```bash\nnpm install -D @tanstack\u002Freact-devtools@latest @tanstack\u002Fdevtools-vite@latest\n```\n\nWhen building custom plugins, ensure `@tanstack\u002Fdevtools-event-client` matches the version of `@tanstack\u002Fdevtools` used by the shell.\n\n## See Also\n\n- **devtools-vite-plugin** -- Vite plugin configuration: source inspection, console piping, production stripping, server event bus setup\n- **devtools-production** -- Production build handling: keeping devtools in prod, tree-shaking, URL flag gating\n- **devtools-plugin-panel** -- Building custom plugin panels with the EventClient API\n",{"data":36,"body":48},{"name":4,"description":6,"type":37,"library":38,"library_version":39,"sources":40},"core","@tanstack\u002Fdevtools","0.10.12",[41,42,43,44,45,46,47],"docs\u002Fquick-start.md","docs\u002Finstallation.md","docs\u002Fconfiguration.md","docs\u002Foverview.md","packages\u002Fdevtools\u002Fsrc\u002Fcontext\u002Fdevtools-store.ts","packages\u002Fvue-devtools\u002Fsrc\u002Ftypes.ts","packages\u002Freact-devtools\u002Fsrc\u002Fdevtools.tsx",{"type":49,"children":50},"root",[51,60,67,74,80,125,138,461,489,797,803,830,858,1236,1249,1255,1286,1681,1687,1718,2035,2041,2047,2075,2080,2107,2112,2524,2530,2543,2664,2676,2682,2695,2959,2965,2978,3072,3078,3096,3130,3135,3276,3281,3473,3484,3490,3501,3505,3651,3655,3793,3799,3841,3845,4016,4020,4207,4212,4218,4223,4227,4250,4254,4299,4311,4317,4330,4335,4367,4387,4393,4427],{"type":52,"tag":53,"props":54,"children":56},"element","h1",{"id":55},"tanstack-devtools-app-setup",[57],{"type":58,"value":59},"text","TanStack Devtools App Setup",{"type":52,"tag":61,"props":62,"children":64},"h2",{"id":63},"setup",[65],{"type":58,"value":66},"Setup",{"type":52,"tag":68,"props":69,"children":71},"h3",{"id":70},"react-primary",[72],{"type":58,"value":73},"React (primary)",{"type":52,"tag":75,"props":76,"children":77},"p",{},[78],{"type":58,"value":79},"Install as dev dependencies:",{"type":52,"tag":81,"props":82,"children":87},"pre",{"className":83,"code":84,"language":85,"meta":86,"style":86},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install -D @tanstack\u002Freact-devtools @tanstack\u002Fdevtools-vite\n","bash","",[88],{"type":52,"tag":89,"props":90,"children":91},"code",{"__ignoreMap":86},[92],{"type":52,"tag":93,"props":94,"children":97},"span",{"class":95,"line":96},"line",1,[98,104,110,115,120],{"type":52,"tag":93,"props":99,"children":101},{"style":100},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[102],{"type":58,"value":103},"npm",{"type":52,"tag":93,"props":105,"children":107},{"style":106},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[108],{"type":58,"value":109}," install",{"type":52,"tag":93,"props":111,"children":112},{"style":106},[113],{"type":58,"value":114}," -D",{"type":52,"tag":93,"props":116,"children":117},{"style":106},[118],{"type":58,"value":119}," @tanstack\u002Freact-devtools",{"type":52,"tag":93,"props":121,"children":122},{"style":106},[123],{"type":58,"value":124}," @tanstack\u002Fdevtools-vite\n",{"type":52,"tag":75,"props":126,"children":127},{},[128,130,136],{"type":58,"value":129},"Mount ",{"type":52,"tag":89,"props":131,"children":133},{"className":132},[],[134],{"type":58,"value":135},"TanStackDevtools",{"type":58,"value":137}," at the root of your application:",{"type":52,"tag":81,"props":139,"children":143},{"className":140,"code":141,"language":142,"meta":86,"style":86},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\nimport App from '.\u002FApp'\n\ncreateRoot(document.getElementById('root')!).render(\n \u003CStrictMode>\n \u003CApp \u002F>\n \u003CTanStackDevtools \u002F>\n \u003C\u002FStrictMode>,\n)\n","tsx",[144],{"type":52,"tag":89,"props":145,"children":146},{"__ignoreMap":86},[147,192,230,268,299,309,380,399,418,434,452],{"type":52,"tag":93,"props":148,"children":149},{"class":95,"line":96},[150,156,162,168,173,178,183,187],{"type":52,"tag":93,"props":151,"children":153},{"style":152},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[154],{"type":58,"value":155},"import",{"type":52,"tag":93,"props":157,"children":159},{"style":158},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[160],{"type":58,"value":161}," {",{"type":52,"tag":93,"props":163,"children":165},{"style":164},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[166],{"type":58,"value":167}," StrictMode",{"type":52,"tag":93,"props":169,"children":170},{"style":158},[171],{"type":58,"value":172}," }",{"type":52,"tag":93,"props":174,"children":175},{"style":152},[176],{"type":58,"value":177}," from",{"type":52,"tag":93,"props":179,"children":180},{"style":158},[181],{"type":58,"value":182}," '",{"type":52,"tag":93,"props":184,"children":185},{"style":106},[186],{"type":58,"value":28},{"type":52,"tag":93,"props":188,"children":189},{"style":158},[190],{"type":58,"value":191},"'\n",{"type":52,"tag":93,"props":193,"children":195},{"class":95,"line":194},2,[196,200,204,209,213,217,221,226],{"type":52,"tag":93,"props":197,"children":198},{"style":152},[199],{"type":58,"value":155},{"type":52,"tag":93,"props":201,"children":202},{"style":158},[203],{"type":58,"value":161},{"type":52,"tag":93,"props":205,"children":206},{"style":164},[207],{"type":58,"value":208}," createRoot",{"type":52,"tag":93,"props":210,"children":211},{"style":158},[212],{"type":58,"value":172},{"type":52,"tag":93,"props":214,"children":215},{"style":152},[216],{"type":58,"value":177},{"type":52,"tag":93,"props":218,"children":219},{"style":158},[220],{"type":58,"value":182},{"type":52,"tag":93,"props":222,"children":223},{"style":106},[224],{"type":58,"value":225},"react-dom\u002Fclient",{"type":52,"tag":93,"props":227,"children":228},{"style":158},[229],{"type":58,"value":191},{"type":52,"tag":93,"props":231,"children":233},{"class":95,"line":232},3,[234,238,242,247,251,255,259,264],{"type":52,"tag":93,"props":235,"children":236},{"style":152},[237],{"type":58,"value":155},{"type":52,"tag":93,"props":239,"children":240},{"style":158},[241],{"type":58,"value":161},{"type":52,"tag":93,"props":243,"children":244},{"style":164},[245],{"type":58,"value":246}," TanStackDevtools",{"type":52,"tag":93,"props":248,"children":249},{"style":158},[250],{"type":58,"value":172},{"type":52,"tag":93,"props":252,"children":253},{"style":152},[254],{"type":58,"value":177},{"type":52,"tag":93,"props":256,"children":257},{"style":158},[258],{"type":58,"value":182},{"type":52,"tag":93,"props":260,"children":261},{"style":106},[262],{"type":58,"value":263},"@tanstack\u002Freact-devtools",{"type":52,"tag":93,"props":265,"children":266},{"style":158},[267],{"type":58,"value":191},{"type":52,"tag":93,"props":269,"children":271},{"class":95,"line":270},4,[272,276,281,286,290,295],{"type":52,"tag":93,"props":273,"children":274},{"style":152},[275],{"type":58,"value":155},{"type":52,"tag":93,"props":277,"children":278},{"style":164},[279],{"type":58,"value":280}," App ",{"type":52,"tag":93,"props":282,"children":283},{"style":152},[284],{"type":58,"value":285},"from",{"type":52,"tag":93,"props":287,"children":288},{"style":158},[289],{"type":58,"value":182},{"type":52,"tag":93,"props":291,"children":292},{"style":106},[293],{"type":58,"value":294},".\u002FApp",{"type":52,"tag":93,"props":296,"children":297},{"style":158},[298],{"type":58,"value":191},{"type":52,"tag":93,"props":300,"children":302},{"class":95,"line":301},5,[303],{"type":52,"tag":93,"props":304,"children":306},{"emptyLinePlaceholder":305},true,[307],{"type":58,"value":308},"\n",{"type":52,"tag":93,"props":310,"children":312},{"class":95,"line":311},6,[313,319,324,329,334,339,344,348,352,357,362,366,370,375],{"type":52,"tag":93,"props":314,"children":316},{"style":315},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[317],{"type":58,"value":318},"createRoot",{"type":52,"tag":93,"props":320,"children":321},{"style":164},[322],{"type":58,"value":323},"(document",{"type":52,"tag":93,"props":325,"children":326},{"style":158},[327],{"type":58,"value":328},".",{"type":52,"tag":93,"props":330,"children":331},{"style":315},[332],{"type":58,"value":333},"getElementById",{"type":52,"tag":93,"props":335,"children":336},{"style":164},[337],{"type":58,"value":338},"(",{"type":52,"tag":93,"props":340,"children":341},{"style":158},[342],{"type":58,"value":343},"'",{"type":52,"tag":93,"props":345,"children":346},{"style":106},[347],{"type":58,"value":49},{"type":52,"tag":93,"props":349,"children":350},{"style":158},[351],{"type":58,"value":343},{"type":52,"tag":93,"props":353,"children":354},{"style":164},[355],{"type":58,"value":356},")",{"type":52,"tag":93,"props":358,"children":359},{"style":158},[360],{"type":58,"value":361},"!",{"type":52,"tag":93,"props":363,"children":364},{"style":164},[365],{"type":58,"value":356},{"type":52,"tag":93,"props":367,"children":368},{"style":158},[369],{"type":58,"value":328},{"type":52,"tag":93,"props":371,"children":372},{"style":315},[373],{"type":58,"value":374},"render",{"type":52,"tag":93,"props":376,"children":377},{"style":164},[378],{"type":58,"value":379},"(\n",{"type":52,"tag":93,"props":381,"children":383},{"class":95,"line":382},7,[384,389,394],{"type":52,"tag":93,"props":385,"children":386},{"style":158},[387],{"type":58,"value":388}," \u003C",{"type":52,"tag":93,"props":390,"children":391},{"style":100},[392],{"type":58,"value":393},"StrictMode",{"type":52,"tag":93,"props":395,"children":396},{"style":158},[397],{"type":58,"value":398},">\n",{"type":52,"tag":93,"props":400,"children":402},{"class":95,"line":401},8,[403,408,413],{"type":52,"tag":93,"props":404,"children":405},{"style":158},[406],{"type":58,"value":407}," \u003C",{"type":52,"tag":93,"props":409,"children":410},{"style":100},[411],{"type":58,"value":412},"App",{"type":52,"tag":93,"props":414,"children":415},{"style":158},[416],{"type":58,"value":417}," \u002F>\n",{"type":52,"tag":93,"props":419,"children":421},{"class":95,"line":420},9,[422,426,430],{"type":52,"tag":93,"props":423,"children":424},{"style":158},[425],{"type":58,"value":407},{"type":52,"tag":93,"props":427,"children":428},{"style":100},[429],{"type":58,"value":135},{"type":52,"tag":93,"props":431,"children":432},{"style":158},[433],{"type":58,"value":417},{"type":52,"tag":93,"props":435,"children":437},{"class":95,"line":436},10,[438,443,447],{"type":52,"tag":93,"props":439,"children":440},{"style":158},[441],{"type":58,"value":442}," \u003C\u002F",{"type":52,"tag":93,"props":444,"children":445},{"style":100},[446],{"type":58,"value":393},{"type":52,"tag":93,"props":448,"children":449},{"style":158},[450],{"type":58,"value":451},">,\n",{"type":52,"tag":93,"props":453,"children":455},{"class":95,"line":454},11,[456],{"type":52,"tag":93,"props":457,"children":458},{"style":164},[459],{"type":58,"value":460},")\n",{"type":52,"tag":75,"props":462,"children":463},{},[464,466,472,474,480,482,487],{"type":58,"value":465},"Add plugins via the ",{"type":52,"tag":89,"props":467,"children":469},{"className":468},[],[470],{"type":58,"value":471},"plugins",{"type":58,"value":473}," prop. Each plugin needs ",{"type":52,"tag":89,"props":475,"children":477},{"className":476},[],[478],{"type":58,"value":479},"name",{"type":58,"value":481}," (string) and ",{"type":52,"tag":89,"props":483,"children":485},{"className":484},[],[486],{"type":58,"value":374},{"type":58,"value":488}," (JSX element or render function):",{"type":52,"tag":81,"props":490,"children":492},{"className":140,"code":491,"language":142,"meta":86,"style":86},"import { TanStackDevtools } from '@tanstack\u002Freact-devtools'\nimport { ReactQueryDevtoolsPanel } from '@tanstack\u002Freact-query-devtools'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack\u002Freact-router-devtools'\n;\u003CTanStackDevtools\n plugins={[\n {\n name: 'TanStack Query',\n render: \u003CReactQueryDevtoolsPanel \u002F>,\n },\n {\n name: 'TanStack Router',\n render: \u003CTanStackRouterDevtoolsPanel \u002F>,\n },\n ]}\n\u002F>\n",[493],{"type":52,"tag":89,"props":494,"children":495},{"__ignoreMap":86},[496,531,568,605,618,637,645,676,703,711,718,746,771,779,788],{"type":52,"tag":93,"props":497,"children":498},{"class":95,"line":96},[499,503,507,511,515,519,523,527],{"type":52,"tag":93,"props":500,"children":501},{"style":152},[502],{"type":58,"value":155},{"type":52,"tag":93,"props":504,"children":505},{"style":158},[506],{"type":58,"value":161},{"type":52,"tag":93,"props":508,"children":509},{"style":164},[510],{"type":58,"value":246},{"type":52,"tag":93,"props":512,"children":513},{"style":158},[514],{"type":58,"value":172},{"type":52,"tag":93,"props":516,"children":517},{"style":152},[518],{"type":58,"value":177},{"type":52,"tag":93,"props":520,"children":521},{"style":158},[522],{"type":58,"value":182},{"type":52,"tag":93,"props":524,"children":525},{"style":106},[526],{"type":58,"value":263},{"type":52,"tag":93,"props":528,"children":529},{"style":158},[530],{"type":58,"value":191},{"type":52,"tag":93,"props":532,"children":533},{"class":95,"line":194},[534,538,542,547,551,555,559,564],{"type":52,"tag":93,"props":535,"children":536},{"style":152},[537],{"type":58,"value":155},{"type":52,"tag":93,"props":539,"children":540},{"style":158},[541],{"type":58,"value":161},{"type":52,"tag":93,"props":543,"children":544},{"style":164},[545],{"type":58,"value":546}," ReactQueryDevtoolsPanel",{"type":52,"tag":93,"props":548,"children":549},{"style":158},[550],{"type":58,"value":172},{"type":52,"tag":93,"props":552,"children":553},{"style":152},[554],{"type":58,"value":177},{"type":52,"tag":93,"props":556,"children":557},{"style":158},[558],{"type":58,"value":182},{"type":52,"tag":93,"props":560,"children":561},{"style":106},[562],{"type":58,"value":563},"@tanstack\u002Freact-query-devtools",{"type":52,"tag":93,"props":565,"children":566},{"style":158},[567],{"type":58,"value":191},{"type":52,"tag":93,"props":569,"children":570},{"class":95,"line":232},[571,575,579,584,588,592,596,601],{"type":52,"tag":93,"props":572,"children":573},{"style":152},[574],{"type":58,"value":155},{"type":52,"tag":93,"props":576,"children":577},{"style":158},[578],{"type":58,"value":161},{"type":52,"tag":93,"props":580,"children":581},{"style":164},[582],{"type":58,"value":583}," TanStackRouterDevtoolsPanel",{"type":52,"tag":93,"props":585,"children":586},{"style":158},[587],{"type":58,"value":172},{"type":52,"tag":93,"props":589,"children":590},{"style":152},[591],{"type":58,"value":177},{"type":52,"tag":93,"props":593,"children":594},{"style":158},[595],{"type":58,"value":182},{"type":52,"tag":93,"props":597,"children":598},{"style":106},[599],{"type":58,"value":600},"@tanstack\u002Freact-router-devtools",{"type":52,"tag":93,"props":602,"children":603},{"style":158},[604],{"type":58,"value":191},{"type":52,"tag":93,"props":606,"children":607},{"class":95,"line":270},[608,613],{"type":52,"tag":93,"props":609,"children":610},{"style":158},[611],{"type":58,"value":612},";\u003C",{"type":52,"tag":93,"props":614,"children":615},{"style":164},[616],{"type":58,"value":617},"TanStackDevtools\n",{"type":52,"tag":93,"props":619,"children":620},{"class":95,"line":301},[621,626,631],{"type":52,"tag":93,"props":622,"children":623},{"style":164},[624],{"type":58,"value":625}," plugins",{"type":52,"tag":93,"props":627,"children":628},{"style":158},[629],{"type":58,"value":630},"={",{"type":52,"tag":93,"props":632,"children":634},{"style":633},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[635],{"type":58,"value":636},"[\n",{"type":52,"tag":93,"props":638,"children":639},{"class":95,"line":311},[640],{"type":52,"tag":93,"props":641,"children":642},{"style":158},[643],{"type":58,"value":644}," {\n",{"type":52,"tag":93,"props":646,"children":647},{"class":95,"line":382},[648,653,658,662,667,671],{"type":52,"tag":93,"props":649,"children":650},{"style":633},[651],{"type":58,"value":652}," name",{"type":52,"tag":93,"props":654,"children":655},{"style":158},[656],{"type":58,"value":657},":",{"type":52,"tag":93,"props":659,"children":660},{"style":158},[661],{"type":58,"value":182},{"type":52,"tag":93,"props":663,"children":664},{"style":633},[665],{"type":58,"value":666},"TanStack Query",{"type":52,"tag":93,"props":668,"children":669},{"style":158},[670],{"type":58,"value":343},{"type":52,"tag":93,"props":672,"children":673},{"style":158},[674],{"type":58,"value":675},",\n",{"type":52,"tag":93,"props":677,"children":678},{"class":95,"line":401},[679,684,688,693,698],{"type":52,"tag":93,"props":680,"children":681},{"style":633},[682],{"type":58,"value":683}," render",{"type":52,"tag":93,"props":685,"children":686},{"style":158},[687],{"type":58,"value":657},{"type":52,"tag":93,"props":689,"children":690},{"style":158},[691],{"type":58,"value":692}," \u003C",{"type":52,"tag":93,"props":694,"children":695},{"style":100},[696],{"type":58,"value":697},"ReactQueryDevtoolsPanel",{"type":52,"tag":93,"props":699,"children":700},{"style":158},[701],{"type":58,"value":702}," \u002F>,\n",{"type":52,"tag":93,"props":704,"children":705},{"class":95,"line":420},[706],{"type":52,"tag":93,"props":707,"children":708},{"style":158},[709],{"type":58,"value":710}," },\n",{"type":52,"tag":93,"props":712,"children":713},{"class":95,"line":436},[714],{"type":52,"tag":93,"props":715,"children":716},{"style":158},[717],{"type":58,"value":644},{"type":52,"tag":93,"props":719,"children":720},{"class":95,"line":454},[721,725,729,733,738,742],{"type":52,"tag":93,"props":722,"children":723},{"style":633},[724],{"type":58,"value":652},{"type":52,"tag":93,"props":726,"children":727},{"style":158},[728],{"type":58,"value":657},{"type":52,"tag":93,"props":730,"children":731},{"style":158},[732],{"type":58,"value":182},{"type":52,"tag":93,"props":734,"children":735},{"style":633},[736],{"type":58,"value":737},"TanStack Router",{"type":52,"tag":93,"props":739,"children":740},{"style":158},[741],{"type":58,"value":343},{"type":52,"tag":93,"props":743,"children":744},{"style":158},[745],{"type":58,"value":675},{"type":52,"tag":93,"props":747,"children":749},{"class":95,"line":748},12,[750,754,758,762,767],{"type":52,"tag":93,"props":751,"children":752},{"style":633},[753],{"type":58,"value":683},{"type":52,"tag":93,"props":755,"children":756},{"style":158},[757],{"type":58,"value":657},{"type":52,"tag":93,"props":759,"children":760},{"style":158},[761],{"type":58,"value":692},{"type":52,"tag":93,"props":763,"children":764},{"style":100},[765],{"type":58,"value":766},"TanStackRouterDevtoolsPanel",{"type":52,"tag":93,"props":768,"children":769},{"style":158},[770],{"type":58,"value":702},{"type":52,"tag":93,"props":772,"children":774},{"class":95,"line":773},13,[775],{"type":52,"tag":93,"props":776,"children":777},{"style":158},[778],{"type":58,"value":710},{"type":52,"tag":93,"props":780,"children":782},{"class":95,"line":781},14,[783],{"type":52,"tag":93,"props":784,"children":785},{"style":633},[786],{"type":58,"value":787}," ]}\n",{"type":52,"tag":93,"props":789,"children":791},{"class":95,"line":790},15,[792],{"type":52,"tag":93,"props":793,"children":794},{"style":633},[795],{"type":58,"value":796},"\u002F>\n",{"type":52,"tag":68,"props":798,"children":800},{"id":799},"vue",[801],{"type":58,"value":802},"Vue",{"type":52,"tag":81,"props":804,"children":806},{"className":83,"code":805,"language":85,"meta":86,"style":86},"npm install -D @tanstack\u002Fvue-devtools\n",[807],{"type":52,"tag":89,"props":808,"children":809},{"__ignoreMap":86},[810],{"type":52,"tag":93,"props":811,"children":812},{"class":95,"line":96},[813,817,821,825],{"type":52,"tag":93,"props":814,"children":815},{"style":100},[816],{"type":58,"value":103},{"type":52,"tag":93,"props":818,"children":819},{"style":106},[820],{"type":58,"value":109},{"type":52,"tag":93,"props":822,"children":823},{"style":106},[824],{"type":58,"value":114},{"type":52,"tag":93,"props":826,"children":827},{"style":106},[828],{"type":58,"value":829}," @tanstack\u002Fvue-devtools\n",{"type":52,"tag":75,"props":831,"children":832},{},[833,835,841,843,848,850,856],{"type":58,"value":834},"Vue uses ",{"type":52,"tag":89,"props":836,"children":838},{"className":837},[],[839],{"type":58,"value":840},"component",{"type":58,"value":842}," (not ",{"type":52,"tag":89,"props":844,"children":846},{"className":845},[],[847],{"type":58,"value":374},{"type":58,"value":849},") in plugin definitions. This is the ",{"type":52,"tag":89,"props":851,"children":853},{"className":852},[],[854],{"type":58,"value":855},"TanStackDevtoolsVuePlugin",{"type":58,"value":857}," type:",{"type":52,"tag":81,"props":859,"children":862},{"className":860,"code":861,"language":799,"meta":86,"style":86},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TanStackDevtools } from '@tanstack\u002Fvue-devtools'\nimport type { TanStackDevtoolsVuePlugin } from '@tanstack\u002Fvue-devtools'\nimport { VueQueryDevtoolsPanel } from '@tanstack\u002Fvue-query-devtools'\n\nconst plugins: TanStackDevtoolsVuePlugin[] = [\n { name: 'Vue Query', component: VueQueryDevtoolsPanel },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CApp \u002F>\n \u003CTanStackDevtools :plugins=\"plugins\" \u002F>\n\u003C\u002Ftemplate>\n",[863],{"type":52,"tag":89,"props":864,"children":865},{"__ignoreMap":86},[866,913,949,990,1027,1034,1069,1123,1131,1147,1154,1170,1185,1221],{"type":52,"tag":93,"props":867,"children":868},{"class":95,"line":96},[869,874,879,885,890,895,900,905,909],{"type":52,"tag":93,"props":870,"children":871},{"style":158},[872],{"type":58,"value":873},"\u003C",{"type":52,"tag":93,"props":875,"children":876},{"style":633},[877],{"type":58,"value":878},"script",{"type":52,"tag":93,"props":880,"children":882},{"style":881},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[883],{"type":58,"value":884}," setup",{"type":52,"tag":93,"props":886,"children":887},{"style":881},[888],{"type":58,"value":889}," lang",{"type":52,"tag":93,"props":891,"children":892},{"style":158},[893],{"type":58,"value":894},"=",{"type":52,"tag":93,"props":896,"children":897},{"style":158},[898],{"type":58,"value":899},"\"",{"type":52,"tag":93,"props":901,"children":902},{"style":106},[903],{"type":58,"value":904},"ts",{"type":52,"tag":93,"props":906,"children":907},{"style":158},[908],{"type":58,"value":899},{"type":52,"tag":93,"props":910,"children":911},{"style":158},[912],{"type":58,"value":398},{"type":52,"tag":93,"props":914,"children":915},{"class":95,"line":194},[916,920,924,928,932,936,940,945],{"type":52,"tag":93,"props":917,"children":918},{"style":152},[919],{"type":58,"value":155},{"type":52,"tag":93,"props":921,"children":922},{"style":158},[923],{"type":58,"value":161},{"type":52,"tag":93,"props":925,"children":926},{"style":164},[927],{"type":58,"value":246},{"type":52,"tag":93,"props":929,"children":930},{"style":158},[931],{"type":58,"value":172},{"type":52,"tag":93,"props":933,"children":934},{"style":152},[935],{"type":58,"value":177},{"type":52,"tag":93,"props":937,"children":938},{"style":158},[939],{"type":58,"value":182},{"type":52,"tag":93,"props":941,"children":942},{"style":106},[943],{"type":58,"value":944},"@tanstack\u002Fvue-devtools",{"type":52,"tag":93,"props":946,"children":947},{"style":158},[948],{"type":58,"value":191},{"type":52,"tag":93,"props":950,"children":951},{"class":95,"line":232},[952,956,961,965,970,974,978,982,986],{"type":52,"tag":93,"props":953,"children":954},{"style":152},[955],{"type":58,"value":155},{"type":52,"tag":93,"props":957,"children":958},{"style":152},[959],{"type":58,"value":960}," type",{"type":52,"tag":93,"props":962,"children":963},{"style":158},[964],{"type":58,"value":161},{"type":52,"tag":93,"props":966,"children":967},{"style":164},[968],{"type":58,"value":969}," TanStackDevtoolsVuePlugin",{"type":52,"tag":93,"props":971,"children":972},{"style":158},[973],{"type":58,"value":172},{"type":52,"tag":93,"props":975,"children":976},{"style":152},[977],{"type":58,"value":177},{"type":52,"tag":93,"props":979,"children":980},{"style":158},[981],{"type":58,"value":182},{"type":52,"tag":93,"props":983,"children":984},{"style":106},[985],{"type":58,"value":944},{"type":52,"tag":93,"props":987,"children":988},{"style":158},[989],{"type":58,"value":191},{"type":52,"tag":93,"props":991,"children":992},{"class":95,"line":270},[993,997,1001,1006,1010,1014,1018,1023],{"type":52,"tag":93,"props":994,"children":995},{"style":152},[996],{"type":58,"value":155},{"type":52,"tag":93,"props":998,"children":999},{"style":158},[1000],{"type":58,"value":161},{"type":52,"tag":93,"props":1002,"children":1003},{"style":164},[1004],{"type":58,"value":1005}," VueQueryDevtoolsPanel",{"type":52,"tag":93,"props":1007,"children":1008},{"style":158},[1009],{"type":58,"value":172},{"type":52,"tag":93,"props":1011,"children":1012},{"style":152},[1013],{"type":58,"value":177},{"type":52,"tag":93,"props":1015,"children":1016},{"style":158},[1017],{"type":58,"value":182},{"type":52,"tag":93,"props":1019,"children":1020},{"style":106},[1021],{"type":58,"value":1022},"@tanstack\u002Fvue-query-devtools",{"type":52,"tag":93,"props":1024,"children":1025},{"style":158},[1026],{"type":58,"value":191},{"type":52,"tag":93,"props":1028,"children":1029},{"class":95,"line":301},[1030],{"type":52,"tag":93,"props":1031,"children":1032},{"emptyLinePlaceholder":305},[1033],{"type":58,"value":308},{"type":52,"tag":93,"props":1035,"children":1036},{"class":95,"line":311},[1037,1042,1047,1051,1055,1060,1064],{"type":52,"tag":93,"props":1038,"children":1039},{"style":881},[1040],{"type":58,"value":1041},"const",{"type":52,"tag":93,"props":1043,"children":1044},{"style":164},[1045],{"type":58,"value":1046}," plugins",{"type":52,"tag":93,"props":1048,"children":1049},{"style":158},[1050],{"type":58,"value":657},{"type":52,"tag":93,"props":1052,"children":1053},{"style":100},[1054],{"type":58,"value":969},{"type":52,"tag":93,"props":1056,"children":1057},{"style":164},[1058],{"type":58,"value":1059},"[] ",{"type":52,"tag":93,"props":1061,"children":1062},{"style":158},[1063],{"type":58,"value":894},{"type":52,"tag":93,"props":1065,"children":1066},{"style":164},[1067],{"type":58,"value":1068}," [\n",{"type":52,"tag":93,"props":1070,"children":1071},{"class":95,"line":382},[1072,1077,1082,1086,1090,1095,1099,1104,1109,1113,1118],{"type":52,"tag":93,"props":1073,"children":1074},{"style":158},[1075],{"type":58,"value":1076}," {",{"type":52,"tag":93,"props":1078,"children":1079},{"style":633},[1080],{"type":58,"value":1081}," name",{"type":52,"tag":93,"props":1083,"children":1084},{"style":158},[1085],{"type":58,"value":657},{"type":52,"tag":93,"props":1087,"children":1088},{"style":158},[1089],{"type":58,"value":182},{"type":52,"tag":93,"props":1091,"children":1092},{"style":106},[1093],{"type":58,"value":1094},"Vue Query",{"type":52,"tag":93,"props":1096,"children":1097},{"style":158},[1098],{"type":58,"value":343},{"type":52,"tag":93,"props":1100,"children":1101},{"style":158},[1102],{"type":58,"value":1103},",",{"type":52,"tag":93,"props":1105,"children":1106},{"style":633},[1107],{"type":58,"value":1108}," component",{"type":52,"tag":93,"props":1110,"children":1111},{"style":158},[1112],{"type":58,"value":657},{"type":52,"tag":93,"props":1114,"children":1115},{"style":164},[1116],{"type":58,"value":1117}," VueQueryDevtoolsPanel ",{"type":52,"tag":93,"props":1119,"children":1120},{"style":158},[1121],{"type":58,"value":1122},"},\n",{"type":52,"tag":93,"props":1124,"children":1125},{"class":95,"line":401},[1126],{"type":52,"tag":93,"props":1127,"children":1128},{"style":164},[1129],{"type":58,"value":1130},"]\n",{"type":52,"tag":93,"props":1132,"children":1133},{"class":95,"line":420},[1134,1139,1143],{"type":52,"tag":93,"props":1135,"children":1136},{"style":158},[1137],{"type":58,"value":1138},"\u003C\u002F",{"type":52,"tag":93,"props":1140,"children":1141},{"style":633},[1142],{"type":58,"value":878},{"type":52,"tag":93,"props":1144,"children":1145},{"style":158},[1146],{"type":58,"value":398},{"type":52,"tag":93,"props":1148,"children":1149},{"class":95,"line":436},[1150],{"type":52,"tag":93,"props":1151,"children":1152},{"emptyLinePlaceholder":305},[1153],{"type":58,"value":308},{"type":52,"tag":93,"props":1155,"children":1156},{"class":95,"line":454},[1157,1161,1166],{"type":52,"tag":93,"props":1158,"children":1159},{"style":158},[1160],{"type":58,"value":873},{"type":52,"tag":93,"props":1162,"children":1163},{"style":633},[1164],{"type":58,"value":1165},"template",{"type":52,"tag":93,"props":1167,"children":1168},{"style":158},[1169],{"type":58,"value":398},{"type":52,"tag":93,"props":1171,"children":1172},{"class":95,"line":748},[1173,1177,1181],{"type":52,"tag":93,"props":1174,"children":1175},{"style":158},[1176],{"type":58,"value":388},{"type":52,"tag":93,"props":1178,"children":1179},{"style":633},[1180],{"type":58,"value":412},{"type":52,"tag":93,"props":1182,"children":1183},{"style":158},[1184],{"type":58,"value":417},{"type":52,"tag":93,"props":1186,"children":1187},{"class":95,"line":773},[1188,1192,1196,1201,1205,1209,1213,1217],{"type":52,"tag":93,"props":1189,"children":1190},{"style":158},[1191],{"type":58,"value":388},{"type":52,"tag":93,"props":1193,"children":1194},{"style":633},[1195],{"type":58,"value":135},{"type":52,"tag":93,"props":1197,"children":1198},{"style":881},[1199],{"type":58,"value":1200}," :plugins",{"type":52,"tag":93,"props":1202,"children":1203},{"style":158},[1204],{"type":58,"value":894},{"type":52,"tag":93,"props":1206,"children":1207},{"style":158},[1208],{"type":58,"value":899},{"type":52,"tag":93,"props":1210,"children":1211},{"style":106},[1212],{"type":58,"value":471},{"type":52,"tag":93,"props":1214,"children":1215},{"style":158},[1216],{"type":58,"value":899},{"type":52,"tag":93,"props":1218,"children":1219},{"style":158},[1220],{"type":58,"value":417},{"type":52,"tag":93,"props":1222,"children":1223},{"class":95,"line":781},[1224,1228,1232],{"type":52,"tag":93,"props":1225,"children":1226},{"style":158},[1227],{"type":58,"value":1138},{"type":52,"tag":93,"props":1229,"children":1230},{"style":633},[1231],{"type":58,"value":1165},{"type":52,"tag":93,"props":1233,"children":1234},{"style":158},[1235],{"type":58,"value":398},{"type":52,"tag":75,"props":1237,"children":1238},{},[1239,1241,1247],{"type":58,"value":1240},"The Vite plugin (",{"type":52,"tag":89,"props":1242,"children":1244},{"className":1243},[],[1245],{"type":58,"value":1246},"@tanstack\u002Fdevtools-vite",{"type":58,"value":1248},") is optional for Vue but recommended for enhanced console logs and go-to-source.",{"type":52,"tag":68,"props":1250,"children":1252},{"id":1251},"solid",[1253],{"type":58,"value":1254},"Solid",{"type":52,"tag":81,"props":1256,"children":1258},{"className":83,"code":1257,"language":85,"meta":86,"style":86},"npm install -D @tanstack\u002Fsolid-devtools @tanstack\u002Fdevtools-vite\n",[1259],{"type":52,"tag":89,"props":1260,"children":1261},{"__ignoreMap":86},[1262],{"type":52,"tag":93,"props":1263,"children":1264},{"class":95,"line":96},[1265,1269,1273,1277,1282],{"type":52,"tag":93,"props":1266,"children":1267},{"style":100},[1268],{"type":58,"value":103},{"type":52,"tag":93,"props":1270,"children":1271},{"style":106},[1272],{"type":58,"value":109},{"type":52,"tag":93,"props":1274,"children":1275},{"style":106},[1276],{"type":58,"value":114},{"type":52,"tag":93,"props":1278,"children":1279},{"style":106},[1280],{"type":58,"value":1281}," @tanstack\u002Fsolid-devtools",{"type":52,"tag":93,"props":1283,"children":1284},{"style":106},[1285],{"type":58,"value":124},{"type":52,"tag":81,"props":1287,"children":1289},{"className":140,"code":1288,"language":142,"meta":86,"style":86},"import { render } from 'solid-js\u002Fweb'\nimport { TanStackDevtools } from '@tanstack\u002Fsolid-devtools'\nimport { SolidQueryDevtoolsPanel } from '@tanstack\u002Fsolid-query-devtools'\nimport App from '.\u002FApp'\n\nrender(\n () => (\n \u003C>\n \u003CApp \u002F>\n \u003CTanStackDevtools\n plugins={[\n {\n name: 'TanStack Query',\n render: \u003CSolidQueryDevtoolsPanel \u002F>,\n },\n ]}\n \u002F>\n \u003C\u002F>\n ),\n document.getElementById('root')!,\n)\n",[1290],{"type":52,"tag":89,"props":1291,"children":1292},{"__ignoreMap":86},[1293,1330,1366,1403,1430,1437,1448,1466,1474,1490,1501,1517,1525,1553,1578,1586,1600,1609,1618,1631,1673],{"type":52,"tag":93,"props":1294,"children":1295},{"class":95,"line":96},[1296,1300,1304,1309,1313,1317,1321,1326],{"type":52,"tag":93,"props":1297,"children":1298},{"style":152},[1299],{"type":58,"value":155},{"type":52,"tag":93,"props":1301,"children":1302},{"style":158},[1303],{"type":58,"value":161},{"type":52,"tag":93,"props":1305,"children":1306},{"style":164},[1307],{"type":58,"value":1308}," render",{"type":52,"tag":93,"props":1310,"children":1311},{"style":158},[1312],{"type":58,"value":172},{"type":52,"tag":93,"props":1314,"children":1315},{"style":152},[1316],{"type":58,"value":177},{"type":52,"tag":93,"props":1318,"children":1319},{"style":158},[1320],{"type":58,"value":182},{"type":52,"tag":93,"props":1322,"children":1323},{"style":106},[1324],{"type":58,"value":1325},"solid-js\u002Fweb",{"type":52,"tag":93,"props":1327,"children":1328},{"style":158},[1329],{"type":58,"value":191},{"type":52,"tag":93,"props":1331,"children":1332},{"class":95,"line":194},[1333,1337,1341,1345,1349,1353,1357,1362],{"type":52,"tag":93,"props":1334,"children":1335},{"style":152},[1336],{"type":58,"value":155},{"type":52,"tag":93,"props":1338,"children":1339},{"style":158},[1340],{"type":58,"value":161},{"type":52,"tag":93,"props":1342,"children":1343},{"style":164},[1344],{"type":58,"value":246},{"type":52,"tag":93,"props":1346,"children":1347},{"style":158},[1348],{"type":58,"value":172},{"type":52,"tag":93,"props":1350,"children":1351},{"style":152},[1352],{"type":58,"value":177},{"type":52,"tag":93,"props":1354,"children":1355},{"style":158},[1356],{"type":58,"value":182},{"type":52,"tag":93,"props":1358,"children":1359},{"style":106},[1360],{"type":58,"value":1361},"@tanstack\u002Fsolid-devtools",{"type":52,"tag":93,"props":1363,"children":1364},{"style":158},[1365],{"type":58,"value":191},{"type":52,"tag":93,"props":1367,"children":1368},{"class":95,"line":232},[1369,1373,1377,1382,1386,1390,1394,1399],{"type":52,"tag":93,"props":1370,"children":1371},{"style":152},[1372],{"type":58,"value":155},{"type":52,"tag":93,"props":1374,"children":1375},{"style":158},[1376],{"type":58,"value":161},{"type":52,"tag":93,"props":1378,"children":1379},{"style":164},[1380],{"type":58,"value":1381}," SolidQueryDevtoolsPanel",{"type":52,"tag":93,"props":1383,"children":1384},{"style":158},[1385],{"type":58,"value":172},{"type":52,"tag":93,"props":1387,"children":1388},{"style":152},[1389],{"type":58,"value":177},{"type":52,"tag":93,"props":1391,"children":1392},{"style":158},[1393],{"type":58,"value":182},{"type":52,"tag":93,"props":1395,"children":1396},{"style":106},[1397],{"type":58,"value":1398},"@tanstack\u002Fsolid-query-devtools",{"type":52,"tag":93,"props":1400,"children":1401},{"style":158},[1402],{"type":58,"value":191},{"type":52,"tag":93,"props":1404,"children":1405},{"class":95,"line":270},[1406,1410,1414,1418,1422,1426],{"type":52,"tag":93,"props":1407,"children":1408},{"style":152},[1409],{"type":58,"value":155},{"type":52,"tag":93,"props":1411,"children":1412},{"style":164},[1413],{"type":58,"value":280},{"type":52,"tag":93,"props":1415,"children":1416},{"style":152},[1417],{"type":58,"value":285},{"type":52,"tag":93,"props":1419,"children":1420},{"style":158},[1421],{"type":58,"value":182},{"type":52,"tag":93,"props":1423,"children":1424},{"style":106},[1425],{"type":58,"value":294},{"type":52,"tag":93,"props":1427,"children":1428},{"style":158},[1429],{"type":58,"value":191},{"type":52,"tag":93,"props":1431,"children":1432},{"class":95,"line":301},[1433],{"type":52,"tag":93,"props":1434,"children":1435},{"emptyLinePlaceholder":305},[1436],{"type":58,"value":308},{"type":52,"tag":93,"props":1438,"children":1439},{"class":95,"line":311},[1440,1444],{"type":52,"tag":93,"props":1441,"children":1442},{"style":315},[1443],{"type":58,"value":374},{"type":52,"tag":93,"props":1445,"children":1446},{"style":164},[1447],{"type":58,"value":379},{"type":52,"tag":93,"props":1449,"children":1450},{"class":95,"line":382},[1451,1456,1461],{"type":52,"tag":93,"props":1452,"children":1453},{"style":158},[1454],{"type":58,"value":1455}," ()",{"type":52,"tag":93,"props":1457,"children":1458},{"style":881},[1459],{"type":58,"value":1460}," =>",{"type":52,"tag":93,"props":1462,"children":1463},{"style":164},[1464],{"type":58,"value":1465}," (\n",{"type":52,"tag":93,"props":1467,"children":1468},{"class":95,"line":401},[1469],{"type":52,"tag":93,"props":1470,"children":1471},{"style":158},[1472],{"type":58,"value":1473}," \u003C>\n",{"type":52,"tag":93,"props":1475,"children":1476},{"class":95,"line":420},[1477,1482,1486],{"type":52,"tag":93,"props":1478,"children":1479},{"style":158},[1480],{"type":58,"value":1481}," \u003C",{"type":52,"tag":93,"props":1483,"children":1484},{"style":100},[1485],{"type":58,"value":412},{"type":52,"tag":93,"props":1487,"children":1488},{"style":158},[1489],{"type":58,"value":417},{"type":52,"tag":93,"props":1491,"children":1492},{"class":95,"line":436},[1493,1497],{"type":52,"tag":93,"props":1494,"children":1495},{"style":158},[1496],{"type":58,"value":1481},{"type":52,"tag":93,"props":1498,"children":1499},{"style":100},[1500],{"type":58,"value":617},{"type":52,"tag":93,"props":1502,"children":1503},{"class":95,"line":454},[1504,1509,1513],{"type":52,"tag":93,"props":1505,"children":1506},{"style":881},[1507],{"type":58,"value":1508}," plugins",{"type":52,"tag":93,"props":1510,"children":1511},{"style":158},[1512],{"type":58,"value":630},{"type":52,"tag":93,"props":1514,"children":1515},{"style":164},[1516],{"type":58,"value":636},{"type":52,"tag":93,"props":1518,"children":1519},{"class":95,"line":748},[1520],{"type":52,"tag":93,"props":1521,"children":1522},{"style":158},[1523],{"type":58,"value":1524}," {\n",{"type":52,"tag":93,"props":1526,"children":1527},{"class":95,"line":773},[1528,1533,1537,1541,1545,1549],{"type":52,"tag":93,"props":1529,"children":1530},{"style":633},[1531],{"type":58,"value":1532}," name",{"type":52,"tag":93,"props":1534,"children":1535},{"style":158},[1536],{"type":58,"value":657},{"type":52,"tag":93,"props":1538,"children":1539},{"style":158},[1540],{"type":58,"value":182},{"type":52,"tag":93,"props":1542,"children":1543},{"style":106},[1544],{"type":58,"value":666},{"type":52,"tag":93,"props":1546,"children":1547},{"style":158},[1548],{"type":58,"value":343},{"type":52,"tag":93,"props":1550,"children":1551},{"style":158},[1552],{"type":58,"value":675},{"type":52,"tag":93,"props":1554,"children":1555},{"class":95,"line":781},[1556,1561,1565,1569,1574],{"type":52,"tag":93,"props":1557,"children":1558},{"style":633},[1559],{"type":58,"value":1560}," render",{"type":52,"tag":93,"props":1562,"children":1563},{"style":158},[1564],{"type":58,"value":657},{"type":52,"tag":93,"props":1566,"children":1567},{"style":158},[1568],{"type":58,"value":692},{"type":52,"tag":93,"props":1570,"children":1571},{"style":100},[1572],{"type":58,"value":1573},"SolidQueryDevtoolsPanel",{"type":52,"tag":93,"props":1575,"children":1576},{"style":158},[1577],{"type":58,"value":702},{"type":52,"tag":93,"props":1579,"children":1580},{"class":95,"line":790},[1581],{"type":52,"tag":93,"props":1582,"children":1583},{"style":158},[1584],{"type":58,"value":1585}," },\n",{"type":52,"tag":93,"props":1587,"children":1589},{"class":95,"line":1588},16,[1590,1595],{"type":52,"tag":93,"props":1591,"children":1592},{"style":164},[1593],{"type":58,"value":1594}," ]",{"type":52,"tag":93,"props":1596,"children":1597},{"style":158},[1598],{"type":58,"value":1599},"}\n",{"type":52,"tag":93,"props":1601,"children":1603},{"class":95,"line":1602},17,[1604],{"type":52,"tag":93,"props":1605,"children":1606},{"style":158},[1607],{"type":58,"value":1608}," \u002F>\n",{"type":52,"tag":93,"props":1610,"children":1612},{"class":95,"line":1611},18,[1613],{"type":52,"tag":93,"props":1614,"children":1615},{"style":158},[1616],{"type":58,"value":1617}," \u003C\u002F>\n",{"type":52,"tag":93,"props":1619,"children":1621},{"class":95,"line":1620},19,[1622,1627],{"type":52,"tag":93,"props":1623,"children":1624},{"style":164},[1625],{"type":58,"value":1626}," )",{"type":52,"tag":93,"props":1628,"children":1629},{"style":158},[1630],{"type":58,"value":675},{"type":52,"tag":93,"props":1632,"children":1634},{"class":95,"line":1633},20,[1635,1640,1644,1648,1652,1656,1660,1664,1668],{"type":52,"tag":93,"props":1636,"children":1637},{"style":164},[1638],{"type":58,"value":1639}," document",{"type":52,"tag":93,"props":1641,"children":1642},{"style":158},[1643],{"type":58,"value":328},{"type":52,"tag":93,"props":1645,"children":1646},{"style":315},[1647],{"type":58,"value":333},{"type":52,"tag":93,"props":1649,"children":1650},{"style":164},[1651],{"type":58,"value":338},{"type":52,"tag":93,"props":1653,"children":1654},{"style":158},[1655],{"type":58,"value":343},{"type":52,"tag":93,"props":1657,"children":1658},{"style":106},[1659],{"type":58,"value":49},{"type":52,"tag":93,"props":1661,"children":1662},{"style":158},[1663],{"type":58,"value":343},{"type":52,"tag":93,"props":1665,"children":1666},{"style":164},[1667],{"type":58,"value":356},{"type":52,"tag":93,"props":1669,"children":1670},{"style":158},[1671],{"type":58,"value":1672},"!,\n",{"type":52,"tag":93,"props":1674,"children":1676},{"class":95,"line":1675},21,[1677],{"type":52,"tag":93,"props":1678,"children":1679},{"style":164},[1680],{"type":58,"value":460},{"type":52,"tag":68,"props":1682,"children":1684},{"id":1683},"preact",[1685],{"type":58,"value":1686},"Preact",{"type":52,"tag":81,"props":1688,"children":1690},{"className":83,"code":1689,"language":85,"meta":86,"style":86},"npm install -D @tanstack\u002Fpreact-devtools @tanstack\u002Fdevtools-vite\n",[1691],{"type":52,"tag":89,"props":1692,"children":1693},{"__ignoreMap":86},[1694],{"type":52,"tag":93,"props":1695,"children":1696},{"class":95,"line":96},[1697,1701,1705,1709,1714],{"type":52,"tag":93,"props":1698,"children":1699},{"style":100},[1700],{"type":58,"value":103},{"type":52,"tag":93,"props":1702,"children":1703},{"style":106},[1704],{"type":58,"value":109},{"type":52,"tag":93,"props":1706,"children":1707},{"style":106},[1708],{"type":58,"value":114},{"type":52,"tag":93,"props":1710,"children":1711},{"style":106},[1712],{"type":58,"value":1713}," @tanstack\u002Fpreact-devtools",{"type":52,"tag":93,"props":1715,"children":1716},{"style":106},[1717],{"type":58,"value":124},{"type":52,"tag":81,"props":1719,"children":1721},{"className":140,"code":1720,"language":142,"meta":86,"style":86},"import { render } from 'preact'\nimport { TanStackDevtools } from '@tanstack\u002Fpreact-devtools'\nimport App from '.\u002FApp'\n\nrender(\n \u003C>\n \u003CApp \u002F>\n \u003CTanStackDevtools\n plugins={[\n {\n name: 'Your Plugin',\n render: \u003CYourPluginComponent \u002F>,\n },\n ]}\n \u002F>\n \u003C\u002F>,\n document.getElementById('root')!,\n)\n",[1722],{"type":52,"tag":89,"props":1723,"children":1724},{"__ignoreMap":86},[1725,1760,1796,1823,1830,1841,1849,1864,1875,1891,1899,1928,1953,1961,1973,1981,1989,2028],{"type":52,"tag":93,"props":1726,"children":1727},{"class":95,"line":96},[1728,1732,1736,1740,1744,1748,1752,1756],{"type":52,"tag":93,"props":1729,"children":1730},{"style":152},[1731],{"type":58,"value":155},{"type":52,"tag":93,"props":1733,"children":1734},{"style":158},[1735],{"type":58,"value":161},{"type":52,"tag":93,"props":1737,"children":1738},{"style":164},[1739],{"type":58,"value":1308},{"type":52,"tag":93,"props":1741,"children":1742},{"style":158},[1743],{"type":58,"value":172},{"type":52,"tag":93,"props":1745,"children":1746},{"style":152},[1747],{"type":58,"value":177},{"type":52,"tag":93,"props":1749,"children":1750},{"style":158},[1751],{"type":58,"value":182},{"type":52,"tag":93,"props":1753,"children":1754},{"style":106},[1755],{"type":58,"value":1683},{"type":52,"tag":93,"props":1757,"children":1758},{"style":158},[1759],{"type":58,"value":191},{"type":52,"tag":93,"props":1761,"children":1762},{"class":95,"line":194},[1763,1767,1771,1775,1779,1783,1787,1792],{"type":52,"tag":93,"props":1764,"children":1765},{"style":152},[1766],{"type":58,"value":155},{"type":52,"tag":93,"props":1768,"children":1769},{"style":158},[1770],{"type":58,"value":161},{"type":52,"tag":93,"props":1772,"children":1773},{"style":164},[1774],{"type":58,"value":246},{"type":52,"tag":93,"props":1776,"children":1777},{"style":158},[1778],{"type":58,"value":172},{"type":52,"tag":93,"props":1780,"children":1781},{"style":152},[1782],{"type":58,"value":177},{"type":52,"tag":93,"props":1784,"children":1785},{"style":158},[1786],{"type":58,"value":182},{"type":52,"tag":93,"props":1788,"children":1789},{"style":106},[1790],{"type":58,"value":1791},"@tanstack\u002Fpreact-devtools",{"type":52,"tag":93,"props":1793,"children":1794},{"style":158},[1795],{"type":58,"value":191},{"type":52,"tag":93,"props":1797,"children":1798},{"class":95,"line":232},[1799,1803,1807,1811,1815,1819],{"type":52,"tag":93,"props":1800,"children":1801},{"style":152},[1802],{"type":58,"value":155},{"type":52,"tag":93,"props":1804,"children":1805},{"style":164},[1806],{"type":58,"value":280},{"type":52,"tag":93,"props":1808,"children":1809},{"style":152},[1810],{"type":58,"value":285},{"type":52,"tag":93,"props":1812,"children":1813},{"style":158},[1814],{"type":58,"value":182},{"type":52,"tag":93,"props":1816,"children":1817},{"style":106},[1818],{"type":58,"value":294},{"type":52,"tag":93,"props":1820,"children":1821},{"style":158},[1822],{"type":58,"value":191},{"type":52,"tag":93,"props":1824,"children":1825},{"class":95,"line":270},[1826],{"type":52,"tag":93,"props":1827,"children":1828},{"emptyLinePlaceholder":305},[1829],{"type":58,"value":308},{"type":52,"tag":93,"props":1831,"children":1832},{"class":95,"line":301},[1833,1837],{"type":52,"tag":93,"props":1834,"children":1835},{"style":315},[1836],{"type":58,"value":374},{"type":52,"tag":93,"props":1838,"children":1839},{"style":164},[1840],{"type":58,"value":379},{"type":52,"tag":93,"props":1842,"children":1843},{"class":95,"line":311},[1844],{"type":52,"tag":93,"props":1845,"children":1846},{"style":158},[1847],{"type":58,"value":1848}," \u003C>\n",{"type":52,"tag":93,"props":1850,"children":1851},{"class":95,"line":382},[1852,1856,1860],{"type":52,"tag":93,"props":1853,"children":1854},{"style":158},[1855],{"type":58,"value":407},{"type":52,"tag":93,"props":1857,"children":1858},{"style":100},[1859],{"type":58,"value":412},{"type":52,"tag":93,"props":1861,"children":1862},{"style":158},[1863],{"type":58,"value":417},{"type":52,"tag":93,"props":1865,"children":1866},{"class":95,"line":401},[1867,1871],{"type":52,"tag":93,"props":1868,"children":1869},{"style":158},[1870],{"type":58,"value":407},{"type":52,"tag":93,"props":1872,"children":1873},{"style":100},[1874],{"type":58,"value":617},{"type":52,"tag":93,"props":1876,"children":1877},{"class":95,"line":420},[1878,1883,1887],{"type":52,"tag":93,"props":1879,"children":1880},{"style":881},[1881],{"type":58,"value":1882}," plugins",{"type":52,"tag":93,"props":1884,"children":1885},{"style":158},[1886],{"type":58,"value":630},{"type":52,"tag":93,"props":1888,"children":1889},{"style":164},[1890],{"type":58,"value":636},{"type":52,"tag":93,"props":1892,"children":1893},{"class":95,"line":436},[1894],{"type":52,"tag":93,"props":1895,"children":1896},{"style":158},[1897],{"type":58,"value":1898}," {\n",{"type":52,"tag":93,"props":1900,"children":1901},{"class":95,"line":454},[1902,1907,1911,1915,1920,1924],{"type":52,"tag":93,"props":1903,"children":1904},{"style":633},[1905],{"type":58,"value":1906}," name",{"type":52,"tag":93,"props":1908,"children":1909},{"style":158},[1910],{"type":58,"value":657},{"type":52,"tag":93,"props":1912,"children":1913},{"style":158},[1914],{"type":58,"value":182},{"type":52,"tag":93,"props":1916,"children":1917},{"style":106},[1918],{"type":58,"value":1919},"Your Plugin",{"type":52,"tag":93,"props":1921,"children":1922},{"style":158},[1923],{"type":58,"value":343},{"type":52,"tag":93,"props":1925,"children":1926},{"style":158},[1927],{"type":58,"value":675},{"type":52,"tag":93,"props":1929,"children":1930},{"class":95,"line":748},[1931,1936,1940,1944,1949],{"type":52,"tag":93,"props":1932,"children":1933},{"style":633},[1934],{"type":58,"value":1935}," render",{"type":52,"tag":93,"props":1937,"children":1938},{"style":158},[1939],{"type":58,"value":657},{"type":52,"tag":93,"props":1941,"children":1942},{"style":158},[1943],{"type":58,"value":692},{"type":52,"tag":93,"props":1945,"children":1946},{"style":100},[1947],{"type":58,"value":1948},"YourPluginComponent",{"type":52,"tag":93,"props":1950,"children":1951},{"style":158},[1952],{"type":58,"value":702},{"type":52,"tag":93,"props":1954,"children":1955},{"class":95,"line":773},[1956],{"type":52,"tag":93,"props":1957,"children":1958},{"style":158},[1959],{"type":58,"value":1960}," },\n",{"type":52,"tag":93,"props":1962,"children":1963},{"class":95,"line":781},[1964,1969],{"type":52,"tag":93,"props":1965,"children":1966},{"style":164},[1967],{"type":58,"value":1968}," ]",{"type":52,"tag":93,"props":1970,"children":1971},{"style":158},[1972],{"type":58,"value":1599},{"type":52,"tag":93,"props":1974,"children":1975},{"class":95,"line":790},[1976],{"type":52,"tag":93,"props":1977,"children":1978},{"style":158},[1979],{"type":58,"value":1980}," \u002F>\n",{"type":52,"tag":93,"props":1982,"children":1983},{"class":95,"line":1588},[1984],{"type":52,"tag":93,"props":1985,"children":1986},{"style":158},[1987],{"type":58,"value":1988}," \u003C\u002F>,\n",{"type":52,"tag":93,"props":1990,"children":1991},{"class":95,"line":1602},[1992,1996,2000,2004,2008,2012,2016,2020,2024],{"type":52,"tag":93,"props":1993,"children":1994},{"style":164},[1995],{"type":58,"value":1639},{"type":52,"tag":93,"props":1997,"children":1998},{"style":158},[1999],{"type":58,"value":328},{"type":52,"tag":93,"props":2001,"children":2002},{"style":315},[2003],{"type":58,"value":333},{"type":52,"tag":93,"props":2005,"children":2006},{"style":164},[2007],{"type":58,"value":338},{"type":52,"tag":93,"props":2009,"children":2010},{"style":158},[2011],{"type":58,"value":343},{"type":52,"tag":93,"props":2013,"children":2014},{"style":106},[2015],{"type":58,"value":49},{"type":52,"tag":93,"props":2017,"children":2018},{"style":158},[2019],{"type":58,"value":343},{"type":52,"tag":93,"props":2021,"children":2022},{"style":164},[2023],{"type":58,"value":356},{"type":52,"tag":93,"props":2025,"children":2026},{"style":158},[2027],{"type":58,"value":1672},{"type":52,"tag":93,"props":2029,"children":2030},{"class":95,"line":1611},[2031],{"type":52,"tag":93,"props":2032,"children":2033},{"style":164},[2034],{"type":58,"value":460},{"type":52,"tag":61,"props":2036,"children":2038},{"id":2037},"core-patterns",[2039],{"type":58,"value":2040},"Core Patterns",{"type":52,"tag":68,"props":2042,"children":2044},{"id":2043},"shell-configuration",[2045],{"type":58,"value":2046},"Shell Configuration",{"type":52,"tag":75,"props":2048,"children":2049},{},[2050,2052,2058,2060,2065,2067,2073],{"type":58,"value":2051},"Pass a ",{"type":52,"tag":89,"props":2053,"children":2055},{"className":2054},[],[2056],{"type":58,"value":2057},"config",{"type":58,"value":2059}," prop to ",{"type":52,"tag":89,"props":2061,"children":2063},{"className":2062},[],[2064],{"type":58,"value":135},{"type":58,"value":2066}," to set initial shell behavior. These values are persisted to ",{"type":52,"tag":89,"props":2068,"children":2070},{"className":2069},[],[2071],{"type":58,"value":2072},"localStorage",{"type":58,"value":2074}," after first load and can be changed through the settings panel at runtime.",{"type":52,"tag":75,"props":2076,"children":2077},{},[2078],{"type":58,"value":2079},"Storage keys used internally:",{"type":52,"tag":2081,"props":2082,"children":2083},"ul",{},[2084,2096],{"type":52,"tag":2085,"props":2086,"children":2087},"li",{},[2088,2094],{"type":52,"tag":89,"props":2089,"children":2091},{"className":2090},[],[2092],{"type":58,"value":2093},"tanstack_devtools_settings",{"type":58,"value":2095}," -- persisted settings",{"type":52,"tag":2085,"props":2097,"children":2098},{},[2099,2105],{"type":52,"tag":89,"props":2100,"children":2102},{"className":2101},[],[2103],{"type":58,"value":2104},"tanstack_devtools_state",{"type":58,"value":2106}," -- persisted UI state (active tab, panel height, active plugins, persistOpen)",{"type":52,"tag":75,"props":2108,"children":2109},{},[2110],{"type":58,"value":2111},"All config properties are optional. Defaults shown below:",{"type":52,"tag":81,"props":2113,"children":2115},{"className":140,"code":2114,"language":142,"meta":86,"style":86},"\u003CTanStackDevtools\n config={{\n defaultOpen: false, \u002F\u002F open panel on mount\n hideUntilHover: false, \u002F\u002F hide trigger until mouse hover\n position: 'bottom-right', \u002F\u002F trigger position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'\n panelLocation: 'bottom', \u002F\u002F panel position: 'top' | 'bottom'\n openHotkey: ['Control', '~'],\n inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],\n requireUrlFlag: false, \u002F\u002F require URL param to show devtools\n urlFlag: 'tanstack-devtools', \u002F\u002F the URL param name when requireUrlFlag is true\n theme: 'dark', \u002F\u002F 'light' | 'dark' (defaults to system preference)\n triggerHidden: false, \u002F\u002F completely hide trigger (hotkey still works)\n }}\n\u002F>\n",[2116],{"type":52,"tag":89,"props":2117,"children":2118},{"__ignoreMap":86},[2119,2130,2143,2171,2196,2230,2264,2320,2391,2416,2450,2484,2509,2517],{"type":52,"tag":93,"props":2120,"children":2121},{"class":95,"line":96},[2122,2126],{"type":52,"tag":93,"props":2123,"children":2124},{"style":158},[2125],{"type":58,"value":873},{"type":52,"tag":93,"props":2127,"children":2128},{"style":100},[2129],{"type":58,"value":617},{"type":52,"tag":93,"props":2131,"children":2132},{"class":95,"line":194},[2133,2138],{"type":52,"tag":93,"props":2134,"children":2135},{"style":881},[2136],{"type":58,"value":2137}," config",{"type":52,"tag":93,"props":2139,"children":2140},{"style":158},[2141],{"type":58,"value":2142},"={{\n",{"type":52,"tag":93,"props":2144,"children":2145},{"class":95,"line":232},[2146,2151,2155,2161,2165],{"type":52,"tag":93,"props":2147,"children":2148},{"style":633},[2149],{"type":58,"value":2150}," defaultOpen",{"type":52,"tag":93,"props":2152,"children":2153},{"style":158},[2154],{"type":58,"value":657},{"type":52,"tag":93,"props":2156,"children":2158},{"style":2157},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[2159],{"type":58,"value":2160}," false",{"type":52,"tag":93,"props":2162,"children":2163},{"style":158},[2164],{"type":58,"value":1103},{"type":52,"tag":93,"props":2166,"children":2168},{"style":2167},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[2169],{"type":58,"value":2170}," \u002F\u002F open panel on mount\n",{"type":52,"tag":93,"props":2172,"children":2173},{"class":95,"line":270},[2174,2179,2183,2187,2191],{"type":52,"tag":93,"props":2175,"children":2176},{"style":633},[2177],{"type":58,"value":2178}," hideUntilHover",{"type":52,"tag":93,"props":2180,"children":2181},{"style":158},[2182],{"type":58,"value":657},{"type":52,"tag":93,"props":2184,"children":2185},{"style":2157},[2186],{"type":58,"value":2160},{"type":52,"tag":93,"props":2188,"children":2189},{"style":158},[2190],{"type":58,"value":1103},{"type":52,"tag":93,"props":2192,"children":2193},{"style":2167},[2194],{"type":58,"value":2195}," \u002F\u002F hide trigger until mouse hover\n",{"type":52,"tag":93,"props":2197,"children":2198},{"class":95,"line":301},[2199,2204,2208,2212,2217,2221,2225],{"type":52,"tag":93,"props":2200,"children":2201},{"style":633},[2202],{"type":58,"value":2203}," position",{"type":52,"tag":93,"props":2205,"children":2206},{"style":158},[2207],{"type":58,"value":657},{"type":52,"tag":93,"props":2209,"children":2210},{"style":158},[2211],{"type":58,"value":182},{"type":52,"tag":93,"props":2213,"children":2214},{"style":106},[2215],{"type":58,"value":2216},"bottom-right",{"type":52,"tag":93,"props":2218,"children":2219},{"style":158},[2220],{"type":58,"value":343},{"type":52,"tag":93,"props":2222,"children":2223},{"style":158},[2224],{"type":58,"value":1103},{"type":52,"tag":93,"props":2226,"children":2227},{"style":2167},[2228],{"type":58,"value":2229}," \u002F\u002F trigger position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'\n",{"type":52,"tag":93,"props":2231,"children":2232},{"class":95,"line":311},[2233,2238,2242,2246,2251,2255,2259],{"type":52,"tag":93,"props":2234,"children":2235},{"style":633},[2236],{"type":58,"value":2237}," panelLocation",{"type":52,"tag":93,"props":2239,"children":2240},{"style":158},[2241],{"type":58,"value":657},{"type":52,"tag":93,"props":2243,"children":2244},{"style":158},[2245],{"type":58,"value":182},{"type":52,"tag":93,"props":2247,"children":2248},{"style":106},[2249],{"type":58,"value":2250},"bottom",{"type":52,"tag":93,"props":2252,"children":2253},{"style":158},[2254],{"type":58,"value":343},{"type":52,"tag":93,"props":2256,"children":2257},{"style":158},[2258],{"type":58,"value":1103},{"type":52,"tag":93,"props":2260,"children":2261},{"style":2167},[2262],{"type":58,"value":2263}," \u002F\u002F panel position: 'top' | 'bottom'\n",{"type":52,"tag":93,"props":2265,"children":2266},{"class":95,"line":382},[2267,2272,2276,2281,2285,2290,2294,2298,2302,2307,2311,2316],{"type":52,"tag":93,"props":2268,"children":2269},{"style":633},[2270],{"type":58,"value":2271}," openHotkey",{"type":52,"tag":93,"props":2273,"children":2274},{"style":158},[2275],{"type":58,"value":657},{"type":52,"tag":93,"props":2277,"children":2278},{"style":164},[2279],{"type":58,"value":2280}," [",{"type":52,"tag":93,"props":2282,"children":2283},{"style":158},[2284],{"type":58,"value":343},{"type":52,"tag":93,"props":2286,"children":2287},{"style":106},[2288],{"type":58,"value":2289},"Control",{"type":52,"tag":93,"props":2291,"children":2292},{"style":158},[2293],{"type":58,"value":343},{"type":52,"tag":93,"props":2295,"children":2296},{"style":158},[2297],{"type":58,"value":1103},{"type":52,"tag":93,"props":2299,"children":2300},{"style":158},[2301],{"type":58,"value":182},{"type":52,"tag":93,"props":2303,"children":2304},{"style":106},[2305],{"type":58,"value":2306},"~",{"type":52,"tag":93,"props":2308,"children":2309},{"style":158},[2310],{"type":58,"value":343},{"type":52,"tag":93,"props":2312,"children":2313},{"style":164},[2314],{"type":58,"value":2315},"]",{"type":52,"tag":93,"props":2317,"children":2318},{"style":158},[2319],{"type":58,"value":675},{"type":52,"tag":93,"props":2321,"children":2322},{"class":95,"line":401},[2323,2328,2332,2336,2340,2345,2349,2353,2357,2362,2366,2370,2374,2379,2383,2387],{"type":52,"tag":93,"props":2324,"children":2325},{"style":633},[2326],{"type":58,"value":2327}," inspectHotkey",{"type":52,"tag":93,"props":2329,"children":2330},{"style":158},[2331],{"type":58,"value":657},{"type":52,"tag":93,"props":2333,"children":2334},{"style":164},[2335],{"type":58,"value":2280},{"type":52,"tag":93,"props":2337,"children":2338},{"style":158},[2339],{"type":58,"value":343},{"type":52,"tag":93,"props":2341,"children":2342},{"style":106},[2343],{"type":58,"value":2344},"Shift",{"type":52,"tag":93,"props":2346,"children":2347},{"style":158},[2348],{"type":58,"value":343},{"type":52,"tag":93,"props":2350,"children":2351},{"style":158},[2352],{"type":58,"value":1103},{"type":52,"tag":93,"props":2354,"children":2355},{"style":158},[2356],{"type":58,"value":182},{"type":52,"tag":93,"props":2358,"children":2359},{"style":106},[2360],{"type":58,"value":2361},"Alt",{"type":52,"tag":93,"props":2363,"children":2364},{"style":158},[2365],{"type":58,"value":343},{"type":52,"tag":93,"props":2367,"children":2368},{"style":158},[2369],{"type":58,"value":1103},{"type":52,"tag":93,"props":2371,"children":2372},{"style":158},[2373],{"type":58,"value":182},{"type":52,"tag":93,"props":2375,"children":2376},{"style":106},[2377],{"type":58,"value":2378},"CtrlOrMeta",{"type":52,"tag":93,"props":2380,"children":2381},{"style":158},[2382],{"type":58,"value":343},{"type":52,"tag":93,"props":2384,"children":2385},{"style":164},[2386],{"type":58,"value":2315},{"type":52,"tag":93,"props":2388,"children":2389},{"style":158},[2390],{"type":58,"value":675},{"type":52,"tag":93,"props":2392,"children":2393},{"class":95,"line":420},[2394,2399,2403,2407,2411],{"type":52,"tag":93,"props":2395,"children":2396},{"style":633},[2397],{"type":58,"value":2398}," requireUrlFlag",{"type":52,"tag":93,"props":2400,"children":2401},{"style":158},[2402],{"type":58,"value":657},{"type":52,"tag":93,"props":2404,"children":2405},{"style":2157},[2406],{"type":58,"value":2160},{"type":52,"tag":93,"props":2408,"children":2409},{"style":158},[2410],{"type":58,"value":1103},{"type":52,"tag":93,"props":2412,"children":2413},{"style":2167},[2414],{"type":58,"value":2415}," \u002F\u002F require URL param to show devtools\n",{"type":52,"tag":93,"props":2417,"children":2418},{"class":95,"line":436},[2419,2424,2428,2432,2437,2441,2445],{"type":52,"tag":93,"props":2420,"children":2421},{"style":633},[2422],{"type":58,"value":2423}," urlFlag",{"type":52,"tag":93,"props":2425,"children":2426},{"style":158},[2427],{"type":58,"value":657},{"type":52,"tag":93,"props":2429,"children":2430},{"style":158},[2431],{"type":58,"value":182},{"type":52,"tag":93,"props":2433,"children":2434},{"style":106},[2435],{"type":58,"value":2436},"tanstack-devtools",{"type":52,"tag":93,"props":2438,"children":2439},{"style":158},[2440],{"type":58,"value":343},{"type":52,"tag":93,"props":2442,"children":2443},{"style":158},[2444],{"type":58,"value":1103},{"type":52,"tag":93,"props":2446,"children":2447},{"style":2167},[2448],{"type":58,"value":2449}," \u002F\u002F the URL param name when requireUrlFlag is true\n",{"type":52,"tag":93,"props":2451,"children":2452},{"class":95,"line":454},[2453,2458,2462,2466,2471,2475,2479],{"type":52,"tag":93,"props":2454,"children":2455},{"style":633},[2456],{"type":58,"value":2457}," theme",{"type":52,"tag":93,"props":2459,"children":2460},{"style":158},[2461],{"type":58,"value":657},{"type":52,"tag":93,"props":2463,"children":2464},{"style":158},[2465],{"type":58,"value":182},{"type":52,"tag":93,"props":2467,"children":2468},{"style":106},[2469],{"type":58,"value":2470},"dark",{"type":52,"tag":93,"props":2472,"children":2473},{"style":158},[2474],{"type":58,"value":343},{"type":52,"tag":93,"props":2476,"children":2477},{"style":158},[2478],{"type":58,"value":1103},{"type":52,"tag":93,"props":2480,"children":2481},{"style":2167},[2482],{"type":58,"value":2483}," \u002F\u002F 'light' | 'dark' (defaults to system preference)\n",{"type":52,"tag":93,"props":2485,"children":2486},{"class":95,"line":748},[2487,2492,2496,2500,2504],{"type":52,"tag":93,"props":2488,"children":2489},{"style":633},[2490],{"type":58,"value":2491}," triggerHidden",{"type":52,"tag":93,"props":2493,"children":2494},{"style":158},[2495],{"type":58,"value":657},{"type":52,"tag":93,"props":2497,"children":2498},{"style":2157},[2499],{"type":58,"value":2160},{"type":52,"tag":93,"props":2501,"children":2502},{"style":158},[2503],{"type":58,"value":1103},{"type":52,"tag":93,"props":2505,"children":2506},{"style":2167},[2507],{"type":58,"value":2508}," \u002F\u002F completely hide trigger (hotkey still works)\n",{"type":52,"tag":93,"props":2510,"children":2511},{"class":95,"line":773},[2512],{"type":52,"tag":93,"props":2513,"children":2514},{"style":158},[2515],{"type":58,"value":2516}," }}\n",{"type":52,"tag":93,"props":2518,"children":2519},{"class":95,"line":781},[2520],{"type":52,"tag":93,"props":2521,"children":2522},{"style":158},[2523],{"type":58,"value":796},{"type":52,"tag":68,"props":2525,"children":2527},{"id":2526},"event-bus-configuration",[2528],{"type":58,"value":2529},"Event Bus Configuration",{"type":52,"tag":75,"props":2531,"children":2532},{},[2533,2535,2541],{"type":58,"value":2534},"The ",{"type":52,"tag":89,"props":2536,"children":2538},{"className":2537},[],[2539],{"type":58,"value":2540},"eventBusConfig",{"type":58,"value":2542}," prop configures the client-side event bus that plugins use for communication:",{"type":52,"tag":81,"props":2544,"children":2546},{"className":140,"code":2545,"language":142,"meta":86,"style":86},"\u003CTanStackDevtools\n eventBusConfig={{\n debug: false, \u002F\u002F enable debug logging for the event bus\n connectToServerBus: false, \u002F\u002F connect to the Vite plugin server event bus\n port: 3000, \u002F\u002F port for server event bus connection\n }}\n\u002F>\n",[2547],{"type":52,"tag":89,"props":2548,"children":2549},{"__ignoreMap":86},[2550,2561,2573,2598,2623,2650,2657],{"type":52,"tag":93,"props":2551,"children":2552},{"class":95,"line":96},[2553,2557],{"type":52,"tag":93,"props":2554,"children":2555},{"style":158},[2556],{"type":58,"value":873},{"type":52,"tag":93,"props":2558,"children":2559},{"style":100},[2560],{"type":58,"value":617},{"type":52,"tag":93,"props":2562,"children":2563},{"class":95,"line":194},[2564,2569],{"type":52,"tag":93,"props":2565,"children":2566},{"style":881},[2567],{"type":58,"value":2568}," eventBusConfig",{"type":52,"tag":93,"props":2570,"children":2571},{"style":158},[2572],{"type":58,"value":2142},{"type":52,"tag":93,"props":2574,"children":2575},{"class":95,"line":232},[2576,2581,2585,2589,2593],{"type":52,"tag":93,"props":2577,"children":2578},{"style":633},[2579],{"type":58,"value":2580}," debug",{"type":52,"tag":93,"props":2582,"children":2583},{"style":158},[2584],{"type":58,"value":657},{"type":52,"tag":93,"props":2586,"children":2587},{"style":2157},[2588],{"type":58,"value":2160},{"type":52,"tag":93,"props":2590,"children":2591},{"style":158},[2592],{"type":58,"value":1103},{"type":52,"tag":93,"props":2594,"children":2595},{"style":2167},[2596],{"type":58,"value":2597}," \u002F\u002F enable debug logging for the event bus\n",{"type":52,"tag":93,"props":2599,"children":2600},{"class":95,"line":270},[2601,2606,2610,2614,2618],{"type":52,"tag":93,"props":2602,"children":2603},{"style":633},[2604],{"type":58,"value":2605}," connectToServerBus",{"type":52,"tag":93,"props":2607,"children":2608},{"style":158},[2609],{"type":58,"value":657},{"type":52,"tag":93,"props":2611,"children":2612},{"style":2157},[2613],{"type":58,"value":2160},{"type":52,"tag":93,"props":2615,"children":2616},{"style":158},[2617],{"type":58,"value":1103},{"type":52,"tag":93,"props":2619,"children":2620},{"style":2167},[2621],{"type":58,"value":2622}," \u002F\u002F connect to the Vite plugin server event bus\n",{"type":52,"tag":93,"props":2624,"children":2625},{"class":95,"line":301},[2626,2631,2635,2641,2645],{"type":52,"tag":93,"props":2627,"children":2628},{"style":633},[2629],{"type":58,"value":2630}," port",{"type":52,"tag":93,"props":2632,"children":2633},{"style":158},[2634],{"type":58,"value":657},{"type":52,"tag":93,"props":2636,"children":2638},{"style":2637},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2639],{"type":58,"value":2640}," 3000",{"type":52,"tag":93,"props":2642,"children":2643},{"style":158},[2644],{"type":58,"value":1103},{"type":52,"tag":93,"props":2646,"children":2647},{"style":2167},[2648],{"type":58,"value":2649}," \u002F\u002F port for server event bus connection\n",{"type":52,"tag":93,"props":2651,"children":2652},{"class":95,"line":311},[2653],{"type":52,"tag":93,"props":2654,"children":2655},{"style":158},[2656],{"type":58,"value":2516},{"type":52,"tag":93,"props":2658,"children":2659},{"class":95,"line":382},[2660],{"type":52,"tag":93,"props":2661,"children":2662},{"style":158},[2663],{"type":58,"value":796},{"type":52,"tag":75,"props":2665,"children":2666},{},[2667,2669,2674],{"type":58,"value":2668},"The server event bus requires the ",{"type":52,"tag":89,"props":2670,"children":2672},{"className":2671},[],[2673],{"type":58,"value":1246},{"type":58,"value":2675}," plugin to be running.",{"type":52,"tag":68,"props":2677,"children":2679},{"id":2678},"plugin-registration-with-defaultopen",[2680],{"type":58,"value":2681},"Plugin Registration with defaultOpen",{"type":52,"tag":75,"props":2683,"children":2684},{},[2685,2687,2693],{"type":58,"value":2686},"Each plugin entry can include a ",{"type":52,"tag":89,"props":2688,"children":2690},{"className":2689},[],[2691],{"type":58,"value":2692},"defaultOpen",{"type":58,"value":2694}," flag to control whether that plugin tab is active when devtools first opens:",{"type":52,"tag":81,"props":2696,"children":2698},{"className":140,"code":2697,"language":142,"meta":86,"style":86},"import { TanStackDevtools } from '@tanstack\u002Freact-devtools'\nimport { FormDevtools } from '@tanstack\u002Freact-form'\n;\u003CTanStackDevtools\n config={{ hideUntilHover: true }}\n eventBusConfig={{ debug: true }}\n plugins={[\n {\n name: 'TanStack Form',\n render: \u003CFormDevtools \u002F>,\n defaultOpen: true,\n },\n ]}\n\u002F>\n",[2699],{"type":52,"tag":89,"props":2700,"children":2701},{"__ignoreMap":86},[2702,2737,2774,2785,2816,2844,2859,2866,2894,2918,2938,2945,2952],{"type":52,"tag":93,"props":2703,"children":2704},{"class":95,"line":96},[2705,2709,2713,2717,2721,2725,2729,2733],{"type":52,"tag":93,"props":2706,"children":2707},{"style":152},[2708],{"type":58,"value":155},{"type":52,"tag":93,"props":2710,"children":2711},{"style":158},[2712],{"type":58,"value":161},{"type":52,"tag":93,"props":2714,"children":2715},{"style":164},[2716],{"type":58,"value":246},{"type":52,"tag":93,"props":2718,"children":2719},{"style":158},[2720],{"type":58,"value":172},{"type":52,"tag":93,"props":2722,"children":2723},{"style":152},[2724],{"type":58,"value":177},{"type":52,"tag":93,"props":2726,"children":2727},{"style":158},[2728],{"type":58,"value":182},{"type":52,"tag":93,"props":2730,"children":2731},{"style":106},[2732],{"type":58,"value":263},{"type":52,"tag":93,"props":2734,"children":2735},{"style":158},[2736],{"type":58,"value":191},{"type":52,"tag":93,"props":2738,"children":2739},{"class":95,"line":194},[2740,2744,2748,2753,2757,2761,2765,2770],{"type":52,"tag":93,"props":2741,"children":2742},{"style":152},[2743],{"type":58,"value":155},{"type":52,"tag":93,"props":2745,"children":2746},{"style":158},[2747],{"type":58,"value":161},{"type":52,"tag":93,"props":2749,"children":2750},{"style":164},[2751],{"type":58,"value":2752}," FormDevtools",{"type":52,"tag":93,"props":2754,"children":2755},{"style":158},[2756],{"type":58,"value":172},{"type":52,"tag":93,"props":2758,"children":2759},{"style":152},[2760],{"type":58,"value":177},{"type":52,"tag":93,"props":2762,"children":2763},{"style":158},[2764],{"type":58,"value":182},{"type":52,"tag":93,"props":2766,"children":2767},{"style":106},[2768],{"type":58,"value":2769},"@tanstack\u002Freact-form",{"type":52,"tag":93,"props":2771,"children":2772},{"style":158},[2773],{"type":58,"value":191},{"type":52,"tag":93,"props":2775,"children":2776},{"class":95,"line":232},[2777,2781],{"type":52,"tag":93,"props":2778,"children":2779},{"style":158},[2780],{"type":58,"value":612},{"type":52,"tag":93,"props":2782,"children":2783},{"style":164},[2784],{"type":58,"value":617},{"type":52,"tag":93,"props":2786,"children":2787},{"class":95,"line":270},[2788,2792,2797,2802,2806,2811],{"type":52,"tag":93,"props":2789,"children":2790},{"style":164},[2791],{"type":58,"value":2137},{"type":52,"tag":93,"props":2793,"children":2794},{"style":158},[2795],{"type":58,"value":2796},"={{",{"type":52,"tag":93,"props":2798,"children":2799},{"style":100},[2800],{"type":58,"value":2801}," hideUntilHover",{"type":52,"tag":93,"props":2803,"children":2804},{"style":158},[2805],{"type":58,"value":657},{"type":52,"tag":93,"props":2807,"children":2808},{"style":2157},[2809],{"type":58,"value":2810}," true",{"type":52,"tag":93,"props":2812,"children":2813},{"style":158},[2814],{"type":58,"value":2815}," }}\n",{"type":52,"tag":93,"props":2817,"children":2818},{"class":95,"line":301},[2819,2823,2827,2832,2836,2840],{"type":52,"tag":93,"props":2820,"children":2821},{"style":164},[2822],{"type":58,"value":2568},{"type":52,"tag":93,"props":2824,"children":2825},{"style":158},[2826],{"type":58,"value":2796},{"type":52,"tag":93,"props":2828,"children":2829},{"style":100},[2830],{"type":58,"value":2831}," debug",{"type":52,"tag":93,"props":2833,"children":2834},{"style":158},[2835],{"type":58,"value":657},{"type":52,"tag":93,"props":2837,"children":2838},{"style":2157},[2839],{"type":58,"value":2810},{"type":52,"tag":93,"props":2841,"children":2842},{"style":158},[2843],{"type":58,"value":2815},{"type":52,"tag":93,"props":2845,"children":2846},{"class":95,"line":311},[2847,2851,2855],{"type":52,"tag":93,"props":2848,"children":2849},{"style":164},[2850],{"type":58,"value":625},{"type":52,"tag":93,"props":2852,"children":2853},{"style":158},[2854],{"type":58,"value":630},{"type":52,"tag":93,"props":2856,"children":2857},{"style":633},[2858],{"type":58,"value":636},{"type":52,"tag":93,"props":2860,"children":2861},{"class":95,"line":382},[2862],{"type":52,"tag":93,"props":2863,"children":2864},{"style":158},[2865],{"type":58,"value":644},{"type":52,"tag":93,"props":2867,"children":2868},{"class":95,"line":401},[2869,2873,2877,2881,2886,2890],{"type":52,"tag":93,"props":2870,"children":2871},{"style":633},[2872],{"type":58,"value":652},{"type":52,"tag":93,"props":2874,"children":2875},{"style":158},[2876],{"type":58,"value":657},{"type":52,"tag":93,"props":2878,"children":2879},{"style":158},[2880],{"type":58,"value":182},{"type":52,"tag":93,"props":2882,"children":2883},{"style":633},[2884],{"type":58,"value":2885},"TanStack Form",{"type":52,"tag":93,"props":2887,"children":2888},{"style":158},[2889],{"type":58,"value":343},{"type":52,"tag":93,"props":2891,"children":2892},{"style":158},[2893],{"type":58,"value":675},{"type":52,"tag":93,"props":2895,"children":2896},{"class":95,"line":420},[2897,2901,2905,2909,2914],{"type":52,"tag":93,"props":2898,"children":2899},{"style":633},[2900],{"type":58,"value":683},{"type":52,"tag":93,"props":2902,"children":2903},{"style":158},[2904],{"type":58,"value":657},{"type":52,"tag":93,"props":2906,"children":2907},{"style":158},[2908],{"type":58,"value":692},{"type":52,"tag":93,"props":2910,"children":2911},{"style":100},[2912],{"type":58,"value":2913},"FormDevtools",{"type":52,"tag":93,"props":2915,"children":2916},{"style":158},[2917],{"type":58,"value":702},{"type":52,"tag":93,"props":2919,"children":2920},{"class":95,"line":436},[2921,2926,2930,2934],{"type":52,"tag":93,"props":2922,"children":2923},{"style":633},[2924],{"type":58,"value":2925}," defaultOpen",{"type":52,"tag":93,"props":2927,"children":2928},{"style":158},[2929],{"type":58,"value":657},{"type":52,"tag":93,"props":2931,"children":2932},{"style":2157},[2933],{"type":58,"value":2810},{"type":52,"tag":93,"props":2935,"children":2936},{"style":158},[2937],{"type":58,"value":675},{"type":52,"tag":93,"props":2939,"children":2940},{"class":95,"line":454},[2941],{"type":52,"tag":93,"props":2942,"children":2943},{"style":158},[2944],{"type":58,"value":710},{"type":52,"tag":93,"props":2946,"children":2947},{"class":95,"line":748},[2948],{"type":52,"tag":93,"props":2949,"children":2950},{"style":633},[2951],{"type":58,"value":787},{"type":52,"tag":93,"props":2953,"children":2954},{"class":95,"line":773},[2955],{"type":52,"tag":93,"props":2956,"children":2957},{"style":633},[2958],{"type":58,"value":796},{"type":52,"tag":68,"props":2960,"children":2962},{"id":2961},"conditional-devtools-with-url-flag",[2963],{"type":58,"value":2964},"Conditional Devtools with URL Flag",{"type":52,"tag":75,"props":2966,"children":2967},{},[2968,2970,2976],{"type":58,"value":2969},"Use ",{"type":52,"tag":89,"props":2971,"children":2973},{"className":2972},[],[2974],{"type":58,"value":2975},"requireUrlFlag",{"type":58,"value":2977}," to hide devtools unless a specific URL parameter is present. This is useful for staging environments or team-internal debugging:",{"type":52,"tag":81,"props":2979,"children":2981},{"className":140,"code":2980,"language":142,"meta":86,"style":86},"\u003CTanStackDevtools\n config={{\n requireUrlFlag: true,\n urlFlag: 'tanstack-devtools', \u002F\u002F visit ?tanstack-devtools to enable\n }}\n\u002F>\n",[2982],{"type":52,"tag":89,"props":2983,"children":2984},{"__ignoreMap":86},[2985,2996,3007,3026,3058,3065],{"type":52,"tag":93,"props":2986,"children":2987},{"class":95,"line":96},[2988,2992],{"type":52,"tag":93,"props":2989,"children":2990},{"style":158},[2991],{"type":58,"value":873},{"type":52,"tag":93,"props":2993,"children":2994},{"style":100},[2995],{"type":58,"value":617},{"type":52,"tag":93,"props":2997,"children":2998},{"class":95,"line":194},[2999,3003],{"type":52,"tag":93,"props":3000,"children":3001},{"style":881},[3002],{"type":58,"value":2137},{"type":52,"tag":93,"props":3004,"children":3005},{"style":158},[3006],{"type":58,"value":2142},{"type":52,"tag":93,"props":3008,"children":3009},{"class":95,"line":232},[3010,3014,3018,3022],{"type":52,"tag":93,"props":3011,"children":3012},{"style":633},[3013],{"type":58,"value":2398},{"type":52,"tag":93,"props":3015,"children":3016},{"style":158},[3017],{"type":58,"value":657},{"type":52,"tag":93,"props":3019,"children":3020},{"style":2157},[3021],{"type":58,"value":2810},{"type":52,"tag":93,"props":3023,"children":3024},{"style":158},[3025],{"type":58,"value":675},{"type":52,"tag":93,"props":3027,"children":3028},{"class":95,"line":270},[3029,3033,3037,3041,3045,3049,3053],{"type":52,"tag":93,"props":3030,"children":3031},{"style":633},[3032],{"type":58,"value":2423},{"type":52,"tag":93,"props":3034,"children":3035},{"style":158},[3036],{"type":58,"value":657},{"type":52,"tag":93,"props":3038,"children":3039},{"style":158},[3040],{"type":58,"value":182},{"type":52,"tag":93,"props":3042,"children":3043},{"style":106},[3044],{"type":58,"value":2436},{"type":52,"tag":93,"props":3046,"children":3047},{"style":158},[3048],{"type":58,"value":343},{"type":52,"tag":93,"props":3050,"children":3051},{"style":158},[3052],{"type":58,"value":1103},{"type":52,"tag":93,"props":3054,"children":3055},{"style":2167},[3056],{"type":58,"value":3057}," \u002F\u002F visit ?tanstack-devtools to enable\n",{"type":52,"tag":93,"props":3059,"children":3060},{"class":95,"line":301},[3061],{"type":52,"tag":93,"props":3062,"children":3063},{"style":158},[3064],{"type":58,"value":2516},{"type":52,"tag":93,"props":3066,"children":3067},{"class":95,"line":311},[3068],{"type":52,"tag":93,"props":3069,"children":3070},{"style":158},[3071],{"type":58,"value":796},{"type":52,"tag":61,"props":3073,"children":3075},{"id":3074},"common-mistakes",[3076],{"type":58,"value":3077},"Common Mistakes",{"type":52,"tag":68,"props":3079,"children":3081},{"id":3080},"critical-vue-plugin-uses-render-instead-of-component",[3082,3084,3089,3091],{"type":58,"value":3083},"CRITICAL: Vue plugin uses ",{"type":52,"tag":89,"props":3085,"children":3087},{"className":3086},[],[3088],{"type":58,"value":374},{"type":58,"value":3090}," instead of ",{"type":52,"tag":89,"props":3092,"children":3094},{"className":3093},[],[3095],{"type":58,"value":840},{"type":52,"tag":75,"props":3097,"children":3098},{},[3099,3101,3106,3108,3114,3116,3121,3123,3128],{"type":58,"value":3100},"The Vue adapter uses ",{"type":52,"tag":89,"props":3102,"children":3104},{"className":3103},[],[3105],{"type":58,"value":840},{"type":58,"value":3107}," (a Vue component reference) and optional ",{"type":52,"tag":89,"props":3109,"children":3111},{"className":3110},[],[3112],{"type":58,"value":3113},"props",{"type":58,"value":3115},", not JSX ",{"type":52,"tag":89,"props":3117,"children":3119},{"className":3118},[],[3120],{"type":58,"value":374},{"type":58,"value":3122},". Using ",{"type":52,"tag":89,"props":3124,"children":3126},{"className":3125},[],[3127],{"type":58,"value":374},{"type":58,"value":3129}," produces a silent failure -- the plugin tab appears but renders nothing.",{"type":52,"tag":75,"props":3131,"children":3132},{},[3133],{"type":58,"value":3134},"Wrong:",{"type":52,"tag":81,"props":3136,"children":3138},{"className":860,"code":3137,"language":799,"meta":86,"style":86},"\u003C!-- This silently fails - render is ignored in Vue adapter -->\n\u003Cscript setup lang=\"ts\">\nconst plugins = [{ name: 'My Plugin', render: MyComponent }]\n\u003C\u002Fscript>\n",[3139],{"type":52,"tag":89,"props":3140,"children":3141},{"__ignoreMap":86},[3142,3150,3189,3261],{"type":52,"tag":93,"props":3143,"children":3144},{"class":95,"line":96},[3145],{"type":52,"tag":93,"props":3146,"children":3147},{"style":2167},[3148],{"type":58,"value":3149},"\u003C!-- This silently fails - render is ignored in Vue adapter -->\n",{"type":52,"tag":93,"props":3151,"children":3152},{"class":95,"line":194},[3153,3157,3161,3165,3169,3173,3177,3181,3185],{"type":52,"tag":93,"props":3154,"children":3155},{"style":158},[3156],{"type":58,"value":873},{"type":52,"tag":93,"props":3158,"children":3159},{"style":633},[3160],{"type":58,"value":878},{"type":52,"tag":93,"props":3162,"children":3163},{"style":881},[3164],{"type":58,"value":884},{"type":52,"tag":93,"props":3166,"children":3167},{"style":881},[3168],{"type":58,"value":889},{"type":52,"tag":93,"props":3170,"children":3171},{"style":158},[3172],{"type":58,"value":894},{"type":52,"tag":93,"props":3174,"children":3175},{"style":158},[3176],{"type":58,"value":899},{"type":52,"tag":93,"props":3178,"children":3179},{"style":106},[3180],{"type":58,"value":904},{"type":52,"tag":93,"props":3182,"children":3183},{"style":158},[3184],{"type":58,"value":899},{"type":52,"tag":93,"props":3186,"children":3187},{"style":158},[3188],{"type":58,"value":398},{"type":52,"tag":93,"props":3190,"children":3191},{"class":95,"line":232},[3192,3196,3201,3205,3209,3214,3218,3222,3226,3231,3235,3239,3243,3247,3252,3257],{"type":52,"tag":93,"props":3193,"children":3194},{"style":881},[3195],{"type":58,"value":1041},{"type":52,"tag":93,"props":3197,"children":3198},{"style":164},[3199],{"type":58,"value":3200}," plugins ",{"type":52,"tag":93,"props":3202,"children":3203},{"style":158},[3204],{"type":58,"value":894},{"type":52,"tag":93,"props":3206,"children":3207},{"style":164},[3208],{"type":58,"value":2280},{"type":52,"tag":93,"props":3210,"children":3211},{"style":158},[3212],{"type":58,"value":3213},"{",{"type":52,"tag":93,"props":3215,"children":3216},{"style":633},[3217],{"type":58,"value":1081},{"type":52,"tag":93,"props":3219,"children":3220},{"style":158},[3221],{"type":58,"value":657},{"type":52,"tag":93,"props":3223,"children":3224},{"style":158},[3225],{"type":58,"value":182},{"type":52,"tag":93,"props":3227,"children":3228},{"style":106},[3229],{"type":58,"value":3230},"My Plugin",{"type":52,"tag":93,"props":3232,"children":3233},{"style":158},[3234],{"type":58,"value":343},{"type":52,"tag":93,"props":3236,"children":3237},{"style":158},[3238],{"type":58,"value":1103},{"type":52,"tag":93,"props":3240,"children":3241},{"style":633},[3242],{"type":58,"value":1308},{"type":52,"tag":93,"props":3244,"children":3245},{"style":158},[3246],{"type":58,"value":657},{"type":52,"tag":93,"props":3248,"children":3249},{"style":164},[3250],{"type":58,"value":3251}," MyComponent ",{"type":52,"tag":93,"props":3253,"children":3254},{"style":158},[3255],{"type":58,"value":3256},"}",{"type":52,"tag":93,"props":3258,"children":3259},{"style":164},[3260],{"type":58,"value":1130},{"type":52,"tag":93,"props":3262,"children":3263},{"class":95,"line":270},[3264,3268,3272],{"type":52,"tag":93,"props":3265,"children":3266},{"style":158},[3267],{"type":58,"value":1138},{"type":52,"tag":93,"props":3269,"children":3270},{"style":633},[3271],{"type":58,"value":878},{"type":52,"tag":93,"props":3273,"children":3274},{"style":158},[3275],{"type":58,"value":398},{"type":52,"tag":75,"props":3277,"children":3278},{},[3279],{"type":58,"value":3280},"Correct:",{"type":52,"tag":81,"props":3282,"children":3284},{"className":860,"code":3283,"language":799,"meta":86,"style":86},"\u003Cscript setup lang=\"ts\">\nimport type { TanStackDevtoolsVuePlugin } from '@tanstack\u002Fvue-devtools'\n\nconst plugins: TanStackDevtoolsVuePlugin[] = [\n { name: 'My Plugin', component: MyComponent },\n]\n\u003C\u002Fscript>\n",[3285],{"type":52,"tag":89,"props":3286,"children":3287},{"__ignoreMap":86},[3288,3327,3366,3373,3404,3451,3458],{"type":52,"tag":93,"props":3289,"children":3290},{"class":95,"line":96},[3291,3295,3299,3303,3307,3311,3315,3319,3323],{"type":52,"tag":93,"props":3292,"children":3293},{"style":158},[3294],{"type":58,"value":873},{"type":52,"tag":93,"props":3296,"children":3297},{"style":633},[3298],{"type":58,"value":878},{"type":52,"tag":93,"props":3300,"children":3301},{"style":881},[3302],{"type":58,"value":884},{"type":52,"tag":93,"props":3304,"children":3305},{"style":881},[3306],{"type":58,"value":889},{"type":52,"tag":93,"props":3308,"children":3309},{"style":158},[3310],{"type":58,"value":894},{"type":52,"tag":93,"props":3312,"children":3313},{"style":158},[3314],{"type":58,"value":899},{"type":52,"tag":93,"props":3316,"children":3317},{"style":106},[3318],{"type":58,"value":904},{"type":52,"tag":93,"props":3320,"children":3321},{"style":158},[3322],{"type":58,"value":899},{"type":52,"tag":93,"props":3324,"children":3325},{"style":158},[3326],{"type":58,"value":398},{"type":52,"tag":93,"props":3328,"children":3329},{"class":95,"line":194},[3330,3334,3338,3342,3346,3350,3354,3358,3362],{"type":52,"tag":93,"props":3331,"children":3332},{"style":152},[3333],{"type":58,"value":155},{"type":52,"tag":93,"props":3335,"children":3336},{"style":152},[3337],{"type":58,"value":960},{"type":52,"tag":93,"props":3339,"children":3340},{"style":158},[3341],{"type":58,"value":161},{"type":52,"tag":93,"props":3343,"children":3344},{"style":164},[3345],{"type":58,"value":969},{"type":52,"tag":93,"props":3347,"children":3348},{"style":158},[3349],{"type":58,"value":172},{"type":52,"tag":93,"props":3351,"children":3352},{"style":152},[3353],{"type":58,"value":177},{"type":52,"tag":93,"props":3355,"children":3356},{"style":158},[3357],{"type":58,"value":182},{"type":52,"tag":93,"props":3359,"children":3360},{"style":106},[3361],{"type":58,"value":944},{"type":52,"tag":93,"props":3363,"children":3364},{"style":158},[3365],{"type":58,"value":191},{"type":52,"tag":93,"props":3367,"children":3368},{"class":95,"line":232},[3369],{"type":52,"tag":93,"props":3370,"children":3371},{"emptyLinePlaceholder":305},[3372],{"type":58,"value":308},{"type":52,"tag":93,"props":3374,"children":3375},{"class":95,"line":270},[3376,3380,3384,3388,3392,3396,3400],{"type":52,"tag":93,"props":3377,"children":3378},{"style":881},[3379],{"type":58,"value":1041},{"type":52,"tag":93,"props":3381,"children":3382},{"style":164},[3383],{"type":58,"value":1046},{"type":52,"tag":93,"props":3385,"children":3386},{"style":158},[3387],{"type":58,"value":657},{"type":52,"tag":93,"props":3389,"children":3390},{"style":100},[3391],{"type":58,"value":969},{"type":52,"tag":93,"props":3393,"children":3394},{"style":164},[3395],{"type":58,"value":1059},{"type":52,"tag":93,"props":3397,"children":3398},{"style":158},[3399],{"type":58,"value":894},{"type":52,"tag":93,"props":3401,"children":3402},{"style":164},[3403],{"type":58,"value":1068},{"type":52,"tag":93,"props":3405,"children":3406},{"class":95,"line":301},[3407,3411,3415,3419,3423,3427,3431,3435,3439,3443,3447],{"type":52,"tag":93,"props":3408,"children":3409},{"style":158},[3410],{"type":58,"value":1076},{"type":52,"tag":93,"props":3412,"children":3413},{"style":633},[3414],{"type":58,"value":1081},{"type":52,"tag":93,"props":3416,"children":3417},{"style":158},[3418],{"type":58,"value":657},{"type":52,"tag":93,"props":3420,"children":3421},{"style":158},[3422],{"type":58,"value":182},{"type":52,"tag":93,"props":3424,"children":3425},{"style":106},[3426],{"type":58,"value":3230},{"type":52,"tag":93,"props":3428,"children":3429},{"style":158},[3430],{"type":58,"value":343},{"type":52,"tag":93,"props":3432,"children":3433},{"style":158},[3434],{"type":58,"value":1103},{"type":52,"tag":93,"props":3436,"children":3437},{"style":633},[3438],{"type":58,"value":1108},{"type":52,"tag":93,"props":3440,"children":3441},{"style":158},[3442],{"type":58,"value":657},{"type":52,"tag":93,"props":3444,"children":3445},{"style":164},[3446],{"type":58,"value":3251},{"type":52,"tag":93,"props":3448,"children":3449},{"style":158},[3450],{"type":58,"value":1122},{"type":52,"tag":93,"props":3452,"children":3453},{"class":95,"line":311},[3454],{"type":52,"tag":93,"props":3455,"children":3456},{"style":164},[3457],{"type":58,"value":1130},{"type":52,"tag":93,"props":3459,"children":3460},{"class":95,"line":382},[3461,3465,3469],{"type":52,"tag":93,"props":3462,"children":3463},{"style":158},[3464],{"type":58,"value":1138},{"type":52,"tag":93,"props":3466,"children":3467},{"style":633},[3468],{"type":58,"value":878},{"type":52,"tag":93,"props":3470,"children":3471},{"style":158},[3472],{"type":58,"value":398},{"type":52,"tag":75,"props":3474,"children":3475},{},[3476,3477,3482],{"type":58,"value":2534},{"type":52,"tag":89,"props":3478,"children":3480},{"className":3479},[],[3481],{"type":58,"value":855},{"type":58,"value":3483}," type enforces this at compile time. Always import and use it.",{"type":52,"tag":68,"props":3485,"children":3487},{"id":3486},"high-vite-plugin-not-placed-first-in-plugins-array",[3488],{"type":58,"value":3489},"HIGH: Vite plugin not placed first in plugins array",{"type":52,"tag":75,"props":3491,"children":3492},{},[3493,3494,3499],{"type":58,"value":2534},{"type":52,"tag":89,"props":3495,"children":3497},{"className":3496},[],[3498],{"type":58,"value":1246},{"type":58,"value":3500}," plugin performs source injection that must run before framework plugins (React, Vue, Solid, etc.) process the code.",{"type":52,"tag":75,"props":3502,"children":3503},{},[3504],{"type":58,"value":3134},{"type":52,"tag":81,"props":3506,"children":3509},{"className":3507,"code":3508,"language":904,"meta":86,"style":86},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n plugins: [react(), devtools()],\n}\n",[3510],{"type":52,"tag":89,"props":3511,"children":3512},{"__ignoreMap":86},[3513,3549,3578,3585,3603,3644],{"type":52,"tag":93,"props":3514,"children":3515},{"class":95,"line":96},[3516,3520,3524,3529,3533,3537,3541,3545],{"type":52,"tag":93,"props":3517,"children":3518},{"style":152},[3519],{"type":58,"value":155},{"type":52,"tag":93,"props":3521,"children":3522},{"style":158},[3523],{"type":58,"value":161},{"type":52,"tag":93,"props":3525,"children":3526},{"style":164},[3527],{"type":58,"value":3528}," devtools",{"type":52,"tag":93,"props":3530,"children":3531},{"style":158},[3532],{"type":58,"value":172},{"type":52,"tag":93,"props":3534,"children":3535},{"style":152},[3536],{"type":58,"value":177},{"type":52,"tag":93,"props":3538,"children":3539},{"style":158},[3540],{"type":58,"value":182},{"type":52,"tag":93,"props":3542,"children":3543},{"style":106},[3544],{"type":58,"value":1246},{"type":52,"tag":93,"props":3546,"children":3547},{"style":158},[3548],{"type":58,"value":191},{"type":52,"tag":93,"props":3550,"children":3551},{"class":95,"line":194},[3552,3556,3561,3565,3569,3574],{"type":52,"tag":93,"props":3553,"children":3554},{"style":152},[3555],{"type":58,"value":155},{"type":52,"tag":93,"props":3557,"children":3558},{"style":164},[3559],{"type":58,"value":3560}," react ",{"type":52,"tag":93,"props":3562,"children":3563},{"style":152},[3564],{"type":58,"value":285},{"type":52,"tag":93,"props":3566,"children":3567},{"style":158},[3568],{"type":58,"value":182},{"type":52,"tag":93,"props":3570,"children":3571},{"style":106},[3572],{"type":58,"value":3573},"@vitejs\u002Fplugin-react",{"type":52,"tag":93,"props":3575,"children":3576},{"style":158},[3577],{"type":58,"value":191},{"type":52,"tag":93,"props":3579,"children":3580},{"class":95,"line":232},[3581],{"type":52,"tag":93,"props":3582,"children":3583},{"emptyLinePlaceholder":305},[3584],{"type":58,"value":308},{"type":52,"tag":93,"props":3586,"children":3587},{"class":95,"line":270},[3588,3593,3598],{"type":52,"tag":93,"props":3589,"children":3590},{"style":152},[3591],{"type":58,"value":3592},"export",{"type":52,"tag":93,"props":3594,"children":3595},{"style":152},[3596],{"type":58,"value":3597}," default",{"type":52,"tag":93,"props":3599,"children":3600},{"style":158},[3601],{"type":58,"value":3602}," {\n",{"type":52,"tag":93,"props":3604,"children":3605},{"class":95,"line":301},[3606,3610,3614,3618,3622,3627,3631,3635,3640],{"type":52,"tag":93,"props":3607,"children":3608},{"style":633},[3609],{"type":58,"value":625},{"type":52,"tag":93,"props":3611,"children":3612},{"style":158},[3613],{"type":58,"value":657},{"type":52,"tag":93,"props":3615,"children":3616},{"style":164},[3617],{"type":58,"value":2280},{"type":52,"tag":93,"props":3619,"children":3620},{"style":315},[3621],{"type":58,"value":28},{"type":52,"tag":93,"props":3623,"children":3624},{"style":164},[3625],{"type":58,"value":3626},"()",{"type":52,"tag":93,"props":3628,"children":3629},{"style":158},[3630],{"type":58,"value":1103},{"type":52,"tag":93,"props":3632,"children":3633},{"style":315},[3634],{"type":58,"value":3528},{"type":52,"tag":93,"props":3636,"children":3637},{"style":164},[3638],{"type":58,"value":3639},"()]",{"type":52,"tag":93,"props":3641,"children":3642},{"style":158},[3643],{"type":58,"value":675},{"type":52,"tag":93,"props":3645,"children":3646},{"class":95,"line":311},[3647],{"type":52,"tag":93,"props":3648,"children":3649},{"style":158},[3650],{"type":58,"value":1599},{"type":52,"tag":75,"props":3652,"children":3653},{},[3654],{"type":58,"value":3280},{"type":52,"tag":81,"props":3656,"children":3658},{"className":3507,"code":3657,"language":904,"meta":86,"style":86},"import { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n plugins: [devtools(), react()],\n}\n",[3659],{"type":52,"tag":89,"props":3660,"children":3661},{"__ignoreMap":86},[3662,3697,3724,3731,3746,3786],{"type":52,"tag":93,"props":3663,"children":3664},{"class":95,"line":96},[3665,3669,3673,3677,3681,3685,3689,3693],{"type":52,"tag":93,"props":3666,"children":3667},{"style":152},[3668],{"type":58,"value":155},{"type":52,"tag":93,"props":3670,"children":3671},{"style":158},[3672],{"type":58,"value":161},{"type":52,"tag":93,"props":3674,"children":3675},{"style":164},[3676],{"type":58,"value":3528},{"type":52,"tag":93,"props":3678,"children":3679},{"style":158},[3680],{"type":58,"value":172},{"type":52,"tag":93,"props":3682,"children":3683},{"style":152},[3684],{"type":58,"value":177},{"type":52,"tag":93,"props":3686,"children":3687},{"style":158},[3688],{"type":58,"value":182},{"type":52,"tag":93,"props":3690,"children":3691},{"style":106},[3692],{"type":58,"value":1246},{"type":52,"tag":93,"props":3694,"children":3695},{"style":158},[3696],{"type":58,"value":191},{"type":52,"tag":93,"props":3698,"children":3699},{"class":95,"line":194},[3700,3704,3708,3712,3716,3720],{"type":52,"tag":93,"props":3701,"children":3702},{"style":152},[3703],{"type":58,"value":155},{"type":52,"tag":93,"props":3705,"children":3706},{"style":164},[3707],{"type":58,"value":3560},{"type":52,"tag":93,"props":3709,"children":3710},{"style":152},[3711],{"type":58,"value":285},{"type":52,"tag":93,"props":3713,"children":3714},{"style":158},[3715],{"type":58,"value":182},{"type":52,"tag":93,"props":3717,"children":3718},{"style":106},[3719],{"type":58,"value":3573},{"type":52,"tag":93,"props":3721,"children":3722},{"style":158},[3723],{"type":58,"value":191},{"type":52,"tag":93,"props":3725,"children":3726},{"class":95,"line":232},[3727],{"type":52,"tag":93,"props":3728,"children":3729},{"emptyLinePlaceholder":305},[3730],{"type":58,"value":308},{"type":52,"tag":93,"props":3732,"children":3733},{"class":95,"line":270},[3734,3738,3742],{"type":52,"tag":93,"props":3735,"children":3736},{"style":152},[3737],{"type":58,"value":3592},{"type":52,"tag":93,"props":3739,"children":3740},{"style":152},[3741],{"type":58,"value":3597},{"type":52,"tag":93,"props":3743,"children":3744},{"style":158},[3745],{"type":58,"value":3602},{"type":52,"tag":93,"props":3747,"children":3748},{"class":95,"line":301},[3749,3753,3757,3761,3765,3769,3773,3778,3782],{"type":52,"tag":93,"props":3750,"children":3751},{"style":633},[3752],{"type":58,"value":625},{"type":52,"tag":93,"props":3754,"children":3755},{"style":158},[3756],{"type":58,"value":657},{"type":52,"tag":93,"props":3758,"children":3759},{"style":164},[3760],{"type":58,"value":2280},{"type":52,"tag":93,"props":3762,"children":3763},{"style":315},[3764],{"type":58,"value":27},{"type":52,"tag":93,"props":3766,"children":3767},{"style":164},[3768],{"type":58,"value":3626},{"type":52,"tag":93,"props":3770,"children":3771},{"style":158},[3772],{"type":58,"value":1103},{"type":52,"tag":93,"props":3774,"children":3775},{"style":315},[3776],{"type":58,"value":3777}," react",{"type":52,"tag":93,"props":3779,"children":3780},{"style":164},[3781],{"type":58,"value":3639},{"type":52,"tag":93,"props":3783,"children":3784},{"style":158},[3785],{"type":58,"value":675},{"type":52,"tag":93,"props":3787,"children":3788},{"class":95,"line":311},[3789],{"type":52,"tag":93,"props":3790,"children":3791},{"style":158},[3792],{"type":58,"value":1599},{"type":52,"tag":68,"props":3794,"children":3796},{"id":3795},"high-mounting-tanstackdevtools-in-ssr-without-client-guard",[3797],{"type":58,"value":3798},"HIGH: Mounting TanStackDevtools in SSR without client guard",{"type":52,"tag":75,"props":3800,"children":3801},{},[3802,3804,3810,3812,3818,3819,3824,3826,3832,3834,3839],{"type":58,"value":3803},"The devtools core shell requires DOM APIs (",{"type":52,"tag":89,"props":3805,"children":3807},{"className":3806},[],[3808],{"type":58,"value":3809},"document",{"type":58,"value":3811},", ",{"type":52,"tag":89,"props":3813,"children":3815},{"className":3814},[],[3816],{"type":58,"value":3817},"window",{"type":58,"value":3811},{"type":52,"tag":89,"props":3820,"children":3822},{"className":3821},[],[3823],{"type":58,"value":2072},{"type":58,"value":3825},"). The React adapter includes ",{"type":52,"tag":89,"props":3827,"children":3829},{"className":3828},[],[3830],{"type":58,"value":3831},"'use client'",{"type":58,"value":3833}," at its entry point, so standard Next.js\u002FRemix setups work. However, custom SSR setups or frameworks that do not respect the ",{"type":52,"tag":89,"props":3835,"children":3837},{"className":3836},[],[3838],{"type":58,"value":3831},{"type":58,"value":3840}," directive need explicit guards.",{"type":52,"tag":75,"props":3842,"children":3843},{},[3844],{"type":58,"value":3134},{"type":52,"tag":81,"props":3846,"children":3848},{"className":140,"code":3847,"language":142,"meta":86,"style":86},"\u002F\u002F In a server-rendered component without framework 'use client' support\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nexport default function Layout({ children }) {\n return (\n \u003C>\n {children}\n \u003CTanStackDevtools \u002F>\n \u003C\u002F>\n )\n}\n",[3849],{"type":52,"tag":89,"props":3850,"children":3851},{"__ignoreMap":86},[3852,3860,3895,3902,3943,3955,3962,3979,3994,4001,4009],{"type":52,"tag":93,"props":3853,"children":3854},{"class":95,"line":96},[3855],{"type":52,"tag":93,"props":3856,"children":3857},{"style":2167},[3858],{"type":58,"value":3859},"\u002F\u002F In a server-rendered component without framework 'use client' support\n",{"type":52,"tag":93,"props":3861,"children":3862},{"class":95,"line":194},[3863,3867,3871,3875,3879,3883,3887,3891],{"type":52,"tag":93,"props":3864,"children":3865},{"style":152},[3866],{"type":58,"value":155},{"type":52,"tag":93,"props":3868,"children":3869},{"style":158},[3870],{"type":58,"value":161},{"type":52,"tag":93,"props":3872,"children":3873},{"style":164},[3874],{"type":58,"value":246},{"type":52,"tag":93,"props":3876,"children":3877},{"style":158},[3878],{"type":58,"value":172},{"type":52,"tag":93,"props":3880,"children":3881},{"style":152},[3882],{"type":58,"value":177},{"type":52,"tag":93,"props":3884,"children":3885},{"style":158},[3886],{"type":58,"value":182},{"type":52,"tag":93,"props":3888,"children":3889},{"style":106},[3890],{"type":58,"value":263},{"type":52,"tag":93,"props":3892,"children":3893},{"style":158},[3894],{"type":58,"value":191},{"type":52,"tag":93,"props":3896,"children":3897},{"class":95,"line":232},[3898],{"type":52,"tag":93,"props":3899,"children":3900},{"emptyLinePlaceholder":305},[3901],{"type":58,"value":308},{"type":52,"tag":93,"props":3903,"children":3904},{"class":95,"line":270},[3905,3909,3913,3918,3923,3928,3934,3939],{"type":52,"tag":93,"props":3906,"children":3907},{"style":152},[3908],{"type":58,"value":3592},{"type":52,"tag":93,"props":3910,"children":3911},{"style":152},[3912],{"type":58,"value":3597},{"type":52,"tag":93,"props":3914,"children":3915},{"style":881},[3916],{"type":58,"value":3917}," function",{"type":52,"tag":93,"props":3919,"children":3920},{"style":315},[3921],{"type":58,"value":3922}," Layout",{"type":52,"tag":93,"props":3924,"children":3925},{"style":158},[3926],{"type":58,"value":3927},"({",{"type":52,"tag":93,"props":3929,"children":3931},{"style":3930},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3932],{"type":58,"value":3933}," children",{"type":52,"tag":93,"props":3935,"children":3936},{"style":158},[3937],{"type":58,"value":3938}," })",{"type":52,"tag":93,"props":3940,"children":3941},{"style":158},[3942],{"type":58,"value":3602},{"type":52,"tag":93,"props":3944,"children":3945},{"class":95,"line":301},[3946,3951],{"type":52,"tag":93,"props":3947,"children":3948},{"style":152},[3949],{"type":58,"value":3950}," return",{"type":52,"tag":93,"props":3952,"children":3953},{"style":633},[3954],{"type":58,"value":1465},{"type":52,"tag":93,"props":3956,"children":3957},{"class":95,"line":311},[3958],{"type":52,"tag":93,"props":3959,"children":3960},{"style":158},[3961],{"type":58,"value":1473},{"type":52,"tag":93,"props":3963,"children":3964},{"class":95,"line":382},[3965,3970,3975],{"type":52,"tag":93,"props":3966,"children":3967},{"style":158},[3968],{"type":58,"value":3969}," {",{"type":52,"tag":93,"props":3971,"children":3972},{"style":164},[3973],{"type":58,"value":3974},"children",{"type":52,"tag":93,"props":3976,"children":3977},{"style":158},[3978],{"type":58,"value":1599},{"type":52,"tag":93,"props":3980,"children":3981},{"class":95,"line":401},[3982,3986,3990],{"type":52,"tag":93,"props":3983,"children":3984},{"style":158},[3985],{"type":58,"value":1481},{"type":52,"tag":93,"props":3987,"children":3988},{"style":100},[3989],{"type":58,"value":135},{"type":52,"tag":93,"props":3991,"children":3992},{"style":158},[3993],{"type":58,"value":417},{"type":52,"tag":93,"props":3995,"children":3996},{"class":95,"line":420},[3997],{"type":52,"tag":93,"props":3998,"children":3999},{"style":158},[4000],{"type":58,"value":1617},{"type":52,"tag":93,"props":4002,"children":4003},{"class":95,"line":436},[4004],{"type":52,"tag":93,"props":4005,"children":4006},{"style":633},[4007],{"type":58,"value":4008}," )\n",{"type":52,"tag":93,"props":4010,"children":4011},{"class":95,"line":454},[4012],{"type":52,"tag":93,"props":4013,"children":4014},{"style":158},[4015],{"type":58,"value":1599},{"type":52,"tag":75,"props":4017,"children":4018},{},[4019],{"type":58,"value":3280},{"type":52,"tag":81,"props":4021,"children":4023},{"className":140,"code":4022,"language":142,"meta":86,"style":86},"import { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nexport default function Layout({ children }) {\n return (\n \u003C>\n {children}\n {typeof window !== 'undefined' && \u003CTanStackDevtools \u002F>}\n \u003C\u002F>\n )\n}\n",[4024],{"type":52,"tag":89,"props":4025,"children":4026},{"__ignoreMap":86},[4027,4062,4069,4104,4115,4122,4137,4186,4193,4200],{"type":52,"tag":93,"props":4028,"children":4029},{"class":95,"line":96},[4030,4034,4038,4042,4046,4050,4054,4058],{"type":52,"tag":93,"props":4031,"children":4032},{"style":152},[4033],{"type":58,"value":155},{"type":52,"tag":93,"props":4035,"children":4036},{"style":158},[4037],{"type":58,"value":161},{"type":52,"tag":93,"props":4039,"children":4040},{"style":164},[4041],{"type":58,"value":246},{"type":52,"tag":93,"props":4043,"children":4044},{"style":158},[4045],{"type":58,"value":172},{"type":52,"tag":93,"props":4047,"children":4048},{"style":152},[4049],{"type":58,"value":177},{"type":52,"tag":93,"props":4051,"children":4052},{"style":158},[4053],{"type":58,"value":182},{"type":52,"tag":93,"props":4055,"children":4056},{"style":106},[4057],{"type":58,"value":263},{"type":52,"tag":93,"props":4059,"children":4060},{"style":158},[4061],{"type":58,"value":191},{"type":52,"tag":93,"props":4063,"children":4064},{"class":95,"line":194},[4065],{"type":52,"tag":93,"props":4066,"children":4067},{"emptyLinePlaceholder":305},[4068],{"type":58,"value":308},{"type":52,"tag":93,"props":4070,"children":4071},{"class":95,"line":232},[4072,4076,4080,4084,4088,4092,4096,4100],{"type":52,"tag":93,"props":4073,"children":4074},{"style":152},[4075],{"type":58,"value":3592},{"type":52,"tag":93,"props":4077,"children":4078},{"style":152},[4079],{"type":58,"value":3597},{"type":52,"tag":93,"props":4081,"children":4082},{"style":881},[4083],{"type":58,"value":3917},{"type":52,"tag":93,"props":4085,"children":4086},{"style":315},[4087],{"type":58,"value":3922},{"type":52,"tag":93,"props":4089,"children":4090},{"style":158},[4091],{"type":58,"value":3927},{"type":52,"tag":93,"props":4093,"children":4094},{"style":3930},[4095],{"type":58,"value":3933},{"type":52,"tag":93,"props":4097,"children":4098},{"style":158},[4099],{"type":58,"value":3938},{"type":52,"tag":93,"props":4101,"children":4102},{"style":158},[4103],{"type":58,"value":3602},{"type":52,"tag":93,"props":4105,"children":4106},{"class":95,"line":270},[4107,4111],{"type":52,"tag":93,"props":4108,"children":4109},{"style":152},[4110],{"type":58,"value":3950},{"type":52,"tag":93,"props":4112,"children":4113},{"style":633},[4114],{"type":58,"value":1465},{"type":52,"tag":93,"props":4116,"children":4117},{"class":95,"line":301},[4118],{"type":52,"tag":93,"props":4119,"children":4120},{"style":158},[4121],{"type":58,"value":1473},{"type":52,"tag":93,"props":4123,"children":4124},{"class":95,"line":311},[4125,4129,4133],{"type":52,"tag":93,"props":4126,"children":4127},{"style":158},[4128],{"type":58,"value":3969},{"type":52,"tag":93,"props":4130,"children":4131},{"style":164},[4132],{"type":58,"value":3974},{"type":52,"tag":93,"props":4134,"children":4135},{"style":158},[4136],{"type":58,"value":1599},{"type":52,"tag":93,"props":4138,"children":4139},{"class":95,"line":382},[4140,4145,4150,4155,4159,4164,4168,4173,4177,4181],{"type":52,"tag":93,"props":4141,"children":4142},{"style":158},[4143],{"type":58,"value":4144}," {typeof",{"type":52,"tag":93,"props":4146,"children":4147},{"style":164},[4148],{"type":58,"value":4149}," window ",{"type":52,"tag":93,"props":4151,"children":4152},{"style":158},[4153],{"type":58,"value":4154},"!==",{"type":52,"tag":93,"props":4156,"children":4157},{"style":158},[4158],{"type":58,"value":182},{"type":52,"tag":93,"props":4160,"children":4161},{"style":106},[4162],{"type":58,"value":4163},"undefined",{"type":52,"tag":93,"props":4165,"children":4166},{"style":158},[4167],{"type":58,"value":343},{"type":52,"tag":93,"props":4169,"children":4170},{"style":158},[4171],{"type":58,"value":4172}," &&",{"type":52,"tag":93,"props":4174,"children":4175},{"style":158},[4176],{"type":58,"value":692},{"type":52,"tag":93,"props":4178,"children":4179},{"style":100},[4180],{"type":58,"value":135},{"type":52,"tag":93,"props":4182,"children":4183},{"style":158},[4184],{"type":58,"value":4185}," \u002F>}\n",{"type":52,"tag":93,"props":4187,"children":4188},{"class":95,"line":401},[4189],{"type":52,"tag":93,"props":4190,"children":4191},{"style":158},[4192],{"type":58,"value":1617},{"type":52,"tag":93,"props":4194,"children":4195},{"class":95,"line":420},[4196],{"type":52,"tag":93,"props":4197,"children":4198},{"style":633},[4199],{"type":58,"value":4008},{"type":52,"tag":93,"props":4201,"children":4202},{"class":95,"line":436},[4203],{"type":52,"tag":93,"props":4204,"children":4205},{"style":158},[4206],{"type":58,"value":1599},{"type":52,"tag":75,"props":4208,"children":4209},{},[4210],{"type":58,"value":4211},"Or use dynamic imports \u002F lazy loading to ensure the component only loads on the client.",{"type":52,"tag":68,"props":4213,"children":4215},{"id":4214},"medium-installing-as-regular-dependency-for-dev-only-use",[4216],{"type":58,"value":4217},"MEDIUM: Installing as regular dependency for dev-only use",{"type":52,"tag":75,"props":4219,"children":4220},{},[4221],{"type":58,"value":4222},"When using the Vite plugin for production stripping, devtools packages should be dev dependencies. Installing them as regular dependencies increases production bundle size unnecessarily.",{"type":52,"tag":75,"props":4224,"children":4225},{},[4226],{"type":58,"value":3134},{"type":52,"tag":81,"props":4228,"children":4230},{"className":83,"code":4229,"language":85,"meta":86,"style":86},"npm install @tanstack\u002Freact-devtools\n",[4231],{"type":52,"tag":89,"props":4232,"children":4233},{"__ignoreMap":86},[4234],{"type":52,"tag":93,"props":4235,"children":4236},{"class":95,"line":96},[4237,4241,4245],{"type":52,"tag":93,"props":4238,"children":4239},{"style":100},[4240],{"type":58,"value":103},{"type":52,"tag":93,"props":4242,"children":4243},{"style":106},[4244],{"type":58,"value":109},{"type":52,"tag":93,"props":4246,"children":4247},{"style":106},[4248],{"type":58,"value":4249}," @tanstack\u002Freact-devtools\n",{"type":52,"tag":75,"props":4251,"children":4252},{},[4253],{"type":58,"value":3280},{"type":52,"tag":81,"props":4255,"children":4257},{"className":83,"code":4256,"language":85,"meta":86,"style":86},"npm install -D @tanstack\u002Freact-devtools\nnpm install -D @tanstack\u002Fdevtools-vite\n",[4258],{"type":52,"tag":89,"props":4259,"children":4260},{"__ignoreMap":86},[4261,4280],{"type":52,"tag":93,"props":4262,"children":4263},{"class":95,"line":96},[4264,4268,4272,4276],{"type":52,"tag":93,"props":4265,"children":4266},{"style":100},[4267],{"type":58,"value":103},{"type":52,"tag":93,"props":4269,"children":4270},{"style":106},[4271],{"type":58,"value":109},{"type":52,"tag":93,"props":4273,"children":4274},{"style":106},[4275],{"type":58,"value":114},{"type":52,"tag":93,"props":4277,"children":4278},{"style":106},[4279],{"type":58,"value":4249},{"type":52,"tag":93,"props":4281,"children":4282},{"class":95,"line":194},[4283,4287,4291,4295],{"type":52,"tag":93,"props":4284,"children":4285},{"style":100},[4286],{"type":58,"value":103},{"type":52,"tag":93,"props":4288,"children":4289},{"style":106},[4290],{"type":58,"value":109},{"type":52,"tag":93,"props":4292,"children":4293},{"style":106},[4294],{"type":58,"value":114},{"type":52,"tag":93,"props":4296,"children":4297},{"style":106},[4298],{"type":58,"value":124},{"type":52,"tag":75,"props":4300,"children":4301},{},[4302,4304,4309],{"type":58,"value":4303},"Exception: if you intentionally want devtools in production, install ",{"type":52,"tag":89,"props":4305,"children":4307},{"className":4306},[],[4308],{"type":58,"value":38},{"type":58,"value":4310}," (core) as a regular dependency. See the production skill for details.",{"type":52,"tag":68,"props":4312,"children":4314},{"id":4313},"medium-not-keeping-devtools-packages-at-latest-versions",[4315],{"type":58,"value":4316},"MEDIUM: Not keeping devtools packages at latest versions",{"type":52,"tag":75,"props":4318,"children":4319},{},[4320,4322,4328],{"type":58,"value":4321},"All ",{"type":52,"tag":89,"props":4323,"children":4325},{"className":4324},[],[4326],{"type":58,"value":4327},"@tanstack\u002Fdevtools-*",{"type":58,"value":4329}," packages share internal protocols (event bus messages, plugin mount lifecycle). Mixing versions can cause silent failures where plugins register but never receive events, or the shell mounts but plugins do not render.",{"type":52,"tag":75,"props":4331,"children":4332},{},[4333],{"type":58,"value":4334},"Always update all devtools packages together:",{"type":52,"tag":81,"props":4336,"children":4338},{"className":83,"code":4337,"language":85,"meta":86,"style":86},"npm install -D @tanstack\u002Freact-devtools@latest @tanstack\u002Fdevtools-vite@latest\n",[4339],{"type":52,"tag":89,"props":4340,"children":4341},{"__ignoreMap":86},[4342],{"type":52,"tag":93,"props":4343,"children":4344},{"class":95,"line":96},[4345,4349,4353,4357,4362],{"type":52,"tag":93,"props":4346,"children":4347},{"style":100},[4348],{"type":58,"value":103},{"type":52,"tag":93,"props":4350,"children":4351},{"style":106},[4352],{"type":58,"value":109},{"type":52,"tag":93,"props":4354,"children":4355},{"style":106},[4356],{"type":58,"value":114},{"type":52,"tag":93,"props":4358,"children":4359},{"style":106},[4360],{"type":58,"value":4361}," @tanstack\u002Freact-devtools@latest",{"type":52,"tag":93,"props":4363,"children":4364},{"style":106},[4365],{"type":58,"value":4366}," @tanstack\u002Fdevtools-vite@latest\n",{"type":52,"tag":75,"props":4368,"children":4369},{},[4370,4372,4378,4380,4385],{"type":58,"value":4371},"When building custom plugins, ensure ",{"type":52,"tag":89,"props":4373,"children":4375},{"className":4374},[],[4376],{"type":58,"value":4377},"@tanstack\u002Fdevtools-event-client",{"type":58,"value":4379}," matches the version of ",{"type":52,"tag":89,"props":4381,"children":4383},{"className":4382},[],[4384],{"type":58,"value":38},{"type":58,"value":4386}," used by the shell.",{"type":52,"tag":61,"props":4388,"children":4390},{"id":4389},"see-also",[4391],{"type":58,"value":4392},"See Also",{"type":52,"tag":2081,"props":4394,"children":4395},{},[4396,4407,4417],{"type":52,"tag":2085,"props":4397,"children":4398},{},[4399,4405],{"type":52,"tag":4400,"props":4401,"children":4402},"strong",{},[4403],{"type":58,"value":4404},"devtools-vite-plugin",{"type":58,"value":4406}," -- Vite plugin configuration: source inspection, console piping, production stripping, server event bus setup",{"type":52,"tag":2085,"props":4408,"children":4409},{},[4410,4415],{"type":52,"tag":4400,"props":4411,"children":4412},{},[4413],{"type":58,"value":4414},"devtools-production",{"type":58,"value":4416}," -- Production build handling: keeping devtools in prod, tree-shaking, URL flag gating",{"type":52,"tag":2085,"props":4418,"children":4419},{},[4420,4425],{"type":52,"tag":4400,"props":4421,"children":4422},{},[4423],{"type":58,"value":4424},"devtools-plugin-panel",{"type":58,"value":4426}," -- Building custom plugin panels with the EventClient API",{"type":52,"tag":4428,"props":4429,"children":4430},"style",{},[4431],{"type":58,"value":4432},"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);}",{"items":4434,"total":4571},[4435,4449,4459,4471,4486,4498,4508,4518,4531,4541,4552,4562],{"slug":4436,"name":4436,"fn":4437,"description":4438,"org":4439,"tags":4440,"stars":4446,"repoUrl":4447,"updatedAt":4448},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4441,4444,4445],{"name":4442,"slug":4443,"type":13},"Data Analysis","data-analysis",{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":4450,"name":4450,"fn":4451,"description":4452,"org":4453,"tags":4454,"stars":4446,"repoUrl":4447,"updatedAt":4458},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4455,4456,4457],{"name":18,"slug":19,"type":13},{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:26:05.418735",{"slug":4460,"name":4460,"fn":4461,"description":4462,"org":4463,"tags":4464,"stars":4446,"repoUrl":4447,"updatedAt":4470},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4465,4466,4467],{"name":4442,"slug":4443,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":4472,"name":4472,"fn":4473,"description":4474,"org":4475,"tags":4476,"stars":4446,"repoUrl":4447,"updatedAt":4485},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4477,4480,4481,4484],{"name":4478,"slug":4479,"type":13},"Data Pipeline","data-pipeline",{"name":15,"slug":16,"type":13},{"name":4482,"slug":4483,"type":13},"Performance","performance",{"name":9,"slug":8,"type":13},"2026-07-30T05:25:45.400104",{"slug":4487,"name":4487,"fn":4488,"description":4489,"org":4490,"tags":4491,"stars":4446,"repoUrl":4447,"updatedAt":4497},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4492,4495,4496],{"name":4493,"slug":4494,"type":13},"Data Visualization","data-visualization",{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:25:41.397257",{"slug":4499,"name":4499,"fn":4500,"description":4501,"org":4502,"tags":4503,"stars":4446,"repoUrl":4447,"updatedAt":4507},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4504,4505,4506],{"name":4442,"slug":4443,"type":13},{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},"2026-07-30T05:25:53.391632",{"slug":4509,"name":4509,"fn":4510,"description":4511,"org":4512,"tags":4513,"stars":4446,"repoUrl":4447,"updatedAt":4517},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4514,4515,4516],{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-30T05:26:03.37801",{"slug":4519,"name":4519,"fn":4520,"description":4521,"org":4522,"tags":4523,"stars":4446,"repoUrl":4447,"updatedAt":4530},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4524,4527,4528,4529],{"name":4525,"slug":4526,"type":13},"CSS","css",{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-30T05:25:55.377366",{"slug":4532,"name":4532,"fn":4533,"description":4534,"org":4535,"tags":4536,"stars":4446,"repoUrl":4447,"updatedAt":4540},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4537,4538,4539],{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-30T05:25:51.400011",{"slug":4542,"name":4542,"fn":4543,"description":4544,"org":4545,"tags":4546,"stars":4446,"repoUrl":4447,"updatedAt":4551},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4547,4548,4549,4550],{"name":4525,"slug":4526,"type":13},{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-30T05:25:48.703799",{"slug":4553,"name":4553,"fn":4554,"description":4555,"org":4556,"tags":4557,"stars":4446,"repoUrl":4447,"updatedAt":4561},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4558,4559,4560],{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-30T05:25:47.367943",{"slug":37,"name":37,"fn":4563,"description":4564,"org":4565,"tags":4566,"stars":4446,"repoUrl":4447,"updatedAt":4570},"build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4567,4568,4569],{"name":4442,"slug":4443,"type":13},{"name":15,"slug":16,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-30T05:25:52.366295",125,{"items":4573,"total":420},[4574,4580,4592,4606,4621,4632,4641],{"slug":4,"name":4,"fn":5,"description":6,"org":4575,"tags":4576,"stars":20,"repoUrl":21,"updatedAt":22},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4577,4578,4579],{"name":18,"slug":19,"type":13},{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"slug":4581,"name":4581,"fn":4582,"description":4583,"org":4584,"tags":4585,"stars":20,"repoUrl":21,"updatedAt":4591},"devtools-bidirectional","implement bidirectional devtools communication","Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4586,4587,4590],{"name":18,"slug":19,"type":13},{"name":4588,"slug":4589,"type":13},"Observability","observability",{"name":9,"slug":8,"type":13},"2026-07-16T06:04:40.486044",{"slug":4593,"name":4593,"fn":4594,"description":4595,"org":4596,"tags":4597,"stars":20,"repoUrl":21,"updatedAt":4605},"devtools-event-client","implement typed event clients for libraries","Create typed EventClient for a library. Define event maps with typed payloads, pluginId auto-prepend namespacing, emit()\u002Fon()\u002FonAll()\u002FonAllPluginEvents() API. Connection lifecycle (5 retries, 300ms), event queuing, enabled\u002Fdisabled state, SSR fallbacks, singleton pattern. Unique pluginId requirement to avoid event collisions.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4598,4601,4604],{"name":4599,"slug":4600,"type":13},"API Development","api-development",{"name":4602,"slug":4603,"type":13},"Engineering","engineering",{"name":9,"slug":8,"type":13},"2026-07-16T06:04:34.254605",{"slug":4607,"name":4607,"fn":4608,"description":4609,"org":4610,"tags":4611,"stars":20,"repoUrl":21,"updatedAt":4620},"devtools-framework-adapters","create framework adapters for devtools","Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin\u002FcreateSolidPlugin\u002FcreateVuePlugin\u002FcreatePreactPlugin, createReactPanel\u002FcreateSolidPanel\u002FcreateVuePanel\u002FcreatePreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component) not options object. Solid render must be function.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4612,4613,4614,4616,4618,4619],{"name":4602,"slug":4603,"type":13},{"name":1686,"slug":1683,"type":13},{"name":4615,"slug":28,"type":13},"React",{"name":4617,"slug":29,"type":13},"SolidJS",{"name":9,"slug":8,"type":13},{"name":802,"slug":799,"type":13},"2026-07-16T06:04:33.553047",{"slug":4622,"name":4622,"fn":4623,"description":4624,"org":4625,"tags":4626,"stars":20,"repoUrl":21,"updatedAt":4631},"devtools-instrumentation","instrument library code for devtools","Analyze library codebase for critical architecture and debugging points, add strategic event emissions. Identify middleware boundaries, state transitions, lifecycle hooks. Consolidate events (1 not 15), debounce high-frequency updates, DRY shared payload fields, guard emit() for production. Transparent server\u002Fclient event bridging.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4627,4628,4629,4630],{"name":18,"slug":19,"type":13},{"name":4602,"slug":4603,"type":13},{"name":4588,"slug":4589,"type":13},{"name":9,"slug":8,"type":13},"2026-07-16T06:04:33.21467",{"slug":4633,"name":4633,"fn":4634,"description":4635,"org":4636,"tags":4637,"stars":20,"repoUrl":21,"updatedAt":4640},"devtools-marketplace","publish plugins to TanStack Devtools Marketplace","Publish plugin to npm and submit to TanStack Devtools Marketplace. PluginMetadata registry format, plugin-registry.ts, pluginImport (importName, type), requires (packageName, minVersion), framework tagging, multi-framework submissions, featured plugins.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4638,4639],{"name":103,"slug":103,"type":13},{"name":9,"slug":8,"type":13},"2026-07-16T06:04:09.110642",{"slug":4424,"name":4424,"fn":4642,"description":4643,"org":4644,"tags":4645,"stars":20,"repoUrl":21,"updatedAt":4650},"build TanStack devtools panels","Build devtools panel components that display emitted event data. Listen via EventClient.on(), handle theme (light\u002Fdark), use @tanstack\u002Fdevtools-ui components. Plugin registration (name, render, id, defaultOpen), lifecycle (mount, activate, destroy), max 3 active plugins. Two paths: Solid.js core with devtools-ui for multi-framework support, or framework-specific panels.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[4646,4647,4648,4649],{"name":15,"slug":16,"type":13},{"name":4588,"slug":4589,"type":13},{"name":9,"slug":8,"type":13},{"name":4468,"slug":4469,"type":13},"2026-07-16T06:03:59.434886"]