One File Tools

A growing collection of useful developer tools, each built as a single, self-contained HTML file.

No build step. No frameworks. No npm. Just open the file in your browser and it works.

Why?

Most developer tools today come with baggage:

• npm install with 200+ packages.
• Framework lock-in.
• Complex build pipelines.
• Servers, databases, deployment configs.

This repo takes the opposite approach.

One tool. One file. Open and use.

Every tool in this collection is a standalone .html file containing all the HTML, CSS, and JavaScript it needs. You can download a single file, open it in any browser, and start using it immediately. CDN links are used for lightweight libraries and fonts to keep files slim.

Available Tools

#	Tool	Category	Description	Live
1	.env Parser & Validator	Developer Utilities	Parse, validate, mask, search, and export .env files entirely in the browser.	Try it
2	.env Parser & Validator (Strict Mode)	Developer Utilities	Parse .env files under strict rules, with detailed line-by-line validation, quick-fix suggestions, and metrics.	Try it
3	A11y Contrast Grid Generator	Accessibility	Generate a comprehensive accessibility matrix comparing all background and foreground color combinations against WCAG 2.1 contrast guidelines.	Try it
4	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.	Try it
5	Alt Text Helper	Accessibility	Draft image alt text and get instant feedback on whether it's clear, concise, and accessible.	Try it
6	Animation Cubic-Bezier Editor	CSS Tools	Visually create and customize CSS cubic-bezier() easing functions with a live animation preview.	Try it
7	API Response Mocker	JSON & API	Define custom JSON responses and simulate API endpoints directly in the browser.	Try it
8	ARIA Role Reference	Accessibility	A fast, offline reference for common WAI-ARIA roles with attributes, semantic alternatives, and examples.	Try it
9	ASCII / UTF-8 Text to Binary Converter	Text & Content	Encode plain text characters into binary byte structures, or translate stream bits back into readable text.	Try it
10	Aspect Ratio Calculator	Image Tools	Calculate and simplify aspect ratios instantly. Supports common presets and outputs decimal ratio and CSS padding-bottom values.	Try it
11	Base64 Encoder / Decoder	Developer Utilities	A simple, offline utility to encode raw text into Base64 format and decode Base64 strings back to text.	Try it
12	Base64 Image Converter	Image Tools	Convert images to Base64 data URIs, or decode Base64 strings back into viewable images.	Try it
13	Bash Sandbox	Developer Utilities	A simulated bash terminal to play with and learn common commands, entirely in your browser.	Try it
14	Binary Decimal Converter	Developer Utilities	Convert between binary, decimal, hexadecimal, and octal.	Try it
15	Box Shadow Generator	CSS Tools	Design CSS box shadows visually with live preview, presets, and copy-ready output.	Try it
16	Canonical URL Checker	Web & SEO	Analyze HTML to verify canonical URL implementation and identify common SEO issues.	Try it
17	Canonical URL Checker	Web & SEO	Analyze HTML to verify canonical URL implementation and identify common SEO issues.	Try it
18	Case Converter	Text & Content	Transform text between UPPERCASE, lowercase, camelCase, snake_case, and more.	Try it
19	Chmod Calculator	Developer Utilities	Interactively build Unix file permissions and get the numeric and symbolic chmod values.	Try it
20	Chrono / Timezone Converter	Developer Utilities	Visually synchronize and convert time across multiple global timezones.	Try it
21	CIE Chromaticity Gamut Visualizer	Color Tools	A color space analysis canvas that plots custom colors onto a CIE 1931 chromaticity diagram against sRGB, Display P3, and Rec.2020 gamut boundaries.	Try it
22	Clip Path Generator	CSS Tools	Visually create complex CSS clip-path shapes and instantly copy the generated code.	Try it
23	Code Snippet Manager	Developer Utilities	Store, categorize, and retrieve code snippets with syntax highlighting, entirely offline.	Try it
24	Color Blindness Simulator	Color Tools	Simulate how colors and images appear with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia to design more accessible interfaces.	Try it
25	Color Blindness Simulator	Color Tools	Preview how colors and images appear under different types of color vision deficiency.	Try it
26	Color Mixer	Color Tools	Blend two colors to generate a mixed color and a five-shade palette instantly.	Try it
27	Color Mixer Tool	Color Tools	Mix colors and generate harmonious color palettes.	Try it
28	Color Palette Extractor	Image Tools	Extract dominant colors and generate beautiful palettes directly from images in your browser.	Try it
29	Color Palette Generator	Color Tools	Generate beautiful random color combinations for designers and frontend developers.	Try it
30	Color Picker	Color Tools	Pick a color and view it in HEX, RGB, HSL, and HSV, with generated shades and recent colors.	Try it
31	Command Step Loader	Developer Utilities	Load multiple commands and copy them one at a time with a terminal-style interface.	Try it
32	Commit Message & Range Cleaner	Developer Utilities	Paste a git log excerpt and generate interactive-rebase plans + normalized Conventional Commits suggestions.	Try it
33	Commit Message Generator	Developer Utilities	Build Conventional Commits-formatted commit messages with live preview and validation.	Try it
34	Container Query Sandbox	CSS Tools	A visual builder and live tester for CSS Container Queries (@container) that react to parent dimensions rather than the viewport.	Try it
35	Content-Visibility & Intersection Debugger	Developer Utilities	A performance debugging tool that visualizes content-visibility: auto states to help developers track layout and paint skipping.	Try it
36	Contrast Checker	Color Tools	Check the WCAG 2.1 contrast ratio between two colors with AA/AAA compliance and a live text preview.	Try it
37	Contrast Checker (A11y)	Accessibility	WCAG 2.1 AA/AAA contrast checker with live UI previews and an automatic fix suggestion.	Try it
38	Cookie Viewer	Browser & Network	Inspect, create, edit, delete, and search cookies for the current site — no dev tools required.	Try it
39	Cron Expression Builder	Developer Utilities	Build and customize cron schedules with presets, instant validation, explanations, and upcoming run previews.	Try it
40	Cron Run Planner	Developer Utilities	Visualize upcoming cron run times across multiple timezones with a timeline and export.	Try it
41	CSS Animation Builder	CSS Tools	Visually create CSS animations and export keyframes without manually writing CSS.	Try it
42	CSS Color Converter	Color Tools	Convert between Hex, RGB, HSL, HSLA, and OKLCH color formats instantly with a visual picker.	Try it
43	CSS Custom Property Fallback Chain Debugger	CSS Tools	A visual analyzer for deeply nested CSS var() fallback chains that tracks down evaluation paths and silent invalid-value bugs.	Try it
44	CSS Easing Visualizer	CSS Tools	Compare multiple CSS easing curves side-by-side on a shared graph and in an animated race preview.	Try it
45	CSS Easing Visualizer	CSS Tools	Compare multiple CSS easing curves side-by-side on a shared graph and in an animated race preview.	Try it
46	CSS Grid Generator	CSS Tools	Build CSS Grid layouts visually with configurable columns, rows, gap, and sizing options.	Try it
47	CSS Mesh Gradient Generator	CSS Tools	Visually design, warp, and generate complex, modern mesh gradients using draggable color pins and control handles.	Try it
48	CSS Specificity Calculator	CSS Tools	Break down CSS selectors into their specificity score and see which rule wins a conflict.	Try it
49	CSS Unit Converter	CSS Tools	Instantly convert between px, rem, em, vw, vh, and percentages.	Try it
50	CSS Variable Explorer	CSS Tools	Extract, edit, preview, copy, and download CSS custom properties with a live theme preview.	Try it
51	CSS Variable Explorer & Theme Generator	CSS Tools	Explore, edit, and export CSS custom properties with live preview and a glassmorphism UI.	Try it
52	Curl Builder	JSON & API	Construct ready-to-run cURL commands for REST APIs with headers, auth, body types, query params, and file uploads.	Try it
53	DNS Record Lookup	Browser & Network	Query DNS records for any domain via DNS-over-HTTPS, with no terminal or backend required.	Try it
54	Favicon Generator	Developer Utilities	Generate a complete favicon pack and integration tags from any image, offline.	Try it
55	Flexbox Playground	CSS Tools	Experiment with Flexbox properties visually and copy the generated CSS.	Try it
56	Fluid Typography & CSS clamp() Calculator Studio	CSS Tools	Visual calculator and simulator for generating CSS clamp() fluid typography and spacing expressions.	Try it
57	Full Client-Side PDF Toolkit	Developer Utilities	A comprehensive, 100% offline PDF utility to merge, split, rotate, watermark, and reorder pages locally using pdf-lib.	Try it
58	Full Keyboard Navigation & Focus Order Auditor	Accessibility	An interactive accessibility tester that parses raw HTML to compute tab-order overlays, flag positive tabindex errors, and simulate keyboard navigation.	Try it
59	Git Command Explainer	Developer Utilities	Explain any Git command in plain English, with full flag-by-flag breakdowns for the most commonly used commands.	Try it
60	Git Ignore Generator	Developer Utilities	Generate boilerplate .gitignore files for various technologies instantly, offline.	Try it
61	GitHub Profile README Generator	Developer Utilities	Generate a professional GitHub profile README with live stats and an editable preview.	Try it
62	GitHub Token Validator (Glass)	Developer Utilities	Validate GitHub Personal Access Tokens against the GitHub API with a sleek glass-themed UI.	Try it
63	GitHub Token Validator (Glassmorphism)	Developer Utilities	Glassmorphism-themed GitHub Token Validator tool that allows users to validate GitHub Personal Access Tokens directly in the browser.	Try it
64	GitHub Token Validator (Modern)	Developer Utilities	Validate GitHub Personal Access Tokens with a sleek, modern interface. Token never leaves your browser.	Try it
65	GitHub Token Validator (Terminal)	Developer Utilities	Validate GitHub Personal Access Tokens with a terminal-style UI that displays user identity and scopes.	Try it
66	GitHub Token Validator GitHub Style	Developer Utilities	Validate GitHub Personal Access Tokens with a clean, modern, and responsive card-based interface GitHub style.	Try it
67	GitHub Token Validator Plain	Developer Utilities	Validate GitHub Personal Access Tokens with a clean, straightforward interface.	Try it
68	GitHub Token Validator Retro	Developer Utilities	Validate GitHub Personal Access Tokens with a retro terminal themed interface.	Try it
69	Glassmorphism Generator	CSS Tools	Generate sleek, frosted-glass UI effects for your components.	Try it
70	Gradient Builder	Color Tools	Visually build linear or radial CSS gradients with multiple color stops and copy-ready CSS.	Try it
71	GraphQL Schema Inspector & Query Studio	Developer Utilities	GraphQL SDL schema parser, interactive query builder, and mock response resolver.	Try it
72	Grid Areas Architect	CSS Tools	A visual designer for CSS grid-template-areas that validates rectangular constraints and generates production-ready layout code.	Try it
73	Hash Generator	Developer Utilities	Generate SHA-1, SHA-256 and SHA-512 hashes instantly in your browser.	Try it
74	Hash Generator (v2)	Developer Utilities	Generate and verify MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes for text or files entirely in the browser.	Try it
75	Heading Structure Visualizer	Accessibility	Visualize a page's heading hierarchy and catch skipped levels, missing or duplicate H1s.	Try it
76	Hreflang Tag Generator	Web & SEO	Generate valid hreflang link tags for multilingual and multi-regional websites.	Try it
77	Hreflang Tag Generator (Retro)	Web & SEO	Generate valid hreflang link tags with a retro CRT terminal aesthetic.	Try it
78	HTML Entity Converter	Text & Content	Encode text into named, decimal, or hex HTML entities, or decode entities back into readable text.	Try it
79	HTTP Cache-Control Simulator	Developer Utilities	An interactive playground to simulate and test HTTP headers like Cache-Control, ETag, and Last-Modified across different browser navigation states.	Try it
80	HTTP Header Builder & Canonicalization Checker	Developer Utilities	Construct HTTP headers interactively while verifying correctness, format, duplicates, and casing to generate canonical header blocks.	Try it
81	HTTP Header Inspector	Browser & Network	Send a request to any URL and inspect its HTTP response headers, status code, and timing.	Try it
82	HTTP Header Inspector (v2)	Browser & Network	Inspect HTTP response headers, understand their purpose, and analyze security, caching, CORS, and performance information.	Try it
83	HTTP Request Header Builder	JSON & API	Create, validate, organize, preview, import, and export HTTP request headers locally in your browser.	Try it
84	ICC-Aware Print Color Converter & Soft Proof Studio	Color Tools	A professional browser-based prepress studio for ICC-accurate CMYK conversions, soft-proofing, gamut analysis, and Delta E calculations.	Try it
85	Image Dimension Checker	Image Tools	Inspect an image's width, height, aspect ratio, orientation, size, format, and megapixels locally.	Try it
86	Image Metadata Viewer	Image Tools	Extract and view EXIF, GPS, and other hidden metadata locally without uploading your images.	Try it
87	Interactive AST Visualizer & Parser Studio	Developer Utilities	Real-time Abstract Syntax Tree (AST) visualizer and parser studio for JavaScript and JSON code.	Try it
88	Interactive SQL Query Builder & Formatter	JSON & API	Interactive visual GUI editor for constructing, formatting, and exporting SQL queries across multiple database dialects.	Try it
89	Interactive Word Search Generator & Solver	Text & Content	Interactive tool to create, solve, and print custom Word Search grid puzzles with drag-highlighting.	Try it
90	JSON CSV Converter	JSON & API	Convert between JSON and CSV formats with bidirectional conversion and custom delimiters.	Try it
91	JSON Diff Viewer	JSON & API	Compare two JSON objects semantically with added, removed, and modified value highlighting.	Try it
92	JSON Formatter	JSON & API	Format, validate, and minify JSON locally in your browser.	Try it
93	JSON Path Explorer	JSON & API	Paste a JSON document, build/test JSONPath expressions, and preview matching nodes/values offline.	Try it
94	JSON Schema Validator	JSON & API	Validate JSON data against a JSON Schema.	Try it
95	JSON Schema Validator	JSON & API	Validate JSON data against JSON Schema with live error reporting, syntax highlighting, and detailed validation results.	Try it
96	JSON to CSV Converter	JSON & API	Convert between JSON and CSV formats instantly.	Try it
97	JSON to Type Definitions Converter	JSON & API	Convert raw JSON payloads into strongly-typed definitions for TypeScript, Go, Rust, JSON Schema, JSDoc, Python, or C#.	Try it
98	JSON-LD / Schema.org Generator	Web & SEO	Generate Schema.org JSON-LD structured data with live preview, copy, and download support.	Try it
99	JSON-LD Schema.org Generator	Web & SEO	Generate Schema.org JSON-LD structured data with live preview, copy, and download support.	Try it
100	JWT Builder & Signer	JSON & API	Build and sign JSON Web Tokens with HS256/HS384/HS512 using Web Crypto API — entirely in your browser.	Try it
101	JWT Decoder	JSON & API	Decode and inspect JSON Web Tokens — header, payload, claims, and expiry — entirely in your browser.	Try it
102	Local A11y Snapshot Scanner	Accessibility	Paste HTML and get a prioritized offline accessibility audit (labels, headings, ARIA hints, contrast guidance).	Try it
103	LocalStorage Explorer	Browser & Network	Browse, search, edit, import, and export localStorage entries for the current origin.	Try it
104	Lorem Ipsum Generator	Text & Content	Generate placeholder lorem ipsum text for designs and mockups.	Try it
105	Markdown Previewer	Text & Content	Write and preview Markdown in real time, offline.	Try it
106	Markdown Table Builder & Converter	Text & Content	Interactive grid editor to create, format, align, and convert Markdown tables.	Try it
107	Markdown Table Generator	Text & Content	Generate Markdown tables easily with this visual tool.	Try it
108	Markdown Table Generator (Girly)	Text & Content	A cute pink-themed Markdown table generator with live preview and one-click copy.	Try it
109	Meta Tag Generator	Web & SEO	Generate essential HTML meta tags with a live preview and copy-ready code.	Try it
110	Neumorphism Generator	CSS Tools	Create soft, extruded UI elements with customizable neumorphic shadows.	Try it
111	OCR Text Extractor	Text & Content	Extract text from images entirely offline using client-side OCR.	Try it
112	Open Graph Checker	Web & SEO	Validate Open Graph tags from any public URL with social previews, health score, and JSON export.	Try it
113	Open Graph Debugger & Meta Diff	Web & SEO	Compare og:* tags with expected profile schemas, audit tag limits or conflicts, and preview social sharing layout cards.	Try it
114	Open Graph Generator	Web & SEO	Generate Open Graph meta tags with a live tri-platform preview (Facebook, Twitter, LinkedIn) and copy-ready HTML.	Try it
115	Open Graph Inspector	Web & SEO	Analyze meta tags, social previews, and SEO metadata for any URL with actionable scores.	Try it
116	Palette Generator	Color Tools	Generate unique, collision-free variation color schemes based on color theory metrics, offline.	Try it
117	Password Generator	Developer Utilities	Generate highly secure, cryptographic random passwords instantly. 100% offline, privacy guaranteed.	Try it
118	Perceptually Uniform Palette Interpolator	Color Tools	A professional color science studio for generating perceptually uniform color scales in OKLCH and CIELAB with live UI previews and design system exports.	Try it
119	Physical → Logical CSS Properties Translator	CSS Tools	A refactoring tool that converts legacy physical CSS properties to direction-aware logical properties with live RTL/LTR previews.	Try it
120	Premium JSON/CSV Converter	JSON & API	Bidirectionally convert between JSON and CSV with nested flattening and live preview.	Try it
121	Privacy Policy Generator	Web & SEO	Generate customizable privacy policies for websites and apps with live preview, copy, and download.	Try it
122	Procedural Pixel Art Generator	Image Tools	Generate symmetrical retro 8-bit sprites using cellular automata and random noise.	Try it
123	QR Code Generator	Developer Utilities	Instantly generate customizable, high-quality QR codes offline.	Try it
124	Query String Builder	JSON & API	Build and parse URL query strings visually, with support for duplicate keys and full URL assembly.	Try it
125	Radii - Border Radius Generator	CSS Tools	Visually create CSS border-radius values with live preview, presets, and copy-ready CSS output.	Try it
126	RADIX — Base Converter	Developer Utilities	A modern base converter with real-time conversion, bit manipulation, and light/dark mode.	Try it
127	README Template Generator	Text & Content	Generate a professional GitHub README.md with customizable sections. Copy or download instantly.	Try it
128	Real Zip Archive Explorer & Editor	Developer Utilities	A powerful in-browser archive editor to explore directory trees, preview text/images inline, modify file contents, and re-download ZIPs locally.	Try it
129	Regex Playground	Developer Utilities	Test regular expressions against custom text with live highlighting and replacement.	Try it
130	RegEx Railroad Diagram & Explainer	Developer Utilities	Visual syntax flowchart generator and plain-English explainer for Regular Expressions.	Try it
131	Regexa — Pattern Workbench	Developer Utilities	A polished regex testing workbench with live matching, flag toggles, and match group inspection.	Try it
132	Responsive Breakpoint Tester	Web & SEO	Test responsive layouts instantly via URL or raw HTML sandbox with intelligent scaling.	Try it
133	Responsive Image Simulator	Image Tools	Preview a srcset/sizes image at common device breakpoints and see which source the browser selects.	Try it
134	Robots.txt Generator	Web & SEO	Visually build, manage, and export standard-compliant robots.txt files with live syntax highlighting.	Try it
135	Screen Resolution Tester	Browser & Network	Test your website at different screen resolutions.	Try it
136	Scroll Driven Animation Timeline Builder	CSS Tools	A visual editor to generate pure CSS scroll-driven animations using animation-timeline: scroll() and view().	Try it
137	Security Header Coach	Web & SEO	Build/validate recommended security headers (especially CSP) with rule explanations and safe templates.	Try it
138	Sitemap Generator	Web & SEO	A standalone Sitemap Generator that helps users create valid XML sitemaps for websites entirely offline.	Try it
139	Sitemap Generator	Web & SEO	Generate valid XML sitemaps instantly. Offline, fast, and secure.	Try it
140	Slug Generator	Web & SEO	Convert any text into a clean, SEO-friendly URL slug with customizable formatting.	Try it
141	Source Map Explorer	Developer Utilities	A serverless bundle size analyzer that decodes raw source maps and VLQ data to map byte weights to original source files.	Try it
142	Sprite Sheet Packer & CSS/SVG Symbol Generator	Image Tools	A professional browser-based asset pipeline tool featuring genuine bin-packing algorithms, interactive previews, and multi-format CSS/SVG exports.	Try it
143	SQL to MongoDB Translator	Developer Utilities	Translate standard SQL queries instantly into MongoDB Aggregation Pipeline JSON arrays.	Try it
144	SQLite File Browser & Query Runner	Developer Utilities	A serverless, WASM-powered SQLite database browser. Drag in a .sqlite file to browse tables, run real SQL queries, and export results entirely offline.	Try it
145	SVG Optimizer	Image Tools	Compress and optimize raw SVG code by removing unnecessary metadata, empty tags, and comments.	Try it
146	SVG Path Visualizer & Curve Editor	Image Tools	Interactive vector canvas editor to manipulate SVG path commands, Bezier curves, and export clean SVG code.	Try it
147	SVG Previewer	Image Tools	Paste raw SVG markup and preview it instantly, with validation and quick export options.	Try it
148	Tailwind → Vanilla CSS Converter	CSS Tools	Paste Tailwind utility classes and get the equivalent hand-written CSS rule.	Try it
149	Tailwind Color Finder	Color Tools	Find the closest matching Tailwind CSS color and shade for any HEX, RGB, or HSL input.	Try it
150	Tailwind to Vanilla CSS Converter	CSS Tools	Paste Tailwind utility classes and get the equivalent hand-written CSS rule.	Try it
151	Target Grade Forecaster	Developer Utilities	Calculate your current average and find out exactly what you need on the final.	Try it
152	Text Diff Viewer	Text & Content	Compare two blocks of text and see line-level and word-level differences, side-by-side or unified.	Try it
153	TF-IDF Search Engine	Developer Utilities	A client-side search index that ranks documents by TF-IDF relevance, with full scoring breakdown shown.	Try it
154	Timestamp Converter	Developer Utilities	Convert Unix timestamps to human-readable dates and back, with local time, UTC, and relative time.	Try it
155	Twitter / X Card Preview	Web & SEO	Preview how Twitter/X cards appear with live updates for Summary and Summary Large Image layouts.	Try it
156	Unicode Inspector	Text & Content	Inspect every character's Unicode code point, UTF-8/UTF-16 bytes, category, and escape sequences.	Try it
157	URL Encoder / Decoder	JSON & API	Encode and decode URLs or percent-encoded strings instantly using native browser APIs.	Try it
158	User Agent Parser	Browser & Network	Parse any User-Agent string into a readable breakdown of browser, engine, OS, device, and CPU architecture.	Try it
159	UUID Generator	Developer Utilities	Generate random v4 UUIDs instantly, offline.	Try it
160	Viewport / Screen Info	Browser & Network	Live browser, screen, and viewport details — resize or rotate to see them update in real time.	Try it
161	Visual Turing Machine	Developer Utilities	A compiler and visual simulator engine for Turing Machine rules (State / Read / Write / Move / Next).	Try it
162	Web Vitals Jank Profiler	Developer Utilities	A live performance diagnostics environment that uses PerformanceObserver to capture, visualize, and debug INP, LCP, and CLS events in real time.	Try it
163	WebRTC P2P Signal & Data Channel Testing Studio	Browser & Network	Interactive WebRTC playground to test peer connections, SDP offers/answers, ICE candidates, and DataChannel messaging.	Try it
164	WebSocket & SSE Sandbox Client	Browser & Network	A developer client to connect to, inspect, send messages to, and debug WebSocket connections and Server-Sent Events (SSE) streams in real time.	Try it
165	Word / Character Counter	Text & Content	Real-time word, character, and sentence counter for text of any length.	Try it
166	XPath Tester	Developer Utilities	Test XPath expressions against XML documents instantly, offline.	Try it
167	YAML / JSON Converter	JSON & API	Convert between YAML and JSON in either direction, with validation and pretty-printed output.	Try it

