All-in-one developer utilities — 17+ tools including API Tester, JSON Formatter, Color Palette, Regex Generator, JWT Decoder, SQL Playground, and more. All running directly inside VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
No browser needed. No sign-ups. No data collection. Everything runs client-side inside a VS Code webview panel.
✨ Features
🛠️ Developer Tools (7)
Tool
Description
README Generator
Generate professional README.md with templates, badge builder, GitHub import & quality scoring
API Tester
Test REST & WebSocket APIs with environments, assertions, bulk runner, diff & code generation
Mock API Generator
Generate fake REST APIs with realistic data for testing
JWT Toolkit
Decode, verify, build & audit JSON Web Tokens
JSON Formatter
Format, validate, minify & transform JSON data
Regex Generator
Build & test regex patterns with live preview
Password Generator
Generate secure passwords, passphrases & PINs with entropy scoring
🎨 Frontend Tools (5)
Tool
Description
Color Palette
Generate & export beautiful color palettes
CSS Gradient
Create CSS gradients with live preview & code export
Box Shadow
Create layered box shadows with visual editor
Glassmorphism
Create frosted glass UI effects with code export
Grid Generator
Click & drag CSS Grid layout builder
📚 Learning Tools (5)
Tool
Description
Sorting Visualizer
Learn sorting algorithms with step-by-step visual animations
Recursion Visualizer
Visualize recursive function calls as animated trees
Event Loop Visualizer
See the JavaScript event loop, call stack & queues in action
Flexbox Playground
Learn CSS Flexbox interactively with live visual results
SQL Playground
Practice SQL queries in-browser with sample datasets
🚀 Getting Started
Installation
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Developer Toolbox"
Click Install
Usage
Method
Action
Command Palette
Ctrl+Shift+P → Developer Toolbox: Open
Keyboard Shortcut
Ctrl+Shift+T (Cmd+Shift+T on Mac)
Activity Bar
Click the 🔧 icon in the sidebar
Direct Tool Access
Ctrl+Shift+P → Developer Toolbox: Open Specific Tool...
Context Menu
Right-click a .json file → Open JSON Formatter
🎨 Themes
The extension automatically syncs with your VS Code color theme:
Light mode — When VS Code uses a light theme, the toolbox switches to the Toolbox Light theme.
Dark mode — When VS Code uses a dark theme, the toolbox switches to the Toolbox Dark theme.
No manual theme switching required — it just follows your editor.
⚡ Key Highlights
🔒 100% Privacy — All data stays in your browser. Zero telemetry. Zero tracking.
⚡ Lightning Fast — No network requests. Everything processes client-side.
🌐 Works Offline — All tools function without an internet connection.
🎯 VS Code Native — Runs in a webview panel, fully integrated with the IDE.
🎨 Auto Theme Sync — Automatically matches your VS Code light/dark theme.
📋 Clipboard & File Integration — Copy results to clipboard and save files via VS Code dialogs.
🖥️ Active Editor Integration — Read from and write to your active editor.
🔧 Requirements
VS Code v1.51.0 or higher
No additional dependencies required — everything is bundled within the extension.
📋 Commands
Command
Description
Developer Toolbox: Open
Open the full toolbox dashboard
Developer Toolbox: Open Specific Tool...
Quick-pick a specific tool to open
Developer Toolbox: Open JSON Formatter
Open JSON Formatter directly
Developer Toolbox: Open API Tester
Open API Tester directly
Developer Toolbox: Open Regex Generator
Open Regex Generator directly
Developer Toolbox: Open Color Palette
Open Color Palette directly
Developer Toolbox: Open JWT Decoder
Open JWT Decoder directly
Developer Toolbox: Open Password Generator
Open Password Generator directly
📦 Extension Settings
This extension does not require any VS Code settings configuration. All preferences (themes, tool settings) are managed within the extension's own Settings page.
🐛 Known Issues
See the GitHub Issues page for current known issues and feature requests.
