Engineering Playground

Interactive Development Tools

Production-quality tools showcasing full-stack engineering, UX design, and modern web development practices.

Tools🛠️

Categories📁

Code Tools💻

Ready to Use✅

100%

Featured Projects

Featured

Code Sandbox

Full-featured in-browser IDE with Monaco editor, React support, live preview, npm packages, and Python runtime. Build complete projects.

Test HTTP requests with full auth support, headers, and body configuration. Auto-generates code examples in fetch, axios, Python requests, and more.

More Tools

36 available

JSON to TypeScript/Zod

Convert JSON to TypeScript interfaces and Zod schemas instantly. Supports nested objects, arrays, and custom naming conventions.

TypeScript

Zod

Code Generation

CSS ⇄ Tailwind Converter

Bidirectional converter between CSS and Tailwind classes. Handles flexbox, spacing, typography, and more.

View, edit, and manage localStorage and sessionStorage. Import/export data, add/remove items with a clean interface.

Test WebSocket connections, send messages, and monitor real-time communication with event logging and connection status.

WebSocket

Real-time

Testing

Rate Limiter Simulator

Visualize Token Bucket, Leaky Bucket, Fixed Window, and Sliding Window algorithms with interactive request simulation.

Search npm packages, view dependencies, download stats, and package metadata from the npm registry.

Test and debug Cross-Origin Resource Sharing configurations. Understand CORS errors and get recommendations.

Compress and convert images to WebP, JPEG, or PNG with quality control. See instant size savings and preview.

Images

Optimization

WebP

Sorting Algorithm Visualizer

Watch Bubble, Selection, Insertion, Quick, and Merge Sort algorithms animate in real-time with adjustable speed.

Generate all favicon sizes from a single image with HTML code snippet. Download as ZIP with all formats.

Optimize SVG files by removing metadata, converting to React components, and reducing file size.

SVG

Optimization

React

Data Structure Visualizer

Visualize Binary Search Trees with interactive insertion and search operations. Watch algorithms in action.

Interactive GraphQL query editor with schema introspection, variables, custom headers, and response viewer.

Create mock API endpoints with custom responses, status codes, and delays. Generate MSW, Express, or JSON Server code.

Test webhooks with custom payloads, verify signatures, and debug webhook integrations with request history.

Visualize and analyze JavaScript bundle composition with size breakdown, warnings, and optimization tips.

Beautiful documentation viewer for OpenAPI/Swagger specifications with endpoint search and schema explorer.

Decode, verify, and generate JSON Web Tokens with multiple algorithms, expiration checking, and code examples.

Fixes invalid JSON with deterministic repair, then optional AI assist to produce safe, typed objects.

JSON

Validation

Circuit Breaker Sandbox

Visual circuit breaker with Closed/Open/Half-Open states protecting a flaky endpoint.

Resilience

State Machine

Patterns

Retry & Backoff Visualizer

Interactive timeline showing request attempts under different backoff strategies with jitter simulation.

Interactive calculator for remittance costs with FX spread and fee rules. Demonstrates precise money math and deterministic outputs.

Finance

Math

Currency

Batch vs Parallel Bench

Benchmark sequential vs parallel vs pooled fetching with controlled latency and failure simulation.

Decode and validate JWTs safely in the browser with HS256/RS256 signature verification.

Test regex patterns with live highlighting, match extraction, and plain English explanations.

Format and beautify SQL queries with dialect support and syntax validation.

Compare text with side-by-side visualization, change navigation, and statistics.

Live markdown preview with GFM support, TOC generation, and HTML export.

Markdown

Preview

GFM

Cron Expression Builder

Visual cron builder with human-readable descriptions, next run times, and validation.

Scheduling

DevOps

Time

Environment Variable Parser

Parse .env files with secret detection, duplicate checking, and export options.

Generate cryptographic hashes (SHA family) for text and files with HMAC support.

Encode and decode text and files using Base64, URL encoding, and Hex with data URI support.

Convert between Unix timestamps, ISO 8601, and human-readable formats with timezone support.

Convert color formats, check WCAG contrast ratios, and generate color palettes.

Generate and validate UUIDs (v1, v4) with bulk generation, decoding, and format options.

Generation

Validation

Case Converter

Convert text between camelCase, snake_case, kebab-case, and other programming conventions.

Text

Formatting

Utilities

Tech Stack

Built with Next.js 15, TypeScript, Tailwind CSS, and modern tooling

Next.js 15

TypeScript

React 19

Tailwind CSS v4

shadcn/ui

Zustand

XState

Zod

Monaco Editor

Recharts

Pyodide