Skip to content
BranchesTags

Repository files navigation

DevTools Logo

DevTools

Minimalist, Local-First Developer Utilities Suite

A curated collection of essential, distraction-free developer tools built with vanilla web technologies. Designed for speed, aesthetics, and privacy — all computations run 100% client-side in your browser.

Live Demo License: MIT Zero Dependencies Local-First PRs Welcome


🌐 Launch Live Web App (https://ichshakib.github.io/dev-tools/)

🚀 Launch Live Demo • Explore Tools • Report Bug • Request Tool



DevTools App Demo

Tip

🌐 Live Web App Available

You can run and use all developer utilities immediately with zero setup, zero installation, and zero ads: 👉 https://ichshakib.github.io/dev-tools/

All computations, image processing, and hashing execute 100% client-side in your browser.

Table of Contents

App Demo

DevTools features a clean, distraction-free monochrome interface designed for speed, with responsive layouts and seamless Dark and Light theme modes:

Dark Theme Light Theme
DevTools Dark Theme DevTools Light Theme

Philosophy & Core Principles

DevTools was engineered to solve the frustration of ad-heavy, slow, tracking-laden online developer utilities.

  1. 100% Client-Side & Local-First: No data, master images, code snippets, or keys ever leave your machine. No tracking, telemetry, or server-side computation.
  2. Zero Runtime Dependencies: Built entirely with Vanilla JavaScript, HTML5 Canvas, Web Crypto API, and pure CSS. No bulky node_modules or heavy UI frameworks required to run.
  3. Instant & Distraction-Free: Minimalist, monochrome aesthetics with seamless dark/light theme switching, responsive design, and zero flash of unstyled content (FOUC).
  4. Single-Source Component Architecture: Shared header, footer, theme persistence, and global search keybindings (Ctrl+K or /) are dynamically managed via components.js.

Tools Directory

App Icon & Asset Generators

Tool Description File Formats & Presets Live Link
🤖 Android Icon & Splash Generator Complete Android asset package generator with custom background colors, adaptive safe margin sliders, and an interactive Splash Screen Studio with live phone mockup preview. mipmap (mdpi–xxxhdpi), ic_launcher_round.png, playstore-512.png, adaptive layers (foreground/background), splash screens (1080x2400, 1080x1920, 1920x1080, 1536x2048, Android 12+ 288x288), styles.xml Open Tool ↗
🍏 iOS App Icon Generator Apple App Store-compliant iOS icon generator with solid background fill controls (App Store rejects alpha channels) and Xcode asset catalog export. App Store 1024x1024, iPhone App (180, 120), iPad Pro (167), iPad App (152, 76), Spotlight, Settings, Notifications, and Contents.json Open Tool ↗
💻 Electron & Desktop Icon Generator Multi-resolution Windows .ico binary generator, macOS Retina PNGs, and Linux desktop icons with copyable BrowserWindow and electron-builder configuration snippets. Multi-res Windows .ico (16–256px), macOS Retina 1024x1024, macOS 512x512, Linux standard (16–512px) Open Tool ↗
🌐 Web Favicon & Manifest Generator Multi-size favicon generator featuring a live interactive browser tab mockup, modern PNG favicons, dynamic site.webmanifest export, and copyable HTML <head> tags. Multi-size favicon.ico (16, 32, 48px), apple-touch-icon.png (180x180), Android Chrome (192, 512px), favicon-32.png, favicon-16.png, site.webmanifest Open Tool ↗

Tip

Client-Side ZIP Packaging: All icon generators include a Download ZIP button powered by an internal zero-dependency PKZIP engine. You can download the entire structured asset package in a single .zip file without annoying browser multi-file permission prompts, or download icons individually one-by-one.

Generators & Utilities

Tool Description Live Link
📱 WhatsApp Direct Link Generator Create click-to-chat links (wa.me) and scannable QR codes without saving phone numbers in contacts. Open Tool ↗
🏁 QR Code Generator Generate high-res QR codes for URLs, plain text, and Wi-Fi networks with custom foreground/background colors and PNG export. Open Tool ↗
🔗 URL Slug Generator Convert headlines, titles, and sentences into clean, URL-friendly, SEO-optimized slugs with customizable delimiters (-, _, .), lowercase filters, and special character sanitization. Open Tool ↗
⏱️ Cron Job Generator Build, inspect, and decipher standard 5-part crontab expressions with natural language descriptions, preset schedules, and live execution previews. Open Tool ↗

Encoders & Converters

Tool Description Live Link
🔤 Base64 Encoder / Decoder Encode and decode plain text, binary files, images, ASCII strings, and Data URIs to and from Base64 format with instant live preview and file drop. Open Tool ↗
🖼️ Image Compressor Compress PNG, JPEG, and WebP images client-side with quality and dimension controls and instant download. Open Tool ↗
🔢 Text to Array Converter Transform raw lines, lists, and delimited text into JavaScript, Python, PHP, SQL IN (...), and JSON arrays. Open Tool ↗
🔒 Hash & Checksum Generator Compute cryptographic hashes (MD5, SHA-1, SHA-256, SHA-512) directly in your browser using the native browser Web Crypto API. Open Tool ↗
🌐 URL Percent Encoder / Decoder Safely encode and decode query parameters, full URLs, and reserved URI characters according to RFC 3986. Open Tool ↗

SEO & Web

Tool Description Live Link
🖼️ Image & File Slug Generator Batch clean, sanitize, and format multiple image names into SEO-friendly filenames with custom delimiters and batch rename scripts. Open Tool ↗
🤖 Robots.txt Generator Configure search crawler access rules, user-agent directives, disallow/allow paths, crawl-delay, and XML sitemap references with one-click copy and download. Open Tool ↗
🗺️ Sitemap.xml Generator Build standard XML sitemaps with URL entries, change frequencies, priority scores, and last-modified timestamps formatted for search engines. Open Tool ↗

Formatters & Validators

Tool Description Live Link
📝 Markdown Viewer & Editor Live client-side Markdown editor with GitHub Flavored Markdown preview, tables, task lists, code formatting, and HTML export. Open Tool ↗
📊 CSV Viewer & Editor Interactive client-side spreadsheet editor: view, edit cells, add rows/columns, search data, and export to CSV or JSON. Open Tool ↗
🔠 Word & Character Counter Real-time text analytics: words, characters, sentences, paragraphs, reading time, case transforms, and keyword density. Open Tool ↗
📋 JSON Formatter & Validator Beautify, format, validate, minify, and inspect JSON payloads with real-time syntax error detection, custom indentation (2 spaces, 4 spaces, tabs), and statistics. Open Tool ↗

Architecture & Tech Stack

graph TD
    User([Developer / Browser]) --> Index[index.html - Portal Hub]
    Index --> AppJS[app.js - Search & Filter Engine]
    
    subgraph Shared Core
        CJ[components.js<br/>Single Source of Truth Header & Footer]
        CSS[style.css<br/>CSS Custom Properties & Monochrome Design]
        Common[tools/common.js<br/>Theme, Toasts, Clipboard & Client ZIP]
    end
    
    subgraph Specialized Tools
        T_Android[Android Icon & Splash Studio]
        T_iOS[iOS Icon & Xcode Asset Catalog]
        T_Electron[Electron & Windows .ICO Studio]
        T_Favicon[Web Favicon & Tab Mockup]
        T_Other[Markdown, WhatsApp, QR, Image Compressor, CSV, Word Counter, Array, Base64, etc.]
    end
    
    CJ --> Index
    CJ --> T_Android
    CJ --> T_iOS
    CJ --> T_Electron
    CJ --> T_Favicon
    CJ --> T_Other
    
    Common --> T_Android
    Common --> T_iOS
    Common --> T_Electron
    Common --> T_Favicon
    Common --> T_Other
Loading
  • Core: Vanilla HTML5, JavaScript (ES6+), Canvas 2D Context.
  • Styling: Vanilla CSS utilizing CSS Custom Properties for theme tokens (--bg-primary, --border-color, --text-primary), system font fallbacks, and high-DPI display optimizations.
  • Binary Generation:
    • Windows .ico binary generator constructed from scratch directly from canvas pixel buffers.
    • Zero-dependency client-side PKZIP 2.0 archive compiler with CRC32 checksums.
  • Cryptography: Native W3C Web Cryptography API (crypto.subtle).

Quick Start & Usage

Option 1: Access the Hosted Live Web App (Instant / No Setup)

You can use the production live web app immediately on any device or browser: 👉 https://ichshakib.github.io/dev-tools/

Option 2: Run Locally (Offline & Self-Hosted)

DevTools requires no installation, build step, or bundling. You can run it locally with any static HTTP server:

1. Clone the Repository

git clone https://github.com/ichshakib/dev-tools.git
cd dev-tools

2. Start a Local Server

Using Python:

python -m http.server 3000

Using Node.js (npx):

npx serve .

Using PHP:

php -S localhost:3000

3. Open in Browser

Visit http://localhost:3000 to access the full portal and all utilities.

Project Structure

devtools/
├── .github/                     # GitHub templates & community configuration
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.yml       # Bug report form
│   │   ├── new_tool.yml         # New tool proposal form
│   │   ├── feature_request.yml  # Feature/improvement request form
│   │   └── config.yml           # Template chooser & contact links
│   └── pull_request_template.md # Pull request template & contributor checklist
├── index.html                   # Main portal landing page with live search & filters
├── app.js                       # Portal logic (search indexing, tag filtering, tool metadata)
├── components.js                # Shared header, footer, theme engine, and keybindings
├── style.css                    # Design system tokens and shared utility styles
├── logo.svg                     # DevTools branding vector
├── LICENSE                      # MIT License
├── README.md                    # Project documentation
├── CONTRIBUTING.md              # Contributor guide & template for adding tools
├── CODE_OF_CONDUCT.md           # Community guidelines (Contributor Covenant)
└── tools/                       # Individual standalone tools
    ├── common.js                # Shared utilities (toast, clipboard, zip builder)
    ├── android-icon-generator.html
    ├── ios-icon-generator.html
    ├── electron-icon-generator.html
    ├── favicon-generator.html
    ├── base64.html
    ├── cron-generator.html
    ├── hash-generator.html
    ├── json-formatter.html
    ├── robots-txt.html
    ├── sitemap-generator.html
    ├── slug-generator.html
    └── url-encoder.html

Keyboard Shortcuts

  • Ctrl + K or / — Focus quick search input on the portal.
  • Esc — Clear search filter or close active modals/toasts.

Contributing

Contributions are welcome! Whether you are proposing a new developer utility, refining an existing generator, or fixing an issue, please read our Contributing Guide to get started.

Code of Conduct

We are committed to providing a welcoming, inclusive, and harassment-free experience for everyone. Please review our Code of Conduct.

Contact

Have questions, feedback, feature proposals, or want to get in touch?

License

Distributed under the MIT License. See LICENSE for more details.

Crafted with care by Shakib Khan.

About

A curated collection of essential, distraction-free developer tools built with vanilla web technologies. Designed for speed, aesthetics, and privacy — all computations run 100% client-side in your browser.

ichshakib.github.io/dev-tools/

Topics

android-icon-generatorbase6base64base64-decodingbase64-encodingcron-generatorcss3csv-editorfavicon-generatorhtml5image-compressionimage-compressorjavascriptjson-formattertoolstoolset

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages