OpenPlayGround
17 tools · 1 file each · 0 dependencies

One tool. One file. Open and use.

A growing collection of developer tools, resume themes, and portfolio templates — each a single, self-contained HTML file. No build step. No dependencies. No frameworks.

~/tools

OpenPlayGround

Generators, validators, and utilities — every one a single HTML file you can open straight from disk. Search by name, description, or tag.

17 tools

A11y Contrast Grid Generator

A11y Contrast Grid Generator

Accessibility

Generate a comprehensive accessibility matrix comparing all background and foreground color combinations against WCAG 2.1 contrast guidelines.

tools/a11y-contrast-grid.html
MediumLive
Advanced Robots.txt Generator

Advanced Robots.txt Generator

Web & SEO

Visually create and customize robots.txt files with support for multiple user-agents, crawl rules, sitemaps, and instant code generation.

tools/advanced-robots-txt-generator.html
EasyLive
Animation Cubic-Bezier Editor

Animation Cubic-Bezier Editor

CSS Tools

Visually create and customize CSS cubic-bezier() easing functions with a live animation preview.

tools/animation-cubic-bezier-editor.html
EasyLive
Bash Sandbox

Bash Sandbox

Developer Utilities

A simulated bash terminal to play with and learn common commands, entirely in your browser.

tools/bash-commands-sandbox.html
MediumLive
Commit Message & Range Cleaner

Commit Message & Range Cleaner

Developer Utilities

Paste a git log excerpt and generate interactive-rebase plans + normalized Conventional Commits suggestions.

tools/git-commit-range-cleaner.html
MediumLive
Commit Message Generator

Commit Message Generator

Developer Utilities

Build Conventional Commits-formatted commit messages with live preview and validation.

tools/commit-message-generator.html
EasyLive
CSS Animation Builder

CSS Animation Builder

CSS Tools

Visually create CSS animations and export keyframes without manually writing CSS.

tools/css-animation-builder.html
MediumLive
CSS Easing Visualizer

CSS Easing Visualizer

CSS Tools

Compare multiple CSS easing curves side-by-side on a shared graph and in an animated race preview.

tools/css-easing-visualizer.html
MediumLive
CSS Unit Converter

CSS Unit Converter

CSS Tools

Instantly convert between px, rem, em, vw, vh, and percentages.

tools/css-unit-converter.html
MediumLive
Curl Builder

Curl Builder

JSON & API

Construct ready-to-run cURL commands for REST APIs with headers, auth, body types, query params, and file uploads.

tools/curl-builder.html
MediumLive
Favicon Generator

Favicon Generator

Developer Utilities

Generate a complete favicon pack and integration tags from any image, offline.

tools/favicon-generator.html
EasyLive
Git Ignore Generator

Git Ignore Generator

Developer Utilities

Generate boilerplate .gitignore files for various technologies instantly, offline.

tools/git-ignore-generator.html
EasyLive
GitHub Profile README Generator

GitHub Profile README Generator

Developer Utilities

Generate a professional GitHub profile README with live stats and an editable preview.

tools/github-profile-readme-generator.html
MediumLive
JSON CSV Converter

JSON CSV Converter

JSON & API

Convert between JSON and CSV formats with bidirectional conversion.

tools/json-csv-converter.html
EasyLive
Markdown Previewer

Markdown Previewer

Text & Content

Write and preview Markdown in real time, offline.

tools/markdown-previewer.html
MediumLive
Sitemap Generator

Sitemap Generator

Web & SEO

A standalone Sitemap Generator that helps users create valid XML sitemaps for websites entirely offline.

tools/sitemap-generator.html
MediumLive
YAML / JSON Converter

YAML / JSON Converter

JSON & API

Convert between YAML and JSON in either direction, with validation and pretty-printed output.

tools/yaml-json-converter.html
EasyLive
~/resume

One File Resume

ATS-friendly resume themes generated from a single JSON file. Zero JavaScript, A4 print-ready.

Classic theme screenshot

Classic

resume/classic.html

Clean single-column layout. ATS-compliant, zero JavaScript, A4 print-ready. System fonts only.

Preview
Cosmic theme screenshot

Cosmic

resume/cosmic.html

Two-column layout, Immersive starry backdrop, Glowing elements, Monospace typography.

Preview
Cyber theme screenshot

Cyber

resume/cyber.html

Two-column layout, Retro-futuristic vibe, Vivid color scheme, Subtle animations.

Preview
Herbarium theme screenshot

Herbarium

resume/herbarium.html

