Catalyst

A lightweight Angular devtool to manage and modify HTTP request headers in real-time.

Features

• Add, edit, or remove HTTP headers dynamically.
• Works seamlessly with Angular v19+ applications.
• Includes a basic interactive devtool panel.
• Supports sending modified headers to any HTTP request.

Installation

npm install @shahlol/catalyst

Usage

• Import CatalystDevTool component on your main app.component.ts.

import { CatalystDevTool } from '@shahlol/catalyst';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, CatalystDevTool]
})

• Use the provided component.

<lib-catalyst [production]="false" />

• Include the Interceptor provider to your list of providers app.config.ts.

import { provideCatalystInterceptor } from '@shahlol/catalyst';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCatalystInterceptor(),
  ]
}

• Import styles to your mainstyles.css file.

@import "@shahlol/catalyst/styles.css";

Development

# Clone repo
git clone https://github.com/shahlol/catalyst.git
cd catalyst

# Install dependencies
npm install

# Build library
ng build catalyst

# Run demo app
ng serve demo