Staaarter

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.