Source: https://tanstack.com/devtools/latest/docs/framework/solid/basic-setup

TanStack

Devtools v0v0

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Solid

Version

Latest

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Quick Start
  
  core

• Configuration
  
  core

• Plugin Configuration
  
  core

• Installation
  
  core

• Vite plugin
  
  core

• Third party plugins
  
  core

• Production
  
  core

• Basic setup
  
  solid

• Solid Adapter
  
  solid

API Reference

• Core API Reference
  
  core

• Solid Hooks
  
  solid

Examples

• Basic
  
  solid

Framework

Solid

Version

Latest

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Quick Start
  
  core

• Configuration
  
  core

• Plugin Configuration
  
  core

• Installation
  
  core

• Vite plugin
  
  core

• Third party plugins
  
  core

• Production
  
  core

• Basic setup
  
  solid

• Solid Adapter
  
  solid

API Reference

• Core API Reference
  
  core

• Solid Hooks
  
  solid

Examples

• Basic
  
  solid

On this page

• Setup

Basic setup

Copy Markdown

TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.

Setup
-----

Install the TanStack Devtools library, this will install the devtools core as well as provide you framework specific adapters.

bash

npm i @tanstack/solid-devtools


npm i @tanstack/solid-devtools

Next in the root of your application import the TanStackDevtools from the required framework adapter (in this case @tanstack/solid-devtools).

tsx

import { TanStackDevtools } from '@tanstack/solid-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)


import { TanStackDevtools } from '@tanstack/solid-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)

Import the desired devtools and provide it to the TanStackDevtools component along with a label for the menu.

Currently TanStack offers:

• QueryDevtools
• RouterDevtools
• FormDevtools

tsx

import { render } from 'solid-js/web';

import { TanStackDevtools } from '@tanstack/solid-devtools'

import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'

import App from './App'

render(() => (
  <>
    <App />

    <TanStackDevtools
      plugins={[\
        {\
          name: 'TanStack router',\
          render: () => <TanStackRouterDevtoolsPanel />,\
        },\
        {\
          name: 'TanStack Form',\
          render: () => <SolidFormDevtoolsPanel />,\
        },\
      ]}
    />
  </>
), document.getElementById('root')!)


import { render } from 'solid-js/web';

import { TanStackDevtools } from '@tanstack/solid-devtools'

import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'

import App from './App'

render(() => (
  <>
    <App />

    <TanStackDevtools
      plugins={[\
        {\
          name: 'TanStack router',\
          render: () => <TanStackRouterDevtoolsPanel />,\
        },\
        {\
          name: 'TanStack Form',\
          render: () => <SolidFormDevtoolsPanel />,\
        },\
      ]}
    />
  </>
), document.getElementById('root')!)

Finally add any additional configuration you desire to the TanStackDevtools component, more information can be found under the TanStack Devtools Configuration section.

A complete working example can be found in our examples section .

Edit on GitHub

Production

Solid Adapter

Partners Become a Partner