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.
Most developer tools today come with baggage:
npm installwith 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.
| # | Tool | Category | Description | Live |
|---|---|---|---|---|
| 1 | Animation Cubic-Bezier Editor | CSS Tools | Visually create and customize CSS cubic-bezier() easing functions with a live animation preview. | Try it |
| 2 | 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 |
| 3 | 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 |
| 4 | Box Shadow Generator | CSS Tools | Design CSS box shadows visually with live preview, presets, and copy-ready output. | Try it |
| 5 | Canonical URL Checker | Web & SEO | Analyze HTML to verify canonical URL implementation and identify common SEO issues. | Try it |
| 6 | Clip Path Generator | CSS Tools | Visually create complex CSS clip-path shapes and instantly copy the generated code. | Try it |
| 7 | Code Snippet Manager | Developer Utilities | Store, categorize, and retrieve code snippets with syntax highlighting, entirely offline. | Try it |
| 8 | Color Palette Extractor | Image Tools | Extract dominant colors and generate beautiful palettes directly from images in your browser. | Try it |
| 9 | Command Step Loader | Developer Utilities | Load multiple commands and copy them one at a time with a terminal-style interface. | Try it |
| 10 | Cron Expression Builder | Developer Utilities | Build and customize cron schedules with presets, validation, explanations, and upcoming run previews. | Try it |
| 11 | CSS Color Converter | Color Tools | Convert between Hex, RGB, HSL, HSLA, and OKLCH color formats instantly with a visual picker. | Try it |
| 12 | CSS Grid Generator | CSS Tools | Build CSS Grid layouts visually with configurable columns, rows, gap, and sizing options. | Try it |
| 13 | CSS Unit Converter | CSS Tools | Instantly convert between px, rem, em, vw, vh, and percentages. | Try it |
| 14 | 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 |
| 15 | Favicon Generator | Developer Utilities | Generate a complete favicon pack and integration tags from any image, offline. | Try it |
| 16 | Flexbox Playground | CSS Tools | Experiment with Flexbox properties visually and copy the generated CSS. | Try it |
| 17 | Git Ignore Generator | Developer Utilities | Generate boilerplate .gitignore files for various technologies instantly, offline. | Try it |
| 18 | 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 |
| 19 | GitHub Token Validator (Terminal) | Developer Utilities | Validate GitHub Personal Access Tokens with a terminal-style UI that displays user identity and scopes. | Try it |
| 20 | 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 |
| 21 | GitHub Token Validator Plain | Developer Utilities | Validate GitHub Personal Access Tokens with a clean, straightforward interface. | Try it |
| 22 | GitHub Token Validator Retro | Developer Utilities | Validate GitHub Personal Access Tokens with a retro terminal themed interface. | Try it |
| 23 | Glassmorphism Generator | CSS Tools | Generate sleek, frosted-glass UI effects for your components. | Try it |
| 24 | Hreflang Tag Generator | seo | Generate valid hreflang link tags for multilingual and multi-regional websites. | Try it |
| 25 | Image Metadata Viewer | Image Tools | Extract and view EXIF, GPS, and other hidden metadata locally without uploading your images. | Try it |
| 26 | JSON Diff Viewer | JSON & API | Compare two JSON objects semantically with added, removed, and modified value highlighting. | Try it |
| 27 | JSON Formatter | JSON & API | Format, validate, and minify JSON locally in your browser. | Try it |
| 28 | JSON-LD / Schema.org Generator | Web & SEO | Generate Schema.org JSON-LD structured data with live preview, copy, and download support. | Try it |
| 29 | JWT Decoder | JSON & API | Decode and inspect JSON Web Tokens — header, payload, claims, and expiry — entirely in your browser. | Try it |
| 30 | Lorem Ipsum Generator | Text & Content | Generate placeholder lorem ipsum text for designs and mockups. | Try it |
| 31 | Markdown Previewer | text-content | Write and preview Markdown in real time, offline. | Try it |
| 32 | Meta Tag Generator | Web & SEO | Generate essential HTML meta tags with a live preview and copy-ready code. | Try it |
| 33 | Neumorphism Generator | CSS Tools | Create soft, extruded UI elements with customizable neumorphic shadows. | Try it |
| 34 | Open Graph Checker | Web & SEO | Validate Open Graph tags from any public URL with social previews, health score, and JSON export. | Try it |
| 35 | 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 |
| 36 | Open Graph Inspector | Web & SEO | Analyze meta tags, social previews, and SEO metadata for any URL with actionable scores. | Try it |
| 37 | Palette Generator | Color Tools | Generate unique, collision-free variation color schemes based on color theory metrics, offline. | Try it |
| 38 | Password Generator | Developer Utilities | Generate highly secure, cryptographic random passwords instantly. 100% offline, privacy guaranteed. | Try it |
| 39 | QR Code Generator | Developer Utilities | Instantly generate customizable, high-quality QR codes offline. | Try it |
| 40 | Radii - Border Radius Generator | CSS Tools | Visually create CSS border-radius values with live preview, presets, and copy-ready CSS output. | Try it |
| 41 | Responsive Breakpoint Tester | Web & SEO | Test responsive layouts instantly via URL or raw HTML sandbox with intelligent scaling. | Try it |
| 42 | Robots.txt Generator | Web & SEO | Visually build, manage, and export standard-compliant robots.txt files with live syntax highlighting. | Try it |
| 43 | Sitemap Generator | undefined | A standalone Sitemap Generator that helps users create valid XML sitemaps for websites entirely offline. | Try it |
| 44 | Twitter / X Card Preview | Web & SEO | Preview how Twitter/X cards appear with live updates for Summary and Summary Large Image layouts. | Try it |
| 45 | UUID Generator | Developer Utilities | Generate random v4 UUIDs instantly, offline. | Try it |
Want to see your tool here? Check out the Contributing Guide and pick an idea from the 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!
| Idea | Difficulty |
|---|---|
| Easy | |
| Medium | |
| Easy | |
| Easy | |
| 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 |
| Medium | |
| Privacy Policy Generator — fill a form, get a basic privacy policy | Easy |
| Idea | Difficulty |
|---|---|
| Image Dimension Checker — inspect width, height, and aspect ratio | Easy |
| Responsive Image Simulator — preview images at different breakpoints | Medium |
| Easy | |
| SVG Previewer — paste and preview SVG code instantly | Easy |
| Base64 Image Converter — convert images to/from Base64 | Easy |
| Medium | |
| Medium | |
| Medium |
| Idea | Difficulty |
|---|---|
| Color Picker — pick colors with HEX, RGB, HSL output | Easy |
| Contrast Checker — verify WCAG contrast ratios | Easy |
| Medium | |
| Gradient Builder — create CSS gradients visually | Easy |
| Easy | |
| Tailwind Color Finder — find the closest Tailwind color | Easy |
| Idea | Difficulty |
|---|---|
| Easy | |
| Easy | |
| Medium | |
| Easy | |
| Easy | |
| Medium | |
| Medium | |
| Easy | |
| Medium | |
| CSS Easing Visualizer — draw cubic-bezier curves with animated preview | Medium |
| Tailwind → Vanilla CSS Converter — paste Tailwind classes, get equivalent CSS | Medium |
| Idea | Difficulty |
|---|---|
| Lorem Ipsum Generator — generate placeholder text | Easy |
| Word / Character Counter — count words, characters, sentences | Easy |
| Case Converter — transform text between cases | Easy |
| Slug Generator — convert text to URL-friendly slugs | Easy |
| 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 |
| Diff Viewer — paste two text blocks, see highlighted line-by-line diff | Medium |
| Idea | Difficulty |
|---|---|
| Easy | |
| Medium | |
| Easy | |
| URL Encoder / Decoder — encode and decode URL strings | Easy |
| Easy | |
| 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 |
| Idea | Difficulty |
|---|---|
| Timestamp Converter — convert Unix timestamps to human dates | Easy |
| Regex Tester — test regular expressions with live matching | Medium |
| Medium | |
| Hash Generator — generate MD5, SHA-1, SHA-256 hashes | Easy |
| Easy | |
| Easy | |
| Easy | |
| Easy | |
| 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 |
| 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 |
| 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 |
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.
# Clone the repo.
git clone https://github.com/praveenscience/One-File-Tools.git
# Open any tool in your browser.
open tools/json-formatter.htmlOr just visit the live site (hosted on Cloudflare Pages).
# 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.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)
├── 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 tools.json
│ ├── 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
├── Contributing.md # Contribution guide
├── index.html # Generated: landing page (gitignored)
├── ReadMe.md # This file
├── package.json
├── License
└── .gitignore
| 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. |
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.
- Browse the Ideas Board or the Issues tab
- Pick an issue labeled
EasyorMedium - Comment on the issue to get assigned
- Follow the Contributing Guide to submit your PR
- Get your PR reviewed, merged, and earn your contribution points
| 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.
- New Tool — Build a tool from the Ideas Board or propose your own (Mostly
Easy, someMedium). - 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).
This project is designed for static hosting. Works perfectly on:
- Cloudflare Pages (primary)
- GitHub Pages
- Netlify
- Vercel
- Any static web server
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.