Want to see your tool here? Use the Contribution Wizard for a guided walkthrough, or check the Contributing Guide and pick an idea from the Ideas Board.

Ideas Board

Below is a curated list of tool ideas waiting to be built. Each idea is a potential contribution. If you're participating in SSoC or just want to contribute, pick one and start building!

Web & SEO

Idea	Difficulty
Open Graph Generator — ✅ Built	Easy
Open Graph Checker — ✅ Built	Medium
Meta Tag Generator — ✅ Built	Easy
Twitter / X Card Preview — ✅ Built	Easy
Robots.txt Generator — ✅ Built	Easy
Sitemap Generator — create XML sitemaps	Medium
Canonical URL Checker — verify canonical tag setup	Medium
JSON-LD / Schema.org Generator — build structured data	Medium
Hreflang Tag Generator — generate multi-language link tags	Easy
Responsive Breakpoint Tester — ✅ Built	Medium
Privacy Policy Generator — fill a form, get a basic privacy policy	✅ Built

Image Tools

Idea	Difficulty
Image Dimension Checker — inspect width, height, and aspect ratio	Easy
Responsive Image Simulator — preview images at different breakpoints	Medium
Aspect Ratio Calculator — ✅ Built	Easy
SVG Previewer — paste and preview SVG code instantly	Easy
Base64 Image Converter — convert images to/from Base64	Easy
Favicon Generator — ✅ Built	Medium
Image Metadata Viewer — ✅ Built	Medium
Color Palette Extractor — ✅ Built	Medium

