Customization | Documentation

DevConsole is highly modular and customizable. You can control which tabs are visible, change the theme, and use the internal hooks to build your own debugging components.

Modular Architecture

The entire toolkit is designed as a modular system. Every tab, adapter, and controller can be tweaked or completely replaced to fit your team's specific needs. Whether you need to rearrange the default tabs or inject entirely new functionality, the system is built to be flexible.

Theme & Branding

Make the toolkit feel like a part of your design system. You can override the default emerald/cyan theme with your own brand colors.

tsx

const themeConfig = {
  primaryColor: '#6366f1',   // Indigo
  secondaryColor: '#f43f5e', // Rose
  accentColor: '#fbbf24',    // Amber
  godModeColor: '#000000'    // Pitch Black
};

...

Colors are applied to tab indicators, borders, primary buttons, and the God Mode system status.

Position Configuration

Control where the trigger button and toolkit panel appear on the screen. The trigger button stays sticky in the configured corner, making it easily accessible regardless of scroll position.

tsx

// Position the toolkit in different corners
  // Default

The position prop controls both the trigger button (when closed) and the toolkit panel (when open). Both remain sticky in the configured corner using fixed positioning.