SigTrace is an open-source developer tool that provides real-time reactive signal lifecycle tracing for Angular Signals, Vue 3 reactivity, SolidJS signals, React signals, and Svelte 5 runes inside your editor. It shows every signal write, computed re-evaluation, and effect chain as it happens — with no code refactoring required.

How do I install SigTrace?

Install the SigTrace editor extension. For Angular CLI, install @sigtrace/core and run npx sigtrace run ng serve. For Vite projects like Vue, Solid, React, and Svelte, install @sigtrace/core and @sigtrace/vite, then add sigTrace() in vite.config.ts.

Does SigTrace support Angular toSignal from RxJS interop?

Yes. SigTrace 1.1.6+ fully supports Angular's toSignal() from @angular/core/rxjs-interop. It automatically intercepts Observable emissions and registers each value update in the visualizer, showing the signal name, component, source location, and full value history.

Which frameworks and runtimes does SigTrace support?

SigTrace supports Angular Signals, Vue 3 reactivity, SolidJS signals, React with Preact Signals, and Svelte 5 runes. It provides per-framework instrumentation so you can trace writes, recomputations, and effects consistently across stacks.

Does SigTrace require code changes?

No. SigTrace uses a zero-refactoring approach. Run your dev server with 'npx sigtrace run' prefix and SigTrace automatically instruments your code at build time using AST transformation — no imports to change, no decorators to add.

Is SigTrace free to use?

Yes. SigTrace is free for all developers and organizations under the Elastic License 2.0 (ELv2). You can freely use, modify, and run it in development and production workflows.

ELv2 License · v1.1.6 · Free to Use

Tired of console.log
and browser debugger loops?

SigTrace shows exactly what changed, what re-ran, and what triggered it, so you can fix Angular, Vue, Solid, React, and Svelte signal bugs faster inside your editor.

Install Extension View Quickstart →

Zero config setup

No code refactoring

Free & open source

SigTrace VS Code signal activity table and line-wise JSON Tree viewer

▲ SigTrace panel — live signal activity inside VS Code

1. Activity: instant reactivity profiling

No more guessing through console.logs. Shows a live, filterable table of signal reads, writes, and effect triggers in real time. Spot which signals are over-triggering and sort by update counts to isolate jitter instantly.

Noisy SignalTop update source

Fast TriagePrioritize fixes

SigTrace VS Code timeline causal update chain logs

▲ SigTrace panel — causal propagation timeline of signal events

2. Timeline: trigger-flow causal chains

Trace the exact propagation tree of a signal update. Follow every computed evaluation and effect reaction in order (e.g. event 1/7). Unpin or hide chains to isolate clean causal pathways.

Root CauseFirst trigger

Chain DepthPropagation path

SigTrace VS Code component stats and issue warnings

▲ SigTrace panel — component signal usage analysis and performance alerts

3. Components & Issues: health audit

Audit your application's reactive health inside the IDE. Spot components with heavy work counts, discover computation hotspots taking >2ms, and clean up dangling dead signals before committing.

Hot ComponentMost reactive work

Cleanup TargetUnused/dead signals

100% local — WebSocket binds to localhost:8420 only

Zero telemetry — no analytics, no crash reports, no phone-home

Open source & auditable — read every line on GitHub

Frameworks Supported

Lines of Code Required

~2ms

Avg. Instrumentation Overhead

ELv2

Fair Source License

Features

Everything you need to understand
your reactive state

SigTrace gives you full visibility into your signal graph — from individual reads and writes to full causal chains spanning multiple components.

Live Activity Table

See every signal, computed, and effect update in real-time. Sort by most recent, most active, or alphabetically. Filter by component or search by name.

Causal Chain Timeline

Every signal write triggers a chain view showing exactly which computed values re-evaluated and which effects ran — with precise millisecond timing and hotspot detection.

Component Panel