Color Tools

Idea	Difficulty
Color Picker — pick colors with HEX, RGB, HSL output	Easy
Contrast Checker — verify WCAG contrast ratios	Easy
Palette Generator — ✅ Built	Medium
Gradient Builder — create CSS gradients visually	Easy
CSS Color Converter — ✅ Built	Easy
Tailwind Color Finder — find the closest Tailwind color	Easy

CSS Tools

Idea	Difficulty
Box Shadow Generator — ✅ Built	Easy
Border Radius Generator — ✅ Built	Easy
Clip Path Generator — ✅ Built	Medium
Glassmorphism Generator — ✅ Built	Easy
Neumorphism Generator — ✅ Built	Easy
CSS Grid Generator — ✅ Built	Medium
Flexbox Playground — ✅ Built	Medium
CSS Unit Converter — ✅ Built	Easy
Animation Cubic-Bezier Editor — ✅ Built	Medium
CSS Easing Visualizer — draw cubic-bezier curves with animated preview	Medium
Tailwind → Vanilla CSS Converter — paste Tailwind classes, get equivalent CSS	Medium

Text & Content

Idea	Difficulty
Lorem Ipsum Generator — generate placeholder text	Easy
Word / Character Counter — count words, characters, sentences	Easy
Case Converter — transform text between cases - ✅ Built	Easy
Slug Generator — convert text to URL-friendly slugs	Easy
Markdown Previewer — ✅ Built	Medium
Text Diff Viewer — compare two blocks of text side by side	Medium
Unicode Inspector — inspect Unicode characters and codepoints	Easy
HTML Entity Converter — encode/decode HTML entities and Unicode escapes	Easy
JSON to TypeScript — paste JSON, get TypeScript interfaces	Easy
Readme Template Generator — fill a form, get a polished README.md	Easy

JSON & API

Idea	Difficulty
JSON Formatter — ✅ Built	Easy
JSON Diff Viewer — ✅ Built	Medium
JWT Decoder — ✅ Built	Easy
URL Encoder / Decoder — encode and decode URL strings	Easy
Base64 Encoder / Decoder — ✅ Built	Easy
Curl Builder — ✅ Built	Medium
Query String Builder — build and parse URL query strings	Easy
YAML ↔ JSON Converter — convert between YAML and JSON formats	Easy
API Response Mocker — define a JSON shape, get a mock endpoint via Service Worker	Medium

Developer Utilities

Idea	Difficulty
Timestamp Converter — convert Unix timestamps to human dates	Easy
Regex Tester — test regular expressions with live matching	Medium
Cron Expression Builder — ✅ Built	Medium
Hash Generator — generate MD5, SHA-1, SHA-256 hashes	Easy
Password Generator — ✅ Built	Easy
UUID Generator — ✅ Built	Easy
Command Step Loader — ✅ Built	Easy
Git Ignore Generator — ✅ Built	Easy
QR Code Generator — ✅ Built	Easy
Commit Message Generator — create conventional commit messages	Easy
Chmod Calculator — toggle permission bits, see numeric and symbolic notation	Easy
Crontab Explainer — paste a cron expression, see next 5 run times in plain English	Easy
Epoch Converter — convert between Unix timestamps and human-readable dates	Easy
JWT Builder — create and sign JWTs with custom payloads for testing	Medium
Diff Patch Applier — paste a unified diff and see the result applied	Medium

