Integration Examples | Documentation

Below are common integration patterns for advanced use cases. These examples demonstrate how to make DevConsole a first-class citizen in your development workflow.

React Query Integration

Connect DevConsole to your React Query client to enable the State Controller's cache inspection features.

tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DebugToolkit } from "devconsole-package";

const queryClient = new QueryClient();

// Expose client to toolkit window global
if (process.env.NODE_ENV === "development") {
  (window as any).__REACT_QUERY_CLIENT__ = queryClient;
}

function App() {
  return (
    
      
      
    
  );
}

Auth Override Pattern

Use God Mode overrides to simulate different user plans and roles throughout your application without re-logging.

tsx

import { useGodMode } from "devconsole-package";
import { useAuth } from "./auth-context";

export function useFeatureGating() {
  const { user } = useAuth();
  const { overrides, enabled } = useGodMode();

  // Use override if God Mode is active, otherwise use actual user plan
  const activePlan = (enabled && overrides.plan) ? overrides.plan : user.plan;

  return {
    isPremium: activePlan === 'Premium' || activePlan === 'Agency',
    isAgency: activePlan === 'Agency'
  };
}

Conditional Mounting Script

For projects not using React, use this script to conditionally load and mount the toolkit only when a specific URL parameter is present or in local development.

javascript

// debug-init.js
import { mountDebugToolkit } from "devconsole-package";

const isDev = window.location.hostname === 'localhost';
const forceDebug = new URLSearchParams(window.location.search).has('debug');

if (isDev || forceDebug) {
  mountDebugToolkit({
    containerId: 'my-custom-debug-root',
    initialTab: 'Console',
    godMode: forceDebug // Enable God Mode even in prod if force parameter is used
  });
}