DevTools

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.

Info

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:

bun add -D @c15t/dev-tools

Usage

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

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{ mode: 'c15t', backendURL: '/api/c15t' }}>
      {children}
      {process.env.NODE_ENV === 'development' && <DevTools />}
    </ConsentManagerProvider>
  );
}

Configuration

<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)

Props

Property

Types

Loading…