Browser & Network

Idea	Difficulty
User Agent Parser — parse and explain user agent strings	Easy
Viewport / Screen Info — display device and viewport details	Easy
Cookie Viewer — view and manage browser cookies	Easy
LocalStorage Explorer — browse and edit localStorage	Easy
HTTP Header Inspector — view response headers for a URL	Medium
DNS Record Lookup — query A, AAAA, MX, TXT, CNAME via DNS-over-HTTPS	Medium
WebSocket Tester — connect to a WS endpoint, send/receive messages	Medium
CORS Debugger — explain CORS errors and suggest fixes	Easy
LinkedIn Timestamp Finder — extract the hidden post date from a LinkedIn URL	Easy

Accessibility

Idea	Difficulty
Contrast Checker (A11y) — WCAG 2.1 AA/AAA compliance checker	Easy
Heading Structure Visualizer — visualize heading hierarchy	Easy
Alt Text Helper — preview and validate image alt text	Easy
ARIA Role Reference — quick reference for ARIA roles	Easy

Quests — Interactive Games & Challenges

Quests are playable, gamified lessons — single HTML files that teach through interaction, not just display. Progress is saved via localStorage. See the Quests Contributing Guide for details.

CSS Quests

Idea	Difficulty
Flexbox Froggy — position items using flexbox properties	Medium
Grid Garden — water crops by writing CSS Grid rules	Medium
Selector Showdown — write the CSS selector that matches highlighted elements	Easy
Specificity Wars — guess which selector wins in a head-to-head	Easy
Box Model Detective — debug padding/margin/border visual puzzles	Easy
Transition Builder Challenge — match a target animation using CSS transitions	Medium

