Third-party Plugins

While TanStack offers a suite of first-party plugins, we also want to open the doors to third-party developers. Hence, we created the marketplace. To be included in the marketplace registry, submit a PR to the TanStack/devtools repository.

Inclusion in the Marketplace

To add your plugin, submit the required information to the following file: packages/devtools/src/tabs/plugin-registry.ts

Example Entry

tsx

'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},

'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},

Pull Request Format

As shown in the example above, the registry is an object with the following structure:

Key – Your package name

tsx

'@tanstack/react-pacer-devtools': { PluginMetadata }

'@tanstack/react-pacer-devtools': { PluginMetadata }

Value – An object of type PluginMetadata with the following properties:

packageName – The package’s name on npm

{ packageName: string }

{ packageName: string }

title – The title of the plugin card

{ title: string }

{ title: string }

description – A short description of your devtools (optional)

{ description?: string }

{ description?: string }

logoUrl – The URL of the plugin’s logo (optional)

{ logoUrl?: string }

{ logoUrl?: string }

requires – An object containing the dependencies of your devtools (optional)

requires?: {
  /** Required package name (e.g., '@tanstack/react-query') */
  packageName: string
  /** Minimum required version (semver) */
  minVersion: string
  /** Maximum version (if there’s a known breaking change) */
  maxVersion?: string
}

requires?: {
  /** Required package name (e.g., '@tanstack/react-query') */
  packageName: string
  /** Minimum required version (semver) */
  minVersion: string
  /** Maximum version (if there’s a known breaking change) */
  maxVersion?: string
}

pluginImport – An object containing plugin import details (optional)

pluginImport?: {
  /** The exact name to import from the package (e.g., 'FormDevtoolsPlugin' or 'ReactQueryDevtoolsPanel') */
  importName: string
  /** Whether this is a JSX component or a function returning a plugin */
  type: 'jsx' | 'function'
}

pluginImport?: {
  /** The exact name to import from the package (e.g., 'FormDevtoolsPlugin' or 'ReactQueryDevtoolsPanel') */
  importName: string
  /** Whether this is a JSX component or a function returning a plugin */
  type: 'jsx' | 'function'
}

pluginId – A string representing a custom plugin ID (optional)

{ pluginId?: string }

{ pluginId?: string }

docsUrl – The URL to your plugin’s documentation (optional)

{ docsUrl?: string }

{ docsUrl?: string }

author – The author’s name for credit (optional)

{ author?: string }

{ author?: string }

repoUrl – The URL of the plugin’s repository (optional)

{ repoUrl?: string }

{ repoUrl?: string }

framework – The framework supported by the plugin

{ framework?: 'react' | 'solid' | 'vue' | 'svelte' | 'angular' | 'other' }

{ framework?: 'react' | 'solid' | 'vue' | 'svelte' | 'angular' | 'other' }

tags – Tags for filtering and categorization

{ tags?: string[] }

{ tags?: string[] }

Submitting Multiple Plugins

You can submit multiple plugins if you provide devtools for different frameworks. For example, using the Pacer plugin from earlier, you might include a Solid version as well:

tsx

'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},
'@tanstack/solid-pacer-devtools': {
  packageName: '@tanstack/solid-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/solid-pacer',
    minVersion: '0.14.4',
  },
  author: 'TanStack',
  framework: 'solid',
  tags: ['TanStack'],
},

'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},
'@tanstack/solid-pacer-devtools': {
  packageName: '@tanstack/solid-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/solid-pacer',
    minVersion: '0.14.4',
  },
  author: 'TanStack',
  framework: 'solid',
  tags: ['TanStack'],
},

Featured Plugins

The TanStack Marketplace includes a Featured section for official partners of the TanStack organization and select library authors we collaborate with.

To request inclusion, send an email to partners+devtools@tanstack.com.