Quick Start | Documentation

DevConsole is designed to be easy to integrate. For React and Next.js applications, use the provided Providers. For other frameworks, use the universal mounting function.

Next.js (App Router)

Wrap your root layout with DebugProvider and GodModeProvider. CSS loads automatically - no manual import needed!

tsx

"use client";

import dynamic from "next/dynamic";
import { DebugProvider, GodModeProvider } from "devconsole-package";

// CSS loads automatically - no manual import needed!
// Use dynamic import with SSR disabled
const DebugToolkit = dynamic(
  () => import("devconsole-package").then((mod) => mod.DebugToolkit),
  { ssr: false }
);

export default function RootLayout({ children }) {
  return (
    
      
        {children}
        
      
    
  );
}

Universal Mounting (Vue, Svelte, Vanilla JS)

Use the mountDebugToolkit function to inject the toolkit into any web application.

javascript

import { mountDebugToolkit } from "devconsole-package";

if (process.env.NODE_ENV === "development") {
  mountDebugToolkit({
    initialTab: 'Network',
    godMode: true
  });
}

Step 3: Tailor with JSON (Optional)

Create a .devconsole.json file in your project's public/ folder to define your project's specific APIs, feature flags, and onboarding steps.

json

{
  "version": "1.0.0",
  "apiEndpoints": [
    { "id": "me", "name": "Get User", "url": "/api/me", "method": "GET" }
  ],
  "featureFlags": [
    { "id": "new_ui", "label": "Beta Interface" }
  ]
}

The toolkit will automatically detect this file and merge it with the default settings.

Tip: CSS styles load automatically when you import the package. No manual CSS import needed!

Note: The toolkit is automatically tree-shaken in production builds when using environment-based conditional rendering.