JavaScript Quests

Idea	Difficulty
Array Method Pipeline — chain .map, .filter, .reduce to hit the target	Easy
Closure Escape Room — solve puzzles that require understanding closures	Medium
Promise Pipeline — chain async operations in the correct order	Medium
Event Loop Predictor — predict console.log output order	Medium
Type Coercion Gauntlet — guess what == returns for tricky JS comparisons	Easy
Scope Chain Debugger — trace variable lookups through nested scopes	Medium
Destructuring Puzzle — extract the right values from nested objects/arrays	Easy

Git Quests

Idea	Difficulty
Branch Navigator — navigate a commit graph using git commands	Medium
Merge Conflict Arena — practice resolving realistic merge conflicts	Medium
Git Bisect Detective — binary search to find the bug-introducing commit	Easy
Interactive Rebase Simulator — reorder, squash, and edit commits visually	Medium
Cherry-Pick Challenge — pick the right commits to build a release	Easy

General Dev Quests

Idea	Difficulty
HTTP Status Code Quiz — guess the right status code for a scenario	Easy
Regex Golf — write the shortest regex to match/reject string sets	Medium
Terminal Speed Run — complete CLI tasks against the clock	Medium
Binary & Hex Trainer — convert numbers between bases under time pressure	Easy
SQL Query Challenge — write queries to match expected output tables	Medium
Keyboard Shortcut Dojo — learn VS Code / Vim shortcuts through timed drills	Easy
API Design Review — spot the REST anti-patterns in mock API designs	Easy
Accessibility Audit Quest — find and fix a11y issues in broken HTML snippets	Medium

