Hook Studio

Visual GUI for VS Code hooks.json — the missing tooling for Copilot Chat hooks (VS Code 1.109+)

Why Hook Studio?

VS Code 1.109 shipped Copilot Chat hooks — a powerful system that fires before/after tool calls. But the only way to configure them is by hand-editing .github/hooks.json. There is no tooling, no validator, no way to see what fired and why.

Hook Studio fills that gap with a visual, tabbed interface directly inside VS Code.

Features

Feature	Description
Rule Builder	Edit `hooks.json` with syntax highlighting, validation, and save
Execution Log	See which hooks fired, when, and whether they succeeded
Condition Tester	Simulate a tool call to preview which hooks would activate
Import from Alex	One-click import from the Alex Cognitive Architecture hooks
File Watch	Auto-reloads when `hooks.json` changes externally
Right-click menus	Right-click any `hooks.json` in Explorer or Editor to access all commands directly

Requirements

VS Code 1.109 or later
A workspace with .github/hooks.json (or create one via Hook Studio: Open)

Usage

Open the Command Palette (Ctrl+Shift+P)
Run Hook Studio: Open — or right-click any hooks.json file and select from the context menu
Use the Rule Builder tab to edit your hooks
Click Validate to check JSON syntax
Click Save to write back to .github/hooks.json
Use the Condition Tester to simulate tool calls before committing

hooks.json Format

{
  "hooks": [
    {
      "event": "onToolCall",
      "tool": "createFile",
      "when": "always",
      "run": "echo 'File created'"
    }
  ]
}

Commands

Command	Where	Description
`Hook Studio: Open`	Palette · Right-click `hooks.json`	Open the visual editor panel
`Hook Studio: Test Condition`	Palette · Right-click `hooks.json`	Run condition tester with a tool name
`Hook Studio: Import from Alex Hooks`	Palette	Load hooks from Alex architecture
`Hook Studio: Export hooks.json`	Palette · Right-click `hooks.json`	Export to a custom path
`Hook Studio: Open Execution Log`	Palette · Right-click `hooks.json`	Show log view in Explorer sidebar

Extension Settings

No configuration required. Hook Studio auto-activates when .github/hooks.json exists in the workspace.

🔷 CX Tools Suite

Explore more tools from the same suite:

Extension	Description	Marketplace
AI Voice Reader	Read files, selections, or documents aloud with Web Speech API	Install ↗
Brandfetch Logo Fetcher	Fetch and insert brand logos from any domain — SVG, PNG, or Markdown	Install ↗
Dev Wellbeing	Posture, eye-strain, and hydration reminders for long coding sessions	Install ↗
Focus Timer	Pomodoro-style focus and break timer with status bar countdown	Install ↗
Gamma Slide Assistant	Export Marp Markdown presentations to HTML and PDF	Install ↗
Hook Studio (this)	Visual editor for VS Code hook conditions and automation rules	Install ↗
Knowledge Decay Tracker	Track staleness of documentation and flag overdue reviews	Install ↗
Markdown to Word	Convert Markdown + Mermaid diagrams to .docx via Pandoc	Install ↗
MCP App Starter	Scaffold Model Context Protocol servers in TypeScript, JavaScript, or Python	Install ↗
Mermaid Diagram Pro	Preview, export, and validate Mermaid diagrams in Markdown files	Install ↗
PPTX Builder	Generate PowerPoint presentations from Markdown using pptxgenjs	Install ↗
Replicate Image Studio	Generate images and videos with FLUX, SDXL, and WAN via Replicate API	Install ↗
SecretGuard	Scan workspaces and files for accidentally committed secrets and keys	Install ↗
SVG to PNG	Convert SVG files to PNG using resvg-js (Rust renderer, no ImageMagick)	Install ↗
SVG Toolkit	Preview, copy as data URI, and validate SVG files in-editor	Install ↗
Workspace Watchdog	Monitor file health, detect stalled work, and surface hot files	Install ↗

License

MIT

CX Hook Studio

fabioc-aloha