​

Unhook VSCode Extension

​

Features Overview

​

🎯 Webhook Event Explorer

• View all webhook events in a dedicated sidebar panel
• Real-time updates as events are received
• Hierarchical view of events and their associated requests
• Quick filtering and search capabilities

​

🔄 Request Replay & Debugging

• Instantly replay webhook events and individual requests
• Copy event data to clipboard for analysis
• Detailed request/response inspection in a native webview
• Support for debugging failed webhook deliveries

​

👥 Team Collaboration

• See active team members and their webhook sessions
• Share webhook URLs while maintaining individual environments
• Real-time collaboration features

​

🔐 Secure Authentication

• OAuth-based authentication with Unhook
• Secure session management and token handling
• Automatic session validation and refresh

​

⚙️ Smart Configuration

• Automatic detection of Unhook config files in workspace
• Configurable settings for output behavior and event history
• Integration with VS Code’s settings system

​

📊 Real-Time Monitoring

• Live webhook event monitoring in the sidebar
• Integrated output panel with configurable logging
• Status bar integration showing connection status

​

Installation

​

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for “Unhook - Webhook Development”
4. Click Install

​

From VSIX File

1. Open VS Code
2. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Click the ... menu and select “Install from VSIX…”
4. Select the downloaded .vsix file

​

Getting Started

​

1. Authentication

1. Open the Unhook sidebar - Click the Unhook icon in the Activity Bar
2. Sign in - Click “Sign in to Unhook” in the status bar or use Ctrl+Shift+P → “Unhook: Sign in to Unhook”
3. Complete OAuth flow - Your browser will open to complete authentication
4. Return to VS Code - The extension will automatically detect the successful authentication

​

2. Configure Your Workspace

• unhook.yaml or unhook.yml in the workspace root
• Custom path via the unhook.configFilePath setting

webhookUrl: https://unhook.sh/your-org/your-webhook-name
destination:
  - name: local
    url: http://localhost:3000/api/webhooks
    ping: true
delivery:
  - source: "*"
    destination: local

​

3. Start Receiving Webhooks

1. Create a webhook URL at unhook.sh/app
2. Configure your webhook provider (Stripe, GitHub, etc.) to use the Unhook URL
3. View events in VS Code - Events will appear in the Unhook sidebar as they’re received

​

Core Features

​

Event Explorer Sidebar

• Events Tree View: Hierarchical display of events and requests
• Real-time Updates: Events appear automatically as they’re received
• Context Actions: Right-click for replay, copy, and view options
• Quick Actions: Toolbar buttons for common operations

​

Event Actions

• View Event (👁️) - Open detailed view in webview panel
• Replay Event (▶️) - Resend the event to all configured destinations
• Copy Event (📋) - Copy event JSON to clipboard

​

Request Actions

• View Request (👁️) - Open detailed request/response view
• Replay Request (▶️) - Resend just this specific request

​

Request Details Webview

• Request Information: Method, URL, headers, and body
• Response Data: Status code, headers, and response body
• Timing Information: Request duration and timestamps
• Syntax Highlighting: JSON and other formats are beautifully formatted
• Copy to Clipboard: Easy copying of any data section

​

Quick Pick Interface

• Browse recent events
• Quick replay functionality
• Fast navigation to event details

​

Status Bar Integration

• 🔄 Validating Session - When checking authentication
• ✅ Unhook - Connected and ready (click for quick actions)
• 🔑 Sign in to Unhook - Not authenticated (click to sign in)

​

Output Panel Integration

• Automatic Output Panel - Shows webhook events as they arrive
• Configurable Behavior - Control when the output panel appears
• Log Management - Automatic cleanup of old log entries
• Manual Controls - Clear, focus, and toggle output panel

​

Commands Reference

​

Authentication Commands

​

Event Management Commands

​

Event Actions

​

Output & Settings Commands

​

Configuration

​

Extension Settings

​

Output Settings

