---
title: DevTools
description: A development tool for inspecting consent state, geolocation,
  loaded scripts, and consent events in real time.
group: frameworks
lastModified: "2026-06-19T14:11:31+01:00"
lastAuthor: Kaylee
---
`DevTools` is a floating panel that shows the internal state of the consent manager. Use it during development to inspect consent values, geolocation results, loaded scripts, and debug consent flows. Also exported as `C15TDevTools` if you need to avoid naming conflicts with other devtools.

> ⚠️ **Warning:**
> DevTools should only be included in development builds. The component renders nothing to the React tree - it injects directly into document.body.

## Installation

DevTools lives in a separate package to keep it out of production bundles:

```bash
bun add -D @c15t/dev-tools
```

## Usage

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { DevTools } from '@c15t/dev-tools/react';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{ mode: 'hosted', backendURL: 'https://your-instance.c15t.dev' }}>
      {children}
      {process.env.NODE_ENV === 'development' && <DevTools />}
    </ConsentManagerProvider>
  );
}
```

## Configuration

```tsx
<DevTools
  position="bottom-right"  // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  defaultOpen={false}       // Start with panel open
  namespace="c15tStore"     // Store namespace to connect to
  disabled={false}          // Disable without removing from tree
/>
```

## Panels

|Panel|What it shows|
|--|--|
|**Consents**|Current consent state for all categories|
|**Location**|Detected jurisdiction, country, region, and consent model|
|**Scripts**|Configured scripts and their load status|
|**IAB**|IAB TCF state (when enabled) - TC string, vendor consents, purposes|
|**Events**|Timeline of consent events and state changes|
|**Actions**|Buttons to trigger consent actions (accept all, reject all, reset)|

## TanStack Devtools

`@c15t/dev-tools/tanstack` exposes a panel component and plugin factory that match TanStack Devtools' plugin API, so c15t can sit beside Query and Router without a custom mount adapter:

```tsx
import * as React from 'react';
import { useRouter } from '@tanstack/react-router';
import { TanStackDevtools } from '@tanstack/react-devtools';
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { c15tDevtools } from '@c15t/dev-tools/tanstack';

export function AppDevtools() {
  const router = useRouter();

  return (
    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel router={router} />,
        },
        c15tDevtools(),
      ]}
    />
  );
}
```

## Props

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|disabled|boolean \|undefined|Whether the DevTools should be disabled&#xA;Useful for production builds|false|Optional|