Design System — Premium UI Showcases

Single-file UI showcases built with CSS frameworks and JS libraries via CDN. Show off your frontend creativity — dashboards, landing pages, components, and more. See the Design System Contributing Guide for details.

Dashboards

Idea	Difficulty
Analytics Dashboard — charts, stats cards, and a responsive sidebar	Medium
DevOps Monitor — real-time-style service health, uptime graphs, and alerts	Hard
Project Management Board — Kanban columns with drag-and-drop cards	Medium

Landing Pages

Idea	Difficulty
SaaS Pricing Page — tiered pricing cards with toggle and feature comparison	Easy
Developer Tool Landing — hero, features grid, testimonials, and CTA	Medium
Event Conference Page — schedule, speakers, venue map, and registration CTA	Medium

Components

Idea	Difficulty
Form Components Library — inputs, selects, toggles, date pickers, validation	Medium
Notification System — toast, banner, modal, and inline alert patterns	Easy
Data Table — sortable, filterable, paginated table with bulk actions	Hard

E-Commerce

Idea	Difficulty
Product Page — image gallery, size picker, reviews, and add-to-cart	Medium
Shopping Cart — item list, quantity controls, promo code, and order summary	Medium
Checkout Flow — multi-step form with progress indicator and validation	Hard

Portfolios & Social

Idea	Difficulty
Developer Portfolio — projects grid, skills, timeline, and contact form	Medium
Social Feed — posts, comments, likes, and infinite scroll feel	Medium
Chat Interface — message bubbles, typing indicator, and emoji picker	Hard

Don't see your idea? Use the New Tool Idea issue template to propose it!

Difficulty labels are assigned by the maintainer (@praveenscience) and are slightly negotiable, feel free to discuss in your issue or PR.

Getting Started

Use a tool

# Clone the repo.
git clone https://github.com/praveenscience/One-File-Tools.git

# Open any tool in your browser.
open tools/json-formatter.html

Or just visit the live site (hosted on Cloudflare Pages).

Contribute a tool

# Fork the repo and create a branch.
git checkout -b add/your-tool-name

# Create your tool, add a screenshot, register in data/tools.json.
touch tools/your-tool-name.html

# Run the build scripts.
npm run format                              # Format all tools with Prettier
node scripts/sort-norm.js data/tools.json   # Sort and normalize tools.json
node scripts/build.js                       # Regenerate the landing page
node scripts/theme-gen.js                   # Regenerate resume/portfolio themes (optional)