{
  "unhook.output.autoShow": true,
  "unhook.output.maxLines": 1000
}

• unhook.output.autoShow (boolean, default: true) Automatically show the output panel when new events are received
• unhook.output.maxLines (number, default: 1000) Maximum number of lines to keep in the output panel

​

Event Management Settings

{
  "unhook.events.maxHistory": 100,
  "unhook.events.autoClear": false
}

• unhook.events.maxHistory (number, default: 100) Maximum number of events to keep in history
• unhook.events.autoClear (boolean, default: false) Automatically clear old events when the maximum history is reached

​

Configuration File Settings

{
  "unhook.configFilePath": "./custom/path/unhook.yaml"
}

• unhook.configFilePath (string, default: "") Path to the Unhook config file. If not set, the extension will look in the workspace root.

​

Workspace Configuration

# unhook.yml
webhookUrl: https://unhook.sh/your-org/your-webhook-name

destination:
  - name: local-dev
    url: http://localhost:3000/api/webhooks
    ping: true
  - name: staging
    url: https://staging.example.com/api/webhooks
    ping: false

source:
  - name: stripe
  - name: github

delivery:
  - source: stripe
    destination: local-dev
  - source: github
    destination: staging

​

Advanced Usage

​

Team Collaboration

1. Shared Configuration - Use a shared unhook.yaml in your repository
2. Individual API Keys - Each team member uses their own API key
3. Environment-Specific Destinations - Configure different endpoints per developer

​

Provider Integration

• Stripe - Payment and subscription webhooks
• GitHub - Repository and organization events
• Clerk - Authentication and user management events
• Discord - Bot and server events
• Custom Providers - Any webhook-enabled service

​

Debugging Workflows

1. Event Inspection - Use the webview to examine request/response data
2. Selective Replay - Replay specific events or requests for testing
3. Local Testing - Route webhooks to different local endpoints
4. Response Analysis - Check response codes and timing information

​

Keyboard Shortcuts

1. Open Keyboard Shortcuts (Ctrl+K Ctrl+S / Cmd+K Cmd+S)
2. Search for “unhook”
3. Assign shortcuts to frequently used commands

{
  "key": "ctrl+shift+u",
  "command": "unhook.quickPick"
},
{
  "key": "ctrl+shift+r",
  "command": "unhook.events.refresh"
}

​

Troubleshooting

​

Common Issues

​

Authentication Problems

• Solution: Sign out and sign in again using the command palette
• Check: Ensure you have a valid Unhook account at unhook.sh

​

No Events Appearing

• Check: Verify your unhook.yaml configuration is correct
• Check: Ensure the webhook URL is properly configured with your provider
• Solution: Use the refresh button in the Events panel

​

Configuration Not Found

• Check: Ensure unhook.yaml exists in your workspace root
• Alternative: Set custom path via unhook.configFilePath setting
• Verify: Check YAML syntax is valid

​

Replay Failures

• Check: Ensure delivery is not paused (use “Toggle Event Delivery”)
• Check: Verify destination URLs are accessible
• Debug: Check the output panel for error messages

​

Debug Mode

1. Open Output panel (Ctrl+Shift+U / Cmd+Shift+U)
2. Select “Unhook” from the dropdown
3. Look for detailed logging information

​

Getting Help

• Documentation: unhook.sh/docs
• GitHub Issues: github.com/unhook-sh/unhook/issues
• Discord Community: discord.gg/qRZzTCK6MZ
• Email Support: chris.watts.t@gmail.com

​

Development & Contributing

​

Building from Source

# Clone the repository
git clone https://github.com/unhook-sh/unhook.git
cd unhook/apps/vscode-extension

# Install dependencies
bun install

# Build the extension
bun run build

# Package as VSIX
bun run package

​

Development Mode

# Start development mode
bun run dev

# This runs both:
# - Extension compilation in watch mode
# - Webview development server

​

Contributing

​

Changelog

​

License