One tool. One file. Open and use.
A curated suite of developer tools, gamified learning quests, browser-synthesized musical instruments, interactive quizzes, ATS resume themes, and portfolio templates — each crafted as a single, self-contained HTML file.
Zero build steps. Zero runtime dependencies. Zero trackers. Completely offline-first.
- Single-File Architecture — Every tool, quest, instrument, and quiz lives in its own standalone
.htmlfile. Double-click to open in any modern browser. - Offline-First by Design — Operates entirely in client-side memory using modern Web Platform APIs (Canvas, Web Audio, LocalStorage, SVG).
- Zero Dependencies — No bloated node runtime required for end-users. Fast, lightweight, and accessible anywhere.
- Dark & Light Modes — Built-in Linear/Raycast-inspired design systems with responsive layouts.
- 🛠️ Developer Tools
- 🎮 Interactive Quests
- 🎹 Web Audio Instruments
- 🧠 Interactive Quizzes
- 📄 Resume & Portfolio Themes
- 🚀 Getting Started
- 📂 Project Structure
- ⚙️ Development & Scripts
- 📜 License
Standalone browser utilities for design, SEO, formatting, and day-to-day software development.
| Tool | Category | Difficulty | Highlights & Features |
|---|---|---|---|
| A11y Contrast Grid Generator | Accessibility | Medium | Full color palette accessibility matrix comparing all background and foreground combinations against WCAG 2.1 guidelines (AA/AAA). Supports Tailwind, CSS vars, SCSS, JSON export. |
| Advanced Robots.txt Generator | Web & SEO | Easy | Visual rules builder for multi-user-agent crawler configurations, Allow/Disallow directives, crawl-delay, host rules, and XML sitemaps with live code preview. |
| Animation Cubic-Bezier Editor | CSS | Easy | Interactive visual curve editor with draggable control points, standard presets (ease, ease-in-out, etc.), and live animation comparison box. |
| Bash Sandbox | Utilities | Medium | Client-side simulated Linux/Bash terminal with virtual filesystem, persistent history, tab completion, and core command emulation (ls, cd, mkdir, cat, echo, pwd). |
| Commit Message & Range Cleaner | Utilities | Medium | Visual interactive rebase planner (git-rebase-todo generator). Lints commit messages against Conventional Commits specs with instant autofix suggestions. |
| Commit Message Generator | Utilities | Easy | Visual Conventional Commits builder with live preview, syntax highlighting, type selection, breaking change indicators, and instant copy commands. |
| CSS Animation Builder | CSS | Medium | Visually construct custom CSS animations with presets, interactive property controls, live preview canvas, and instant CSS keyframe export. |
| CSS Easing Visualizer | CSS | Medium | Side-by-side easing curve comparison on a synchronized SVG graph and real-time multi-ball animation race track powered by the Web Animations API. |
| CSS Unit Converter | CSS | Medium | Real-time bi-directional converter across px, rem, em, vw, vh, %, and pt with configurable base font size and viewport context. |
| Curl Builder | JSON & API | Medium | Construct REST API cURL commands with URL query params, authentication headers (Bearer / Basic), form data, JSON payloads, and multipart file uploads. |
| Favicon Generator | Utilities | Easy | Client-side favicon generation supporting 7 dimensions (16px to 512px) with auto-crop canvas preview, HTML meta snippet generation, and 1-click ZIP export. |
| Git Ignore Generator | Utilities | Easy | Generate boilerplate .gitignore files tailored to over 20 development stacks with searchable tags, live preview, and 1-click export. |
| GitHub Profile README Generator | Utilities | Medium | Live Markdown builder with bio templates, tech stack skill badges, social link icons, and live GitHub stats fetching. |
| JSON CSV Converter | JSON & API | Easy | Bidirectional conversion between JSON and CSV with customizable delimiters (comma, tab, semicolon, pipe), validation, and live data statistics. |
| Markdown Previewer | Text & Content | Medium | Real-time GitHub Flavored Markdown editor with highlight.js syntax highlighting, split/fullscreen view modes, word count, and persistent local storage auto-save. |
| Sitemap Generator | Web & SEO | Medium | Generate search engine-compliant sitemap.xml files with single/bulk URL import, changefreq, priority, and lastmod metadata. |
| YAML / JSON Converter | JSON & API | Easy | Bidirectional converter between YAML and JSON with real-time schema validation, custom indentation settings, and instant swap controls. |
Gamified, story-driven browser games designed to teach core engineering principles through live-evaluated code execution and simulations.
| Quest | Category | Difficulty | Concept & Mechanics |
|---|---|---|---|
| Abyssal Current | CSS Fundamentals | Hard | Deep-sea bioluminescence simulator teaching CSS @keyframes, timeline buoys, animation timing, and procedural SVG marine creatures under a draining oxygen gauge. |
| Accessibility Audit Quest | General Dev | Medium | Hands-on accessibility auditor simulator. Diagnose and resolve ARIA errors, contrast failures, missing alternative text, and heading hierarchy bugs. |
| Branch Navigator | Git & Version Control | Easy | Visual commit graph time-traveler. Execute git log, git branch, and git checkout in a terminal simulator to navigate git branches. |
| Closure Escape Room | JS Fundamentals | Medium | 10 progressive puzzle rooms unlocked by solving closures, lexical scope chains, IIFE data encapsulation, and private variables. |
| CSS Grid Quest | CSS Fundamentals | Easy | 6 interactive visual grid challenges covering grid tracks, fr units, grid-template-areas, gap, and responsive auto-placement. |
| Flexbox Frenzy: The Alignment Heist | CSS Fundamentals | Hard | Crack bank vaults by writing real Flexbox container CSS. Elements are measured live using getBoundingClientRect() and scored on minimal property count (CSS Golf). |
| Memory Heap Detective | JS Fundamentals | Hard | Interactive V8 heap snapshot visualizer. Trace GC roots, detached DOM subtrees, dangling event listeners, and trigger manual mark-and-sweep GC cycles. |
| Regex CSS Golf | CSS Fundamentals | Medium | Code golf puzzle engine: write the shortest valid CSS selector matching only target DOM elements using combinators, pseudo-classes, and attribute filters. |
| Strata: The Lost Commits | Git & Version Control | Medium | Archaeological commit history dig. Map git rebase -i actions (Pick, Reword, Squash, Fixup, Drop) to excavation tools to restore archaeological logs. |
| The Merge Conflict from Hell | Git & Version Control | Medium | Terminal horror escape room. Resolve multi-hunk merge conflicts, fix detached HEAD states, and force push under a draining sanity meter with synthetic Web Audio SFX. |
| Microtask Heist | JS Fundamentals | Medium | Heist-themed JavaScript quest to orchestrate Promise chains and queueMicrotask calls to produce an exact execution order. |
| SQL Query Challenge | General Dev | Easy | Interactive SQLite WASM query challenges covering filtering, sorting, aggregations, and multi-table joins. |
| Terminal Speed Run | General Dev | Medium | Fast-paced CLI speed run challenge where you execute essential terminal commands against the clock. |
| The Branch That Wouldn't Die | Git & Version Control | Hard | Git survival horror arcade game. Merge, rebase, or delete rotting branches before chaotic decay consumes main. |
| XSS Defender | JS Fundamentals | Medium | Security simulator game. Defend applications against Reflected XSS, DOM-based injections, HTML entity bypasses, and configure strict Content Security Policies (CSP). |
Playable musical instruments and synthesizers built entirely using the native browser Web Audio API and HTML5 Canvas. No audio samples or plugins required.
| Instrument | Focus | Key Features |
|---|---|---|
| Euclidean Polyrhythm Sequencer | Rhythm & Percussion | Concentric glowing ring interface utilizing Euclid's algorithm to generate organic polyrhythms with a lookahead scheduler and real-time canvas visualizer. |
| Glassmorphic Wavetable Synthesizer | Melody & Synthesis | Dual-oscillator wavetable synthesizer with custom periodic waveform drawing on frosted glass, dynamic ADSR envelope visualizer, and a multi-stage ambient reverb engine. |
| Interactive Fretboard & Chord Explorer | Chords & Harmony | Skeuomorphic dark-wood guitar fretboard with chord calculation engine and physical-modeling acoustic string synthesis triggered by cursor swipe strumming. |
| Interactive Theory Sandbox | Notation & Theory | Bi-directional bridge between the standard grand staff notation and visual piano keys with dynamic chord recognition and interval analysis. |
| Neon Launchpad Matrix | Melody & Performance | 8x8 neon neumorphic pad matrix mapped to a harmonious pentatonic scale with tactile visual ripples and zero-latency audio synthesis. |
| NEQ-808 Pro Synthesizer | Rhythm & Percussion | Neumorphic 808-style drum machine and 16-step grid sequencer with classic synthesized analog drum voices and dynamic audio controls. |
Rapid-fire, browser-based quiz challenges to test your core engineering knowledge with instant feedback and scorecards.
- Closure Chronicles — 10-level interactive code challenge on JavaScript lexical scope, hoisting, closures, and modules.
- Command Line Craze — 10-level retro CRT terminal quiz covering essential Bash and shell commands.
- CSS Grid Quest — Interactive quiz testing CSS grid column definitions, fractional units, and layout properties.
- Dev Escape Room — Multi-room challenge testing HTML, CSS, JavaScript, Git, APIs, and JSON troubleshooting.
- Git Commands Guru — Retro terminal quiz covering branching, staging, stashing, and remote syncing.
- HTTP Status Code Quiz — Rapid scenario-based quiz testing 1xx, 2xx, 3xx, 4xx, and 5xx status codes.
- JS Type Coercion Trivia — Test your understanding of JavaScript's tricky implicit/explicit type coercion behaviors,
NaN, and equality rules. - The Branch That Wouldn't Die — 8-level branching quiz on merge conflicts, fast-forwarding, branch renaming, and rebasing.
Generate production-ready personal websites and ATS-compliant resumes from a single data/profile.json file.
- Classic — Single-column, minimalist, ATS-compliant, zero JavaScript, A4 print-ready layout using clean system typography.
- Cosmic — Two-column modern theme with a dark starry aesthetic, luminous highlights, and monospace typography.
- Cyber — High-contrast, retro-futuristic dark mode resume with neon accents.
- Herbarium — Warm linen paper background with editorial serif type pairing and dusty plum accent tones.
- Monotone — Clean, distraction-free monochrome styling with optimal whitespace balance.
- Opus 5 — Two-column card design with muted teal accents, brass honors, and print optimization.
- Desert — An elegant, sandy theme with a golden-beige gradient and bronze accents.
- Developer — Dark developer-focused portfolio with interactive project cards, skills matrices, timeline displays, and testimonials.
- Fable — Dark developer-focused portfolio created by Fable.
- Pastel — A cute and minimalist theme with an animated gradient background and soft color scheme.
- Retro — A CRT-inspired desktop interface with a retro operating system aesthetic.
- Space — A dark, futuristic theme with an animated starfield background and monospace typography.
You can directly open any .html file inside the repository in your favorite browser:
- Double-click
index.htmlto launch the full portal. - Or open any tool directly from the
tools/,quests/,instruments/, orquizzes/directories.
To customize or build templates locally:
# Clone the repository
git clone https://github.com/Aditya8369/OpenPlayGround.git
cd OpenPlayGround
# Install dev dependencies (Handlebars, Prettier)
npm install
# Build index.html from data and templates
npm run build
# Generate resume and portfolio HTML files from data/profile.json
npm run themes
# Validate all assets, JSON schemas, and files
npm run validate🌐 Live Demo: Explore the deployed site at reliable-lokum-c2dc61.netlify.app.
OpenPlayGround/
├── data/ # JSON registries & profile configurations
│ ├── instruments.json # Audio instruments metadata
│ ├── profile.json # Resume & portfolio source data
│ ├── quests.json # Interactive quests registry
│ ├── quizzes.json # Quizzes metadata
│ ├── themes.json # Theme definitions
│ └── tools.json # Developer tools registry
├── functions/ # Serverless proxy endpoints (Cloudflare/Vercel)
│ └── api/
│ └── fetch.js # CORS-safe API proxy
├── instruments/ # Web Audio standalone instrument HTML files
├── portfolio/ # Portfolio templates (.hbs & compiled .html)
├── quests/ # Interactive quest game HTML files
├── quizzes/ # Interactive quiz game HTML files
├── resume/ # Resume templates (.hbs & compiled .html)
├── scripts/ # Automation and build scripts
│ ├── build.js # Core index.html generator
│ ├── generate_index.js # Alternative index generator
│ ├── index-template.txt # Main portal template
│ ├── sort_norm.js # JSON schema sorter and normalizer
│ ├── sync_readme.js # Tools table synchronizer
│ ├── theme-gen.js # Handlebars theme compiler
│ └── validate.js # Asset & structure validator
├── tools/ # Single-file developer tools
├── index.html # Main portal entrypoint
└── package.json # Project scripts & metadata
| Script | Command | Purpose |
|---|---|---|
| Build Portal | npm run build |
Compiles data/*.json and scripts/index-template.txt into index.html. |
| Compile Themes | npm run themes |
Renders Handlebars templates in resume/ & portfolio/ using data/profile.json. |
| Validate | npm run validate |
Audits all JSON metadata entries against real files on disk. |
| Format | npm run format |
Runs Prettier on standalone HTML utilities. |
| Sort JSON | npm run sort |
Normalizes and alphabetically sorts all registry data files. |
| Sync Readme | npm run sync-readme |
Synchronizes the tools table in README.md from data/tools.json. |
This project is licensed under the Unlicense (Public Domain Dedication) — free to use, modify, distribute, and embed for any purpose without restrictions.