Two-column layout, Warm linen paper background, Editorial type pairing and dusty plum accents.

Preview
Monotone theme screenshot

Monotone

resume/monotone.html

Two-column layout, Black, grey, and white color scheme, Minimalist and clean.

Preview
Opus 5 theme screenshot

Opus 5

resume/resume-opus-5.html

Two-column layout, Rounded card design, Muted teal accent with brass honours, A4 print-ready.

Preview
All resume themes are generated from profile.json — edit your data once, get every theme.
~/portfolio

One File Portfolio

Developer portfolio themes generated from a single JSON file. Dark/light mode, responsive.

Desert theme screenshot

Desert

portfolio/desert.html

An elegant, sandy theme with a golden-beige gradient and bronze accents.

Preview
Developer theme screenshot

Developer

portfolio/developer.html

Dark developer-focused portfolio with project cards, skills grid, experience timeline, and testimonials.

Preview
Fable theme screenshot

Fable

portfolio/fable.html

Dark developer-focused portfolio created by Fable.

Preview
Pastel theme screenshot

Pastel

portfolio/pastel.html

A cute and minimalist theme with an animated gradient background and soft color scheme.

Preview
Retro theme screenshot

Retro

portfolio/retro.html

A CRT-inspired desktop interface with a retro operating system aesthetic.

Preview
Space theme screenshot

Space

portfolio/space.html

A dark, futuristic theme with an animated starfield background and monospace typography.

Preview
All portfolio themes are generated from profile.json — edit your data once, get every theme.
~/quests

One File Quests

Interactive, gamified lessons for learning Git, CSS, and JavaScript by doing — each one a single HTML file with progress saved locally in your browser.

15 quests

Abyssal Current

Abyssal Current

CSS Fundamentals

A bioluminescent deep-sea simulator that teaches CSS @keyframes, animation timing, and easing functions through environmental survival.

quests/abyssal-current.html
Accessibility Audit Quest

Accessibility Audit Quest

General Dev Quests

Find and fix accessibility (a11y) issues in broken HTML snippets.

quests/accessibility-audit-quest.html
Branch Navigator

Branch Navigator

Git & Version Control

A lightweight Git quest (Easy) to learn checkout basics by navigating a commit graph with `git log`, `git branch`, and `git checkout`.

quests/branch-navigator.html
Closure Escape Room

Closure Escape Room

JavaScript Fundamentals

Escape puzzle rooms by solving JavaScript closure, lexical scope, callback, and private state challenges.

quests/closure-escape-room.html
CSS Grid Quest

CSS Grid Quest

CSS Fundamentals

Master CSS Grid through interactive layout challenges.

quests/css-grid-quest.html
Flexbox Frenzy: The Alignment Heist

Flexbox Frenzy: The Alignment Heist

CSS Fundamentals

A heist caper where every vault lock is a Flexbox puzzle — write real CSS to slide gold bars onto their targets, judged live by the browser's own layout engine, scored on how few properties you use.

quests/flexbox-frenzy.html
Memory Heap Detective

Memory Heap Detective

JavaScript Fundamentals

Interactive memory profiling and garbage collection diagnostic simulator for learning JavaScript memory management and leak prevention.

quests/memory-heap-detective.html
Microtask Heist

Microtask Heist

JavaScript Fundamentals

A heist-themed JavaScript quest where you orchestrate Promise chains and queueMicrotask calls to produce an exact execution order.

quests/microtask-heist.html
Regex CSS Golf

Regex CSS Golf

CSS Fundamentals

Master CSS selectors through interactive golf-style challenges by writing the shortest valid selector to match target elements.

quests/regex-css-golf.html
SQL Query Challenge

SQL Query Challenge

General Dev Quests

Learn and practice SQL queries in the browser with an interactive SQLite WASM database across progressive levels.

quests/sql-query-challenge.html
Strata: The Lost Commits

Strata: The Lost Commits

Git & Version Control

A field excavation of version history; an interactive Git rebase simulator that turns commit history cleanup into an archaeological dig.

quests/the-lost-commits.html
Terminal Speed Run

Terminal Speed Run

General Dev Quests

A fast-paced CLI speed run challenge where you execute common terminal commands against the clock.

quests/terminal-speed-run.html
The Branch That Wouldn't Die

The Branch That Wouldn't Die

Git & Version Control

A Git survival horror arcade game where stale branches spawn, rot, and threaten to consume main—merge, rebase, or delete them before decay reaches 100%.

quests/branch-that-wouldnt-die.html
The Merge Conflict from Hell

