NgPulse — Angular Component State Inspector Widget

Name: NgPulse — Angular Component State Inspector Widget
Brand: DriftPixel Studio
Price: 6.00 USD
Availability: InStock

No ratings

|0 Sales|by DriftPixel Studio|v1.0.0

NgPulse — Angular Component State Inspector Widget screenshot 1

1 / 1

Sales

—

Rating

Reviews

Description

NgPulse — Real-Time Angular Component State Inspector

NgPulse is a compact, self-contained vanilla-JS developer widget designed specifically for Angular developers. Drop it into any Angular project's index.html during development and instantly get a sleek dark-theme overlay that lets you monitor, inspect, and simulate Angular component lifecycle states — all without a build step or browser extension.

The demo page showcases a realistic Angular-like component tree panel with live state inspection: track @Input bindings, Change Detection cycles, component mount/destroy simulation, and observable emission counts — all rendered in a terminal-inspired dark console aesthetic. Perfect for talks, documentation, team demos, or embedding into your own developer tools.

🔭 Live component state inspector with mock Angular component tree
⚡ Change detection cycle counter with visual pulse animation
🎛️ @Input / @Output binding simulator panel
📟 Console-style event log with timestamped entries and severity levels
🧩 Draggable floating widget — stays out of your way while you work
🌑 Unique "Developer Console" dark theme — amber-on-charcoal, not generic blue/purple

Delivered as a single self-contained index.html with zero dependencies and zero build steps. Just open in a browser. Ideal for Angular teams, developer tool authors, and technical screencasters.

Features

Single self-contained index.html — zero build step, zero dependencies

Dark Developer Console aesthetic — amber (#F59E0B) on deep charcoal (#0F1117), unique non-blue palette

Live mock Angular component tree with expandable nodes and active/inactive states

Change detection cycle counter with animated pulse ring on every simulated tick

@Input/@Output binding simulator — edit values and see the state panel update instantly

Console-style scrollable event log with INFO / WARN / ERROR severity color coding and live timestamps

Draggable floating widget panel — click-and-drag title bar to reposition anywhere on screen

Component mount / destroy / re-render action buttons with realistic lifecycle log output

Observable emission simulator with subscription count badge

Responsive layout — works on desktop and tablet viewports

Fully commented vanilla JS (~150 lines) — easy to extend or embed

README.md with integration guide and customization notes

Requirements

Any modern browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
No build step, no Node.js, no npm
No Angular runtime required — pure vanilla JS demo
Open index.html directly from the file system or any static host

Changelog

**v1.0.0** (Latest) - Initial release with full component tree inspector panel - Draggable floating widget with amber-on-charcoal dark theme - @Input/@Output binding simulator with live state updates - Console log panel with INFO/WARN/ERROR severity levels and timestamps - Change detection cycle counter with CSS pulse animation