Name		Name	Last commit message	Last commit date
parent directory ..
src		src
CHANGELOG.md		CHANGELOG.md
README.md		README.md
eslint.config.js		eslint.config.js
package.json		package.json
tsconfig.docs.json		tsconfig.docs.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

README.md

@tanstack/solid-devtools

This package is still under active development and might have breaking changes in the future. Please use it with caution.

Usage

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

function App() {
  return (
    <div>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
        ]}
      />
    </div>
  )
}

Creating plugins

In order to create a plugin for TanStack Devtools, you can use the plugins prop of the TanStackDevtools component. Here's an example of how to create a simple plugin:

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

function App() {
  return (
    <div>
      <h1>My App</h1>
      <TanStackDevtools
        plugins={[
          {
            id: 'your-plugin-id',
            name: 'Your Plugin',
            render: <CustomPluginComponent />,
          },
        ]}
      />
    </div>
  )
}

devtools/packages/solid-devtools at main · yowainwright/devtools · GitHub

Expand file tree

Breadcrumbs

solid-devtools

Directory actions

More options

Directory actions

More options

Latest commit

History