✦ Toolglass

Frosted developer utilities — beautifully fast, 100% client-side.

🔗 Try it live: ajithakdev.github.io/toolglass

---

We built Toolglass because we were tired of opening ad-riddled websites just to decode a JWT, test a regex, or format a timestamp. Most online utility sites leak your sensitive data to backend servers or track your keystrokes.

Toolglass is a zero-telemetry, offline-first suite of developer tools running entirely inside your browser. No backend. No cookies. No analytics. When you paste an API secret or inspect a token, it never touches the network.

---

🧰 Available Tools

Category	Tools
Generators	• Password Generator (CSPRNG, rejection-sampled, entropy meter) • UUID v4 (RFC 4122 bulk generation) • NanoID (URL-safe compact IDs) • Mongo ObjectId (24-char BSON IDs with embedded timestamp) • QR Code (Instant canvas/SVG generation & PNG download)
Encoders & Decoders	• Base64 (Unicode-safe encode/decode) • URL Encoder (encodeURIComponent with full parameter parsing) • JWT Decoder (Header/payload breakdown & expiration badges)
Converters & Formatters	• JSON Formatter (Beautify, minify, syntax validation with line errors) • Color Converter (Hex ⇄ RGB ⇄ HSL with live alpha slider) • JSON to TypeScript (Generates interfaces or types automatically)
Security & Crypto	• Hash Generator (SHA-1, SHA-256, SHA-384, SHA-512 via Web Crypto) • JWT Signer (Local HMAC-SHA256 signature generation)
API & Networking	• API Tester (In-browser HTTP client with cURL import and sanitized headers)
Utilities	• Timestamp Converter (Unix epoch ⇄ ISO 8601 ⇄ relative time & batch mode) • Regex Tester (Real-time regex engine with visual match highlights) • Markdown Preview (Live GitHub-flavored preview with DOMPurify sanitization)

---

💡 Key Principles

1. Zero Network Calls: Everything executes on the client thread using standard Web APIs (crypto.subtle, crypto.getRandomValues, DOMParser).
2. Cryptographic Rigor: Randomness is strictly backed by CSPRNG with rejection sampling to eliminate modulo bias. We never use Math.random().
3. Instant Keyboard Navigation: Hit ⌘K or Ctrl+K anywhere to open the command palette and jump between tools without taking your hands off the keyboard.
4. Shareable State: Key tool configurations sync to URL query params (debounced) so you can bookmark or share exact settings with teammates.
5. No Bloat: Every tool is code-split via dynamic React.lazy() imports. The initial load is tiny (~130 KB gzipped) and tools load on demand.

---

🛠️ Local Development

Toolglass uses standard modern frontend tooling (React 19, TypeScript, Vite, Vitest):

# Clone the repository
git clone https://github.com/ajithakdev/toolglass.git
cd toolglass

# Install dependencies
npm install

# Start local dev server with HMR
npm run dev

Common Scripts

npm run dev            # Start local dev server at http://localhost:5173
npm run build          # Strict type-check (tsc -b) followed by production Vite build
npm run preview        # Preview production bundle locally
npm run lint           # Run ESLint across code and tests
npm test               # Run Vitest test suite once
npm run test:coverage  # Generate test coverage report

---

🗂️ Project Structure

src/
├── components/          # Reusable glass UI widgets (Buttons, Inputs, CommandPalette)
├── hooks/               # Custom hooks (useClipboard, useTheme, useUrlState)
├── pages/
│   ├── Landing.tsx      # Main dashboard with categorized tool grid
│   ├── ToolPage.tsx     # Dynamic lazy loader with ErrorBoundary & Suspense
│   └── NotFound.tsx     # Custom 404 page
├── tools/               # Self-contained tool modules
│   ├── registry.tsx     # Single source of truth for tool metadata & routing
│   └── <tool-name>/
│       ├── <Tool>Tool.tsx      # Main React UI component
│       ├── <tool>.ts           # Pure business logic / calculations
│       └── <tool>.test.ts(x)   # Unit and component tests
└── App.tsx              # Shell with global navigation and theme providers

---

🤝 Contributing

We love contributions! Toolglass was built to make contributing new utilities frictionless:

• Adding a new tool usually requires just one self-contained folder under src/tools/ and a registration line in src/tools/registry.tsx.
• We maintain a zero external runtime dependencies rule for individual tools — rely on native browser APIs.
• Check out our Contributing Guide for detailed step-by-step instructions.
• All contributors are expected to follow our Code of Conduct.
• See our Security Policy for responsible vulnerability disclosure.

---

📄 License

Distributed under the MIT License. Built with ✦ by ajithakdev.