Getting Started

Prerequisites

Angular 21+
@ngrx/signals 21+

Install

npm install @hypertheory-labs/stellar-ng-devtools

Configure the provider

In your app.config.ts, add provideStellar() to your providers:

import { ApplicationConfig } from '@angular/core';
import { provideStellar } from '@hypertheory-labs/stellar-ng-devtools';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStellar(),
    // ...your other providers
  ],
};

Mount the overlay

In your root component template, add the overlay element:

<router-outlet />
<stellar-overlay />

Import StellarOverlayComponent in your component:

import { StellarOverlayComponent } from '@hypertheory-labs/stellar-ng-devtools';

@Component({
  imports: [RouterOutlet, StellarOverlayComponent],
  // ...
})
export class App {}

Add devtools to a store

Use withStellarDevtools as a feature in any NgRx Signal Store:

import { signalStore, withState } from '@ngrx/signals';
import { withStellarDevtools } from '@hypertheory-labs/stellar-ng-devtools';

export const CounterStore = signalStore(
  withState({ count: 0 }),
  withStellarDevtools('CounterStore'),
);

The store name ('CounterStore') is the key used in the overlay and in the window.__stellarDevtools API.

Sanitizing sensitive state

If your store contains sensitive values, declare a sanitization config:

import { signalStore, withState } from '@ngrx/signals';
import { withStellarDevtools, sanitizeConfig } from '@hypertheory-labs/stellar-ng-devtools';

export const UserStore = signalStore(
  withState({ userId: '', email: '', sessionToken: '', role: '' }),
  withStellarDevtools('UserStore', {
    sanitize: sanitizeConfig<UserState>({
      email: 'email',         // keeps domain, redacts local part
      sessionToken: 'omitted', // removed entirely from snapshots
    }),
  }),
);

Fields matching the built-in blocklist (password, token, secret, apiKey, ssn, creditCard, etc.) are redacted automatically even without an explicit config. See The Libraries for the full list of available sanitization rules.

Next steps

Using Stellar — open the overlay, capture recordings, copy state for an AI assistant.
Connecting AI tools — wire Claude Code, VS Code (Copilot agent mode), or Codex to read live state directly from your dev app via @hypertheory-labs/stellar-mcp.