Group signals by component. Identify unused signals, locate the slowest computed nodes, and understand which components drive the most reactive work.

Click-to-Navigate

Every signal row shows its source file and line number. Click once to jump directly to the declaration in your editor. Double-click any row to navigate instantly.

Full Value Inspector

Click to expand any signal and see its complete, pretty-printed JSON value with no truncation. Hover over values in the timeline for full content tooltips.

Self-Healing Multi-Window Mesh

Work across multiple VS Code windows at once. The first window becomes the WebSocket host. Every new window auto-joins as a client and receives all signal events live. If the host window closes, any client instantly self-promotes — zero reconnection steps, zero signal loss.

Compatibility

Works with your stack

SigTrace ships with dedicated adapters for every major reactive framework. One extension, one dashboard, all your signals.

🅰️

Angular

v17+ · Signals, computed, effect, toSignal

✓ Fully supported Setup Now →

💚

v3.3+ · ref, computed, watchEffect

✓ Fully supported Setup Now →

🔷

SolidJS

v1.8+ · createSignal, createMemo, createEffect

✓ Fully supported Setup Now →

⚛️

React

Preact Signals · signal, computed, effect

✓ Fully supported Setup Now →

🧡

Svelte 5

Install both the core tracer and the Vite plugin: npm i -D @sigtrace/core @sigtrace/vite.

Register the Vite plugin

Add sigTrace() to your vite.config.ts. See the code panel →

Run dev server normally

Run npm run dev (no prefix needed!). The plugin handles code transformations in the background.

            # Angular CLI (Webpack) — @sigtrace/vite NOT required

            # Step 1: Install ONLY the core tracer

            npm install --save-dev @sigtrace/core

            # Step 2: Start your dev server with sigtrace

            npx sigtrace run ng serve

            # That's it. The npx CLI handles AST instrumentation.

            # No imports, no decorators, no config files.

            # All Angular signal APIs tracked automatically:

            count = signal(0);         // ← ✓ tracked

            doubled = computed(() => this.count() * 2);  // ← ✓ tracked

            profile = toSignal(this.profile$);  // ← ✓ tracked
          
            # Vue 3 (Vite) — both core and Vite plugin required

            # Step 1: Install packages

            npm install --save-dev @sigtrace/core @sigtrace/vite

            # Step 2: Add to vite.config.ts

            import { sigTrace } from '@sigtrace/vite'

            export default defineConfig({

              plugins: [vue(), sigTrace()]

            })

            # Step 3: Run your dev server normally

            npm run dev
          
            # SolidJS (Vite) — both core and Vite plugin required

            # Step 1: Install packages

            npm install --save-dev @sigtrace/core @sigtrace/vite

            # Step 2: Add to vite.config.ts

            import { sigTrace } from '@sigtrace/vite'

            export default defineConfig({

              plugins: [solid(), sigTrace()]

            })

            # Step 3: Run your dev server normally

            npm run dev
          
            # React (Vite) — both core and Vite plugin required

            # Step 1: Install packages

            npm install --save-dev @sigtrace/core @sigtrace/vite

            # Step 2: Add to vite.config.ts

            import { sigTrace } from '@sigtrace/vite'

            export default defineConfig({

              plugins: [react(), sigTrace()]

            })

            # Step 3: Run your dev server normally

            npm run dev
          
            # Svelte 5 (Vite) — both core and Vite plugin required

            # Step 1: Install packages

            npm install --save-dev @sigtrace/core @sigtrace/vite

            # Step 2: Add to vite.config.ts

            import { sigTrace } from '@sigtrace/vite'

            export default defineConfig({

              plugins: [svelte(), sigTrace()]

            })

            # Step 3: Run your dev server normally

            npm run dev

FAQ

Frequently asked questions

Does SigTrace send my source code or signal data to any external server?