The Merge Conflict from Hell

Git & Version Control

A horror-themed terminal escape room that teaches real Git commands — staging, detached HEAD, conflict resolution, and force pushing — under a draining sanity meter.

quests/merge-conflict-from-hell.html
XSS Defender

XSS Defender

JavaScript Fundamentals

Interactive web security quest game teaching Cross-Site Scripting (XSS) prevention, HTML sanitization, and Content Security Policy (CSP) headers.

quests/xss-defender.html
~/design-system

One File Design System

Premium UI showcases — dashboards, landing pages, and components built with CSS frameworks and JS libraries via CDN. Single HTML file, maximum creativity.

0 designs

~/instruments

One File Instruments

Real, playable musical tools — synthesizers, drum machines, chord libraries, and ear trainers, each a single HTML file with genuine audio output via the Web Audio API.

6 instruments

Euclidean Polyrhythm Sequencer

Euclidean Polyrhythm Sequencer

Rhythm & Percussion

A circular rhythm studio using the Euclidean algorithm across concentric glowing rings to create complex polyrhythms.

instruments/euclidean-polyrhythm-sequencer.html
HardPlay
Glassmorphic Wavetable Synthesizer

Glassmorphic Wavetable Synthesizer

Melody & Synthesis

A dual-oscillator browser synthesizer featuring custom waveform drawing on frosted glass, dynamic ADSR envelopes, and lush reverb.

instruments/glassmorphic-wavetable-synth.html
HardPlay
Interactive Fretboard & Chord Explorer

Interactive Fretboard & Chord Explorer

Chords & Harmony

A skeuomorphic guitar neck to explore chord voicings and fingerings, featuring physical-modeling acoustic strumming via mouse swipes.

instruments/interactive-fretboard-chord-explorer.html
MediumPlay
Interactive Theory Sandbox (Staff ↔ Piano)

Interactive Theory Sandbox (Staff ↔ Piano)

Notation & Theory

A real-time bridge between standard musical notation and a visual piano keyboard for interactive theory and harmony learning.

instruments/interactive-theory-sandbox.html
HardPlay
Neon Launchpad Matrix

Neon Launchpad Matrix

Melody & Synthesis

An 8x8 neon neumorphic performance grid synthesizer mapped to a Pentatonic scale with real-time audio and dynamic ripple animations.

instruments/neon-launchpad-matrix.html
MediumPlay
NEQ-808 Pro Synthesizer

NEQ-808 Pro Synthesizer

Rhythm & Percussion

A sleek neumorphic 808-style drum machine and step sequencer powered by the Web Audio API with real-time controls.

instruments/neq-808-pro.html
MediumPlay
~/quizzes

One File Quizzes

Quick multiple-choice challenges to test your Git, CSS, and JavaScript knowledge — each one a single HTML file with progress saved locally.

8 quizzes

Closure Chronicles

Closure Chronicles

JavaScript Fundamentals

Master JavaScript closures by solving interactive puzzles across 10 levels covering scope, lexical bindings, private variables, and the module pattern.

quizzes/closure-chronicles.html
Command Line Craze

Command Line Craze

General Dev Quests

A 10-level quiz with a retro terminal theme to test your command-line knowledge.

quizzes/command-line-craze.html
CSS Grid Quest

CSS Grid Quest

CSS Fundamentals

Learn CSS Grid through 6 interactive challenges.

quizzes/css-grid-quest.html
Dev Escape Room

Dev Escape Room

JavaScript Fundamentals

Escape themed programming rooms by solving interactive puzzles covering HTML, CSS, JavaScript, Git, APIs, and JSON while unlocking new challenges.

quizzes/dev-escape-room.html
Git Commands Guru

Git Commands Guru

Git & Version Control

A 10-level quiz with a retro terminal theme to test your Git command knowledge.

quizzes/git-commands-guru.html
HTTP Status Code Quiz

HTTP Status Code Quiz

General Dev Quests

Guess the right status code for a scenario in this interactive quiz.

quizzes/http-status-code-quiz.html
JS Type Coercion Trivia

JS Type Coercion Trivia

JavaScript Fundamentals

Test your understanding of JavaScript type coercion through interactive multiple-choice challenges.

quizzes/js-type-coercion-trivia.html
The Branch That Wouldn't Die

The Branch That Wouldn't Die

Git & Version Control

Master Git branching through 8 interactive challenges covering create, list, switch, delete, merge, fast-forward, conflicts, and rebase.

quizzes/branch-quest.html