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#

'@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

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

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

• packageName – The package’s name on npm

{ packageName: string }

• title – The title of the plugin card

{ title: string }

• description – A short description of your devtools (optional)

{ description?: string }

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

{ logoUrl?: string }

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

  ts

  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'
}

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

{ pluginId?: string }

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

{ docsUrl?: string }

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

{ author?: string }

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

{ repoUrl?: string }

• framework – The framework supported by the plugin

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

• tags – Tags for filtering and categorization

{ 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:

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