The missing debugger for reactive signals.
Visualize, trace, and debug your reactive signal graphs in real time —
directly inside VS Code, with zero refactoring required.
Showcases the structured signal activity, copy-name buttons, and the new collapsible line-wise JSON Tree Viewer.
Chronological swimlane details showing exact update event counters (e.g. event 1/7) and group collapse controls.
Flags memory hotspots, recursive cycles, and dead signals directly inside the editor sidebar.
Full workspace layout demonstrating editor sync with the running application.
| Feature | Description |
|---|---|
| 📊 Activity Table | Live, filterable event log for every signal read, write, and effect. Features Pinned/Others categorizations, hover copy icons, and a line-wise collapsible JSON tree inspector. |
| ⏱️ Timeline (Causal Chains) | Chronological swimlane list showing sequential tick-by-tick update paths, event counts, and chain collapse/hide filters. |
| 🧩 Component Audits & Loops | Group updates by component. Flags circular invalidation loops, computation hotspots (>2.0ms), and unused dead signals. |
| 🎯 Click-to-Navigate | Click any signal event, timeline card, or warning log to jump to the exact source declaration line in your editor. |
| 🪟 Universal IDE Support | Native extensions for both VS Code and JetBrains (WebStorm, IntelliJ) with full Webview synchronisation. |
| ⚡ Zero-refactoring Setup | Built-in CLI wrapper (npx sigtrace run) injects transformation compile hooks dynamically without editing your source code. |
| Framework | Version | Status |
|---|---|---|
| Angular | 17+ (Signals API) | ✅ Fully supported |
| Vue | 3+ (Composition API) | ✅ Fully supported |
| SolidJS | 1.8+ | ✅ Fully supported |
| React | 18+ (Signals API) | 🔜 Coming soon |
| Svelte | 5 (Runes) | 🔜 Coming soon |
1. Install packages:
npm install --save-dev @sigtrace/core @sigtrace/vite-plugin2. Add the Vite plugin (vite.config.ts):
import { defineConfig } from 'vite';
import { angular } from '@analogjs/vite-plugin-angular';
import { sigtracePlugin } from '@sigtrace/vite-plugin';
export default defineConfig({
plugins: [
angular(),
sigtracePlugin(), // ← add this
],
});3. Open the DevTools panel in VS Code:
Cmd+Shift+P → "SigTrace: Open DevTools Panel"
4. Run your app with the CLI wrapper and watch the signal graph come alive:
npx sigtrace run <project run command>Note
Replace <project run command> with your actual local project execution command (for example: npm run dev, vite, ng serve, etc.).
⏳ Vue 3 adapter is in active development. Star the repo to be notified when it ships!
# Coming in v1.2.0 — track progress:
# https://github.com/sigtrace-dev/sigtrace/issues?q=label%3Avue3⏳ SolidJS adapter is in active development.
# Coming in v1.2.0 — track progress:
# https://github.com/sigtrace-dev/sigtrace/issues?q=label%3AsolidjsSigTrace is a monorepo with three focused packages:
sigtrace/
├── packages/
│ ├── core/ @sigtrace/core — WebSocket server + event types
│ ├── vite-plugin/ @sigtrace/vite-plugin — Build-time AST instrumentation
│ └── extension/ sigtrace-devtools — VS Code DevTools panel
└── demo/ Reference Angular app
| Package | npm | Purpose |
|---|---|---|
packages/core |
@sigtrace/core |
Lightweight WebSocket server (localhost:7337) that receives signal lifecycle events and streams them to connected clients |
packages/vite-plugin |
@sigtrace/vite-plugin |
Vite transform that instruments signal(), computed(), effect(), and toSignal() calls at build time via AST rewriting |
packages/extension |
VS Code Marketplace | VS Code extension hosting the DevTools webview panel — graph, dashboard, CodeLens overlays, and source navigation |
Your App Source Vite Build Pipeline SigTrace Server
───────────────── ──────────────────── ───────────────
const count = @sigtrace/vite-plugin @sigtrace/core
signal(0); ───AST──▶ instruments calls ──WS──▶ WebSocket server
at build time :7337
│
▼ │
Instrumented Runtime │
emits events on every VS Code Extension
signal read/write/effect ◀──WS──── connects &
renders DevTools
-
Build time:
@sigtrace/vite-pluginrewrites your source using an AST transform. It wraps signal primitives with thin event emitters that record the signal name, source location, value, and timestamp. -
Runtime: The instrumented app connects to the
@sigtrace/coreWebSocket server and streams events as JSON messages. -
DevTools: The VS Code extension connects to the same WebSocket endpoint, receives events, and renders the interactive dashboard and graph in a Webview panel.
Production safety: The instrumentation is only injected in development mode. Your production bundles are completely unaffected.
| What you need | Install command |
|---|---|
| WebSocket server + types | npm i -D @sigtrace/core |
| Vite build plugin | npm i -D @sigtrace/vite-plugin |
| VS Code extension | Search "SigTrace DevTools" in VS Code extensions |
@sigtrace/vite-plugin accepts an optional configuration object:
sigtracePlugin({
port: 7337, // WebSocket server port (default: 7337)
enabled: true, // Enable/disable instrumentation (default: true in dev)
verbose: false, // Log instrumentation activity to console (default: false)
include: ['**/*.ts'],// Glob patterns to instrument (default: all .ts files)
exclude: ['**/node_modules/**'],
})We welcome contributions! Whether it's a bug fix, a new framework adapter, or a UI improvement — all contributions are valuable.
Please read our Contributing Guide to get started, and review our Code of Conduct.
Quick links:
To report a security vulnerability, please open a GitHub Private Security Report rather than opening a public issue.
See our full Security Policy for disclosure timelines and supported versions.
See CHANGELOG.md for a detailed history of changes across all versions.
SigTrace is released under the Elastic License 2.0 (ELv2).
- Allowed: Free for everyone (individuals, startups, and commercial enterprises) to use, modify, and run in development and production workflows.
- Prohibited: You may not provide SigTrace to third parties as a hosted or managed commercial service, or sell competing developer tools derived directly from this repository.
Copyright © 2025 SigTrace Contributors.
Made with ❤️ by the SigTrace community