# Commit and push, make a PR.
git add tools/your-tool-name.html tools/your-tool-name.png data/tools.json
git commit -m "Add: your-tool-name"

# Open Contributing.md for the full step-by-step guide.

Project Structure

One-File-Tools/
├── assets/               # Favicons, manifest, and static images
│   ├── favicon.ico
│   ├── favicon-32x32.png
│   ├── favicon-96x96.png
│   ├── apple-touch-icon.png
│   ├── site.webmanifest
│   └── thumb.png
├── data/                 # Structured data that feeds the builds
│   ├── profile.json      # Sample data for resume & portfolio generation
│   ├── tools.json        # Tool registry (metadata for landing page)
│   ├── themes.json       # Theme registry (resume/portfolio metadata)
│   ├── quests.json       # Quest registry (interactive learning games)
│   ├── quizzes.json      # Quiz registry (multiple-choice challenges)
│   └── design-system.json # Design System registry (UI showcases)
├── scripts/              # Build tooling
│   ├── build.js          # Generates index.html (landing page)
│   ├── theme-gen.js      # Generates resume/portfolio HTML from .hbs + profile.json
│   ├── sort-norm.js      # Sorts and normalizes JSON registries
│   ├── sync-readme.js    # Auto-syncs the Available Tools table in ReadMe.md
│   └── index-template.txt # Landing page template (used by build.js)
├── tools/                # Pillar 1: Single-file developer tools
│   ├── json-formatter.html
│   ├── json-formatter.png
│   └── ...
├── resume/               # Pillar 2: Resume themes ([id].hbs + [id].png)
│   ├── classic.hbs       # Handlebars template
│   └── classic.png       # Screenshot
├── portfolio/            # Pillar 3: Portfolio themes ([id].hbs + [id].png)
│   ├── developer.hbs     # Handlebars template
│   └── developer.png     # Screenshot
├── quests/               # Pillar 4: Interactive learning quests & games
│   └── Contributing.md   # Quest-specific contribution guide
├── quizzes/              # Pillar 5: Quick multiple-choice challenges
│   └── Contributing.md   # Quiz-specific contribution guide
├── design-system/        # Pillar 6: Premium UI showcases with CSS/JS frameworks
│   └── Contributing.md   # Design System contribution guide
├── Contributing.md       # Contribution guide
├── new.html              # Interactive contribution wizard
├── index.html            # Generated: landing page (gitignored)
├── ReadMe.md             # This file
├── package.json
├── License
└── .gitignore

Tech Philosophy

Principle	Rule
One file	Each tool is a single .html file.
Zero dependencies	No npm, no build step. CDN links encouraged for libraries and fonts.
Browser only	Runs entirely client-side.
Beginner friendly	Code should be readable and learnable, even if AI is used, make sure to comment humane way.
Self-contained	Single HTML file with everything it needs. CDN for assets, no server-side code.
Mobile ready	Responsive design on every tool.

SSoC (Social Summer of Code)

This repository is a proud participant in Social Summer of Code (SSoC), an Open Source programme that helps students and beginners contribute to real-world projects.

How SSoC works here

1. Browse the Ideas Board or the Issues tab
2. Pick an issue labeled Easy or Medium
3. Comment on the issue to get assigned
4. Use the Contribution Wizard or follow the Contributing Guide to submit your PR
5. Get your PR reviewed, merged, and earn your contribution points

Contribution labels

Label	Points	What it means
Easy	20	Straightforward tool: single feature, minimal logic / Enhancement of an existing tool.
Medium	30	More complex tool: multiple features, interactive UI.

Difficulty is based on learning value and implementation complexity.

• Easy: Simple tools that help contributors learn concepts in the simplest possible way.
• Medium: Tools that provide a strong learning experience while remaining approachable and understandable.

There are currently no Hard labels in this project. The one-file-tool philosophy keeps contributions focused, self-contained, and beginner-friendly.

Contributors are encouraged to create polished user interfaces, thoughtful features, and strong learning experiences while keeping implementations simple and avoiding unnecessary complexity.

Labels are assigned by the maintainer and are slightly negotiable, if you feel a difficulty is miscategorised, open a discussion.

What counts as a valid contribution?

• New Tool — Build a tool from the Ideas Board or propose your own (Mostly Easy, some Medium).
• Enhancement — Improve an existing tool (better UI, new feature, accessibility fix, dark mode, responsiveness) (Mostly Easy).
• Bug Fix — Fix a broken tool (Mostly Easy).
• Documentation — Improve README, CONTRIBUTING, or add inline code comments (only Easy).

Deployment

This project is designed for static hosting. Works perfectly on:

• Cloudflare Pages (primary)
• GitHub Pages
• Netlify
• Vercel
• Any static web server

License

Unlicense. This is free and unencumbered software released into the public domain. Do whatever you want with it.

---

Built by Praveen Kumar Purushothaman.
Open Source with purpose. One file at a time.