DevTools Blocks
Copy-paste React sections for developer-facing consoles: API explorers and response examples, log and diff viewers, CI/CD and queue monitors, feature flag and rate limit panels, and bundle and coverage reports. Each block ships as plain, editable component code, not a runtime dependency.
api-endpoints-sample-call
API Endpoints With Sample Call
Reference list of API endpoints paired with a live sample request and response panel.
cicd-pipeline-status
CI/CD Pipeline Status
Recent CI/CD pipeline runs with per-stage status chips and overall run badges.
code-diff-viewer
Code Diff Viewer
Unified code diff panel with a file header change summary and colored addition/deletion lines.
keyboard-shortcuts-reference
Keyboard Shortcuts Reference
Grouped keyboard shortcut reference with keycap-styled key combos.
performance-waterfall
Performance Waterfall
Network request waterfall chart with cascading timing bars colored by duration.
service-health-board
Service Health Board
Infrastructure status board with a live summary strip and per-service uptime, latency, and health.
queue-monitor
Queue Monitor
Background job queue monitor with processed/pending/failed counts and a per-queue capacity bar.
package-dependency-health
Package Dependency Health
Dependency version table comparing installed vs. latest, flagging updates and security fixes.
environment-config-viewer
Environment Config Viewer
Tabbed Production/Staging/Development variable viewer with a reveal toggle for masked secrets.
rate-limit-dashboard
Rate Limit Dashboard
API rate-limit monitor with a threshold-colored usage bar and reset countdown per endpoint.
audit-activity-log
Audit Activity Log
Filterable audit trail of create, update, delete, and access events with actor avatars and timestamps.
cron-job-scheduler
Cron Job Scheduler
Table of scheduled cron jobs with expressions, last/next run times, duration, and status.
database-migration-timeline
Database Migration Timeline
Vertical timeline of database migrations with status dots, filenames, descriptions, and timestamps.
api-key-manager
API Key Manager
API key management panel with masked values, a real reveal toggle, copy-to-clipboard, and scope badges.
application-log-viewer
Application Log Viewer
Terminal-style structured log panel with level tags, timestamps, source labels, and real level filtering.
feature-flags-manager
Feature Flags Manager
Toggle feature flags with per-flag rollout bars and environment badges.
error-monitoring-feed
Error Monitoring Feed
Application error feed with a severity summary strip and per-error occurrence counts.
webhook-event-stream
Webhook Event Stream
Expandable webhook delivery log with status, response time, and raw JSON payloads.
api-endpoint-explorer
API Endpoint Explorer
Grouped REST API reference with expandable parameter tables per endpoint.
database-schema-explorer
Database Schema Explorer
Collapsible database table browser with column types, keys, and nullability.
bundle-size-analyzer
Bundle Size Analyzer
Chunk-by-chunk production bundle breakdown with raw and gzip size bars, color-coded by chunk type.
code-coverage-report
Code Coverage Report
Expandable file-tree test coverage dashboard with per-file statement, branch, function, and line percentages.
api-usage-analytics
API Usage Analytics
Four-up API stats row with trend indicators plus a per-endpoint usage table.
load-test-dashboard
Load Test Dashboard
Start/stop load-test control panel with an animated progress bar and static throughput, latency, and error metrics.
network-request-monitor
Network Request Monitor
Filterable HTTP request-log table with a Recording toggle, method filters, and a resource-type filter.
json-formatter-tool
JSON Formatter Tool
Interactive JSON editor with live validation, one-click format and minify, and copy-to-clipboard.
bundle-chunk-analyzer
Bundle Chunk Analyzer
Bundle breakdown listing each chunk's size, gzip size, module count, and change since the last build.
api-response-examples
API Response Examples
API documentation cards showing a status badge, request headers, and a copyable JSON response body.
multi-language-code-tabs
Multi-Language Code Tabs
A dark code panel with language tabs that swap between JavaScript, Python, cURL, and Go samples for one endpoint.