No — not a single byte leaves your machine. SigTrace runs a WebSocket server bound exclusively to 127.0.0.1:8420 (localhost). The editor extension connects to this local server and receives signal events. There is no cloud backend, no telemetry, no analytics, no crash reporting. You can verify this by reading the source: packages/core/src/index.ts shows the WebSocket connect line.

What is SigTrace and how is it different from Angular DevTools?

SigTrace is a real-time signal lifecycle tracer that works inside your editor, not in a browser-only panel. Unlike Angular DevTools (which shows component trees), SigTrace focuses on the reactive signal graph: every signal write, computed dependency evaluation, and effect execution is shown as a live causal chain. It supports Angular, Vue 3, SolidJS, React (Preact Signals), and Svelte 5 runes.

Do I need to change any code in my application?

No. SigTrace uses a zero-refactoring approach. An AST compiler plugin automatically instruments your signal calls at build time. Simply prefix your serve command with npx sigtrace run and all signals are tracked without any imports, decorators, or code changes.

Does SigTrace support Angular's toSignal() from RxJS interop?

Yes, fully supported as of v1.1.6. SigTrace intercepts the Observable stream, registers each emission as a signal write event, and displays the signal name, component, source file location, and full value history in the dashboard. This works with NgRx Store selectors and any other RxJS observables wrapped with toSignal.

Will SigTrace accidentally end up in my production build?

SigTrace has an explicit NODE_ENV=production guard. If it is somehow bundled into a production build, it emits a clear console warning and degrades to a complete no-op — no WebSocket connection, no instrumentation, no performance impact. To prevent this: install @sigtrace/core as a devDependency and use npx sigtrace run only in local dev scripts, not in CI/CD pipelines.

What is the performance overhead in development?

SigTrace adds approximately 1–3ms of overhead per signal write. For high-frequency signals (e.g. RxJS streams bound to mouse movements or WebSocket feeds), SigTrace auto-detects bursts of >10 events in 200ms and applies a 50ms debounce — keeping the dashboard responsive without freezing your UI. All dashboard updates are frame-batched (one WebSocket write per 16ms frame) and rendered asynchronously.

Is SigTrace free? Will it always be free?

SigTrace is free for all developers, teams, and organizations under the Elastic License 2.0 (ELv2). You can use and modify SigTrace freely. The only restriction is that third parties cannot provide SigTrace as a managed commercial service or sell competing derivative tools built directly from this code.

Does SigTrace work with multiple VS Code windows open?

Yes. SigTrace uses a self-healing extension host clustering protocol. The first VS Code window acts as the WebSocket host. Additional windows connect automatically as clients and receive all signal events in real-time. If the host window closes, a client window automatically promotes itself to the new host.

Free for Developers & Enterprise

Debug your reactive state
in minutes, not hours

Install SigTrace and get full visibility into your signal graph — for free, forever.

Install Extension ⭐ Star on GitHub

Tired of console.log and browser debugger loops?

1. Activity: instant reactivity profiling

2. Timeline: trigger-flow causal chains

3. Components & Issues: health audit

SigTrace by the numbers

Everything you need to understandyour reactive state

Live Activity Table

Causal Chain Timeline

Component Panel

Click-to-Navigate

Full Value Inspector

Self-Healing Multi-Window Mesh

Works with your stack

Up and running in under 2 minutes

Install the Extension

Install @sigtrace/core only

Prefix your dev server command

Open your app and watch signals flow

Install the Extension

Install core and vite packages

Register the Vite plugin

Run dev server normally

Install the Extension

Install core and vite packages

Register the Vite plugin

Run dev server normally

Install the Extension

Install core and vite packages

Register the Vite plugin

Run dev server normally

Install the Extension

Install core and vite packages

Register the Vite plugin

Run dev server normally

Frequently asked questions

Debug your reactive statein minutes, not hours

Tired of console.log
and browser debugger loops?

Everything you need to understand
your reactive state

Install `@sigtrace/core` only

Debug your reactive state
